Build 5 Complete and Modern UI Design Templates

1. Introduction: Welcome to the brand-new course, where you can learn about how to create modern and beautiful design templates for your websites. If you want to build and customize your portfolio, become an experienced developer and designer and get hired. Then this is the right course for you. Will build together five Complete and Modern responsive websites with three core technologies, HTML, CSS, and JavaScript. If you have some basic knowledge of these technologies. And still you have some trouble building the websites. Or if you want to level up your developer and designer skills, then you've come to the right place. We created this course to give students the best experience in three core technologies and allow them to create the best-designed templates that will excite their clients. Who will build five different complete websites. And not only the parts of them from scratch, they will be full of modern, nice and beautiful effects and designs. We will start with relatively simple projects, and we will go through some advanced parts as well. Using this course, you can get the inspirations that will help you to enhance your projects and put them in your portfolio. Mastering just these core technologies of front-end web development. You can create awesome and modern themes and simply get hired. Also, you will have enough knowledge to move on and learn other technologies, like some front-end frameworks and libraries, which nowadays are really popular and highly demanded. Joints 2. About the Projects: Hello and welcome to the course. We're glad to see you here. As you already know, we're going to build five different complete responsive websites using HTML, CSS, and JavaScript. In this video, we're going to go through each of them. I would like to mention one thing. As we said, the projects will be created based on three core technologies, HTML, CSS, and JavaScript. So you should have a strong understanding of HTML and CSS and some basic knowledge of JavaScript in order to follow the lectures. Alright, so let's go ahead and describe the projects. Our first project is going to be a Website about furniture. Project is going to be simple one. We will use just HTML and CSS. But I think you will enjoy it because the project is modern looking and beautiful. Let's go ahead and describe the project. It will consist of a couple of different sections. Will start with a Navigation, which will include a couple of different elements like a logo, a search bar, some icons at the Navigation items. Navigation will be followed by the Header of the Website. It has a blue background and I nice Banner with some text and buttons. Next we have a project section which consists of a couple of different headings. And then we have six cards with nice icons. If we hover over the icons and we will have a nice and smooth effect. After that will build a pricing section. This section will have two different parts. The first part consists of the image, heading and bottom. As far as the second part, you will find your six different pricing cars with some nice over effect. Next we have a Blog Section where you can find a magazine and some articles about the trends. The blog section is followed by the Contact Section. And finally, we have here a simple and nice looking Footer of the Website. Alright, so those are the sections of our first Website. Every project in the course is responsive to different screen sizes. If I inspect the page, switch to the responsive mode and check the project four different screen sizes. You will find that the project is Responsive and it looks nice on every different screen size. The projects in the course are created for extra large screen size. I mean, this coincides with 1920 pixels of width and 1080 pixels of height. So if you're using a relatively smaller screen size, then during the lectures you should switch to the responsive mode and specify the width and height like so. Otherwise, the project won't look good on smaller screen size until we make it responsive. So please take it into account. Okay, So the next project is going to be a Personal Portfolio Website. Nowadays, these kind of Website is really popular and highly demanded, so I think it will be interesting for you. So the project is about a Web Developer with all his Skills, works, projects, context, and so on. Let's go ahead and describe the project. So we have here a Header of the Website in which we have a logo, Banner and a Hamburger Menu icon. If I click it, man, the Navigation will appear with some nice effects. The Banner consists of a couple of different elements, including the image of a developer. X, we have a skills section that shows us the technologies and knowledge level of a web developer. The Skills section is followed by the Project section where you can find different works of a developer. After that, we have here a Contact Section with some contact details and input fields. And finally, you can find him I simple and nice Footer. The next project is going to be a Website about architecture. The project consists of a couple of different sections. We will start to create the project by working on the navbar and the Navigation. We have here, the logo, search bar and the Hamburger Menu icon. If I click it, then the Navigation will display nicely. If I hover over the Navigation items, then we will get you these nice and cool effect. After the Navigation, we will create this nice and simple Banner in which we have a couple of different elements. The binary is followed by an About section which consists of two parts. On the left side we have some text elements and the button, as for the right side, consists of a frame and image. And besides that, we have here nice and cool part at the bottom of this section. Next we have the projects section, which includes five cards with some nice hover effects. After that comes to Customers Section, which consists of two different cards. Then we have a Contact Section and simple Footer down below. Alright, Next we're going to be building an interior designer Website. This field is very popular and highly demanded today. So I think this type of website will be interesting and helpful for you. We have here a Header of the Website which includes the logo, the Hamburger Menu icon, and then Animated Banner. If I click the Menu icon, then the Navigation will appear nicely. The binaries Animated, as can see, the text elements are changing with some fade effects. Next we have and About Section, which appears nicely with a fade effect. We're going to use this effect for every section in this project. The About section consists of an image and some details about the designer. Next we have the Services section which shows us what the designer can offer. After that, you can find the projects of the designer. I'm in the portfolio of her work. Then comes the achievement section in which we have Animated Counters. And finally, you can find here I simple and nice Footer. Alright, so the last project and this course will be a Website about coffeehouse. The project will consist of a couple of different parts and will be full of modern looking designs and functionalities. We will start with a Navigation which is fixed at the top side of the page. Once we scroll down, it will change its background. After the Navigation will work on the Banner, which has a Slideshow. We're going to use one of the plug-ins called swipe integer. Yes. It's can see Slideshow works automatically. But besides that, you can use those controllers. And also you can drag the slides with a mouse. Okay, Next we have in About Section with some info. This section is followed by a Menu. After that we have some data with Animated Counters and with some nice effects. The next section will be about the customers we have here, the Customers opinions placed by cost nicely. Next comes the Contact section where you can contact the house or reserve a table. And finally we have here is simple Footer. Alright, so that's it about our projects. I hope you will enjoy them. Learn something new and also get some inspiration to enhance your own portfolio. Let's move on. 3. Setup: Hello and welcome to the course. We're glad that you are here and we hope that you will enjoy the course before we dive deeper and start to create our projects. First of all, we have to prepare our working environment. I'm sure that most of you are already prepared to write the code. If so, then you can feel free to skip this video and jump into the projects right away. But if not, then that's not the problem. Let's go ahead and set up some tools. Throughout this course, we will need two main tools, which are modern web browser and a text editor. As the web browser, I'm going to use mostly Google Chrome. And also in some cases we'll need the help of Mozilla Firefox as well. I'm sure that you already know how to install this web browsers, and I think you all already have them. But anyway, let's see how to download them. In order to get the Google Chrome, we have to go to this URL here and download the web browser. The installation process is quite simple, so I'm not going to go through it. As for the Mozilla Firefox, you have to use this URL and download the web browser from here. Both links will be attached to this lecture. Alright, let's move on and talk about the text editor. We're going to use Visual Studio Code because right now it's one of the best texts editors in the world. Of course, you can feel free and use your favorite text editor. It's up to you, but I recommend to use the VS code. In order to download abuse code, you have to visit this website and get the text editor either for Windows or Mac or Linux. This link will be attached to this lecture as well. The installation process of the Visual Studio Code is very simple, two, so I'm sure that it won't have any trouble with it. Alright, so once you install both tools that you will be good to go. So let's jump right into the Projects 4. Project 1 - Create and Style the Navigation of the Website: Alright, so I have created a new folder on the desktop. Let's go ahead and open it in VS code. I'm going to create here two different files, one for HTML and the second one for the CSS. Then open index.html file and create basic HTML document. Let's go ahead and change the title. I'm going to institute a furniture. And also I'm going to link CSS file. Let's go ahead and run the project to the browser. And also, I'm going to place the browser and the editor side-by-side. Like so. Because I want to make our working process more convenient and simple. Next, I'm going to grab some links like Font Awesome CDN, because we are going to use some Font Awesome icons throughout the project. Let's go ahead and grab the link. Then open link tag and paste here. The link. Besides that, we're going to use some Google fonts. So let's go ahead and visit Google Fonts website and search for a couple of different fonts. The first one is going to be font called kenya. Let's select the Style and then search for another font, MCT1. I'm going to select couple of different styles. Then we need to grab the link from here. Let's paste it in the head element. Alright, so I think we're ready. Let's start to create HTML markup. First of all, I'm going to pass here some comments. Then let's go ahead and open DIV tag with the class container. Next we need another comment for now of course. And then I'm going to institute HTML5 nav tag with the class navbar. Next I'm going to create deep tag, which is going to be enough Part top. And it will include a logo. I'm going to pass you a Font Awesome icon with the class names fa, solid, FAA, couch. So here we have the Font Awesome icon. Then I'm going to insert here a span tag, which will include who taxed value furniture. Alright, that's it about the logo. Then I'm going to create search bar. Let's Institute here input tag with a type text and with the placeholder attribute, which will include the following text. What are you looking for? Then we need again a Font Awesome icon, class names, fa solid, a magnifying glass. So here we have inputs and the search icon. After that, I'm going to create another deep tag with the class user. And I'm going to pass here a couple of different icons. The first one is going to be a solid FA, caught shopping. Then I'm going to pass you span tag, which will include the value I'm in, the dollar sign and some numbers. Then I'm going to use another Font, Awesome icon, F, a regular FAA hot. And finally, I'm going to pause here another icon. It's going to be a solid a user. So here we have our icons. After that. I'm going to create the Navigation list, which will include a couple of different navigation items. Let's interfere In other Font, Awesome icon, it's going to be fa, solid fa house. And also I'm going to use here span tag with value home. Let's duplicate the Navigation item a couple of times and then change the class names and the values of this Pentax. We need here couch and products. The next one is going to be dollar sign and Pricing. The next icon is going to be blogger. Let's pause here Blog. Then we will have star sales. And the last icon is going to be message. And the span element will be Contact. Alright, so here we have the icons, but as you can see, one of the icons is not displaying. Let's check. So we need here fa brands instead of solid. Now the problem is fixed. Alright, let's sit about the HTML markup. Let's start to write some CSS. I'm going to pass here some comments for default styles. Let's go ahead and select every elements using an asterisk. Let's set margin and padding both of them to zero. Also, I'm going to define box-sizing property, and I'm going to set it to border-box. The next one is going to be outlined. Let's make it non. And also I'm going to define the general form family. It's going to be mocked-up sans serif. So it's can see the default styles are applied. Next, I'm going to change the font size of the HTML element because I want to use RAM as the measurement unit. Let's set font size to 62.5 per cent. In this case, one RAM will be equal to ten pixels. Alright, let's go ahead and institute some comments for container. And also for navbar. At first, I'm going to Style enough elements. Let's define width. I'm going to make it 100%. And also I'm going to define the height, which is going to be 19 RAM. Then let's change the background color. I'm going to set it to white. Next, I'm going to use display flex and I'm going to change the direction. It's going to be column. Then use align items center. So as you can see, the elements are placed in the center. Also, I'm going to use little shadow effect. Using box-shadow, the values will be 01 rank five RAM as the color. I'm going to use RGBA value. It's going to be black color with lower opacity, 0.1. So it's can see we have here box shadow. The next element that I'm going to Style is going to be not poor top. First of all, let's set display to flex. Then we need to align items center vertically. And also let's define padding. It's going to be to RAM and zero. Alright? After that, Let's select elements in the not poor top. Let's define margin. It's going to be zero and forum on the left and right sides. Then I'm going to select logo. I mean the Font Awesome icon and the logo. Let's change the font size, make it six RAM. So I'm going to change the color. Let's use here called f887 to be When also creates some space on the right side using margin-right with the value to ramp. So here we have our logo, which is looking much better. Next, I'm going to take care of the span elements, which is placed next to the icon. So let's change the font family. You see your phone called kenya. Cursive. Font size. Let's make it bigger. Use for RAM. Also, create some space between the letters and change color. I'm going to use your color 07372. So here we have our span element, which is Todd and looks nice. Let's select here logo, I mean the wrapper elements. I'm going to set display to flex and also align items center in order to center icon and the spinal elements. Next, let's take care of the search bar. First of all, I'm going to select the input elements and change its width. It's going to be 50 to ram. Next, we need to create some space inside the input set padding to one point to ramp at the top than one point for RAM on the right side, one point to RAM at the bottom, and 3.7 RAM on the left side. Next, I'm going to change the background color. It's going to be a eff three. So here we have the search bar, I mean the input element. Let's get rid of border. I'm going to make it none. And also I'm going to set border-radius 2.5 ran. Next, let's take care of the font. Let's change font size, make it 1.6 RAM. And also, I'm going to set font weight to 300 and change the color. Use here. Blue color. So it's can see the input element looks nicer. Let's go ahead and select the placeholder. Change the font size, make it 1.7 R&amp. Also change the font weight. Use here 300. And I'm going to set color to blue. Okay. Now it's time to start to Style the Font Awesome icon. I'm in the search icon. Let's define this position, make it absolute. And also we need to make the position of the parent elements relative. Because we need to position elements according to the parents. Then define top position is going to be 50 per cent. For the left position is going to be one point for RAM. And also I'm going to center the elements perfectly horizontally. For that we need Transform Translate, Y -50 per cent. So Icons positioned. Next, I'm going to increase the font size. It's going to be 1.5 RAM. Change the color. You see you again, blue color. So the search bar is ready. Let's go ahead and select user. Change the font size, make it to RAM, and also define the color. As you can see, we need some space between the items. So I'm going to select user and user span and define margin-right, Make it one point to run. Alright? So as you can see, the top side of the navbar is ready. Let's go ahead and take care of the Navigation list. Let's define display, flex. Define the height. It's going to be 8.5 RAM. Then we need some space at the top using padding top to RAM. After that, I'm going to select developments in the Navigation list. So the width is going to be 16 RAM. Also, I'm going to use again display flex, and then change the direction, make it column. Let's align items in the center and also use justify-content center in order to center perfectly the elements. Right? After that, I'm going to create borders on the left side of the items that set border left 2.1 RAM solid. And as the color, I'm going to use E9 ad. So let's continue. We have here borders, but we need to remove border in the beginning. So let's go ahead and select novelist Div with the nth child one. We select here the first element, set border to none. So it's can see the problem is fixed. And our navigation items look much better. Let's change the cursor type and make it point. Okay, So let's move on and select icons, increase the font size, make it to Ram. Also change the color. Use here, the blue color. Then I'm going to create some space at the bottom using margin bottom with value one RAM. So it's can see the icons look really nice. Then I'm going to select span elements. I mean the item's font size is going to be 1.6 RAM. And then also we need to change the color. You can color also, I'm going to create some space between the letters. So it's can see the items look really nice. 5. Project 1 - Preview: Hi and welcome to our second project, which is going to be a Personal Portfolio Website. Nowadays, this kind of Website is really popular and highly demanded, so I think it will be interesting for you. The project is about a Web Developer with all his Skills, works, projects, Contact, and so on. Let's go ahead and describe the project. So we have here a Header of the Website in which we have a logo, Banner and a Hamburger Menu icon. If I click it, than the Navigation will appear with some nice effects. The Banner consists of a couple of different elements, including the image of a developer. Next, we have a skills section that shows us the technologies and knowledge level of a web developer. Skills section is followed by the Project section, where we can find different works of a developer. After that, we have here a Contact Section with some contact details and input fields. And finally, you can find here a simple and nice Footer. The project is responsive to different screen sizes. If I inspect the page, switch to the responsive mode and check the project four different screen sizes. You will find that the project is Responsive and it looks nice on every different screen size. Again, all the projects are created for extra large screen size. I'm in discrete sites with 1920 pixels of width and 1080 pixels of height. So if you're using a relatively smaller screen size, then during the lectures, you should switch to the responsive mode and specify the width and height like so. Otherwise, the project won't look good on smaller screen size until we make it responsive. So please take it into account. Okay, So that's it about our second project. Now we can move on and start to build it 6. Project 1 - Build Header of the Website: Alright, so now it's time to create our next section, which is going to be the Landing. Let's institute new comments for lending. Then I'm going to open here Section element with a class Landing. The first element that we are going to insert here is going to be the background. Next, I'm going to insert here Banner, which will consist of a couple of different elements. The first one is going to be an image. Let's specify here the path of the image. We need to select banner image. Also, let's Institute class Banner IMG. Then I'm going to open H1 tag with the class Banner heading. The text is going to be luxury furniture. Then we'll have two different buttons. Let's assigned to the button classes, Banner, BTN, and also Banner be 101. Let's insert here. Go to shop. I'm going to duplicate this element and change the class name and also change the value. It's going to be explored. Alright, so that's it about the HTML markup of the second section. Let's go ahead and start to Style the elements less sensitive your comments. And then select Section element with the class Landing, I want to define a width. It's going to be 100%. As for the height, I'm going to make it 90 viewport height. Next I'm going to select the background. Let's set its position to absolute. And also we need to define the position for the parent element. Let's make it relative. Then I'm going to define top position. It's going to be full RAM. As for the lag position, I'm going to make it 50%. And then let's center the elements horizontally when you transform translate X -50%. Also, I'm going to define the width. It's going to be 90%. As for the height, I'm going to make it 65 ran. Then change the background color, make it be 3954. And also make the corners rounded using border-radius. Three rounds. So here we have the blue background. Next I'm going to select Banner. Let's define width, make it 60%. Then define height is going to be 65. Rhyme. Also set the position to absolute. Then we need to select image element. Let's define width 100%. Also, we need to define height as 100%. So here we have the image. Right? Next, I'm going to change the position of the Banner, let's say top position to eight RAM. Then define left position with present. And also for centering, I'm going to use Transform Translate X value -50 per cent. After that, I'm going to define background image. We need linear gradient with RGBA value. Let's select black color with opacity 0.5. And then again, I'm going to use the same color with the same opacity. After that, let's define border-radius with value three RAM. We need object feet for the image with the value cover. And also we need the same for the radius for the image as well. Finally, let's use opacity, going eight. Alright, so the image looks nice. Let's go ahead and take care of the Banner heading. Let's define his position as absolute. Then we need to define top position, make it ten RAM than the right position is going to be five ran. So as you can see, the heading is positioned on the right side. Let's define the font Size, it's going to be atrium. And also change the color of the element, make it white. Alright, next I'm going to set the width to 40 per cent. And also let's decrease the space between the words. Set line-height to one. Right. Next I'm going to align text to the right side. Also use some texts shadow effect with the values 03 RAM, three RAM. And as the color, Let's use RGBA value. So now as you can see, the heading looks really nice. Next, I'm going to take care of the buttons. Let's set position to absolute. Then refine top position, making 28 RAM. The width is going to be 18 RAM. Also the height is going to be full rank. Then we need border. It's going to be none. Change the border radius, make the buttons rounded, would devalue three RAM. So you can see here the button. I'm going to change the font size. Let's make it 1.6 RAM. Also can the cursor make it pointer? Alright. Let's go ahead and select forest button. The position is going to be right. 25 RAM. The background color will be orange. The color of the text is going to be white. So the first button, it looks good. Let's go ahead and take care of the second one. Use the same code, change the class name. The position is going to be five-prime. On the right side also change the background color. It's going to be white. As for the color of the text is going to be orange. So everything looks really nice. I'm going to create hover effect. For the first button. On hover. I'm going to change the background color. Let's make it white. Also change the color. Make it orange. Asphalt. The second button. We need the opposite. I mean, we have to change the background color, make it orange. As for the color of the text is going to be white. And lastly, let's use transition values, all 0.3 s. Okay, So that's it. The Landing is styled and now we have to move on and take care of the next section. 7. Project 1 - Create Products Section: Okay, so now it's time to move on and start to create our next section, which is going to be the Products section. I'm going to start to create HTML markup. So let's go ahead and insert your comments for Products. Then I'm going to open Section element with the class Products. The first element that I'm going to insert here, it's going to be give the class Products top. We will have here h3 heading element with a value search for. Then we will have H2 heading 15,000 and H1 heading government. With a text Products. After that, I'm going to create another development which will be Products icons. Let's open DIV tag with the class bedroom. I'm going to insecure an image for the icon is going to be bedroom PNG. And also we will have here a span element for the text bedroom. Let's duplicate this elements couple of times. Then change the class names. Going to be buffered. Also change the name of the image and change the text value of the span element to the same for the next element, it's going to be dining. Let's change the image name and also the span. Then we'll have so far change this pan. The next item is going to be table. And the last item is going to be wardrobe. So let's change the name of the image and also this span element. Alright, so that's it about the HTML markup. We have here, all the needed elements. Let's go ahead and start to write some CSS. I'm going to institute the comments, Products and of products. Then select the Section elements, define its width, is going to be 100%. That's probably height. I'm going to make it 85 viewport height. Next, we need display flex. And we have to change the direction. Let's make it column. And also align items in the center. So it's can see the elements are placed in the center. Let's go ahead and select Products. Top defined width, it's going to be 60%. Then I'm going to create some space at the bottom using margin bottom eight RAM. Next, I'm going to select Products. H3, heading element, increased font size, make it to Ram. Also change the color I'm going to use here, blue color. Let's duplicate this code. Change H3N2, H12. I'm going to change the font size, make it seven RAM, and also change the color. Use here, orange color. Right? Let's go ahead and Style the third heading, H1. Change the font size, make it nine RAM. Also change the color. I'm going to use here, blue color. Besides that, I'm going to decrease the space at the top using margin top with a negative value minus phi prime. Okay, so let's can see the headings look pretty nice. Let's go ahead and select products, icons. I'm going to define width. Let's make it 60%. Then I'm going to set display to flex. Create some space between the items using justify content space evenly. So as you can see, we have here even space between the items. Next, I'm going to select Give elements of the products icons. Let's set display to flex. Also change the direction, make it column. Then I'm going to align items in the center. Next, let's define the width, make it 18 RAM. Also define the height 20 RAM. And create some space on the right side using margin-right to run. Okay. Next, let's change the background color. I'm going to use your color F7, F7, C7. Then create space inside the item using padding. Next, I'm going to create some border-radius 2AM and also change the cursor, make it pointer. Right. Next I'm going to get rid of space on the right side from the last item. So we need to select last child. Then we need margin-right to be zero. Alright. Let's go ahead and select Image. Create some space at the bottom using margin bottom three ram. Next, I'm going to select the span element. Let's change image into a span. Change the font size, make it 2.5 RAM. Also change the color. Use your color. Blue. Next, I'm going to create a hover effect. I'm going to change the background color. Let's make it white. And also use box-shadow with the values 01 RAM, three RAM. And as the color, I'm going to use RGBA black color with the opacity 0.1. And also we need here transition for smooth effect. So it's can see we have here nice over effect. The last thing that I'm going to do is to create padding inside the section at the top side with Make it five prime. Right? So everything looks nice and the Products section is done. Let's move on to the next one. 8. Project 1 - Create and Style Pricing Section: Alright, so it's time to move on. Answer to create our next section, which is going to be a Pricing Section. Let's go ahead and insert new comments, Pricing and of Pricing. Then I'm going to open a section element class Pricing. Let's insert here DIV tag Pricing top, which will include a couple of different elements. So I'm going to pass here an image. Let's go ahead and specify here the path of the image. It's going to be furniture to PNG. Next, I'm going to pass your DIV tag Pricing top content. Let's open H1 heading tag with the texts, get ready for Christmas. And also I'm going to place here a pattern, actual trends. Right? So let's see it About the top side. Now, we need to create a couple of cards. Let's create DIV tag Pricing cards and then Institute the car itself. So we will have here Pricing card icons. I mean the Font Awesome icons will have three of them. The first one is going to be F, a solid FAA link. Then the next one is going to be fa, regular. Fa hot. As for the third icon, I'm going to use here, F a solid, a magnifying glass. Plus. Alright, so here we have our Font Awesome icons. Next, I'm going to institute wrapper for the image. As for the image, Let's select the path. It's going to be Pricing armchair. Then I'm going to open h3 heading tag. It's going to be the name armchair. Well, so we will have here stars. Let's use again Font Awesome. Icons will have five stars in total. So we need fa solid of a star. Let's duplicate it four times. And finally, I'm going to pass here H4, heading element for the price. Alright, so let's sit about the card. Will have six of them. So let's go ahead and duplicate it five times. And then we have to make some changes. So the second card, it's going to be about couch. We need to change the path, also the heading. And we will have here different star. It's going to be fa irregular. And also the price is going to be $129. The next card is going to be about lighting. Let's change the price, make it $59. Then we will have a card about so far. Let's change the heading. Also change the price. Then move on to the next card. It's going to be full table. Actually, I'm going to change the stars for the Sofar. We need here. Fa, irregular Then change the price for the table. It's going to be $49. And now we have to change the details for the last card, it's going to be wardrobe. Let's change the heading and also change the star. We need here fa irregular. Lastly, I'm going to change the price, right? So here we have our six cards with images and the details. And the last element in this section is going to be a pattern. Go to shop. Alright, so that's it about the HTML markup. Now, it's time to move on and start to write some CSS. Let's insert new comments for Pricing. Then I'm going to select Section elements. Let's define width. It's going to be 100%. Also we need here height 100%. Then I'm going to set display to flex, and then let's change the direction, make it column. Then I'm going to align the items in the center. So it's can see the elements are placed in the center of the section. Next, I'm going to create some space at the bottom using margin, bottom 20 ram. Though here we have some space that sit about the section element. Let's go ahead and select Pricing top. I'm going to set display to flex. And then let's align items. And the center. Besides that, I'm going to create some space at the bottom. So you have this pace. Next, I'm going to select Pricing top images. The image. Let's create some space on the right side. Let's make it 20 RAM. Then I'm going to select Pricing top H1 heading elements. Let's increase the font size, make it seven RAM. Also change the color. I'm going to use your blue color. So I'm going to define the width. Let's make it 50 RAM, and also change the line height, Make it one. Next, I'm going to create some space at the bottom using margin-bottom three RAM. It's can see the heading looks pretty nice. Let's go ahead and select the button. Let's change the width, make it 18 RAM. And so we need to change the height. Let's make it for RAM. Next, I'm going to define the background color. It's going to be white. So we need here border with values 0.1 g solid, and the color is going to be orange. So here we have the button. Let's make it little bit rounded using border-radius with the value three RAM. So I'm going to change the font size. It's going to be 1.6 R&amp. Next I'm going to change the color. Use here orange color and also change the cursor, make it point. So as you can see, the button looks nice. Now it's time to move on and select Pricing card. Let's change the width, make it 30 RAM. Then change the height. It's going to be 45 RAM. Also, I'm going to change the background color. Let's make it F7, F7, F7. So here we have the cards. Let's create some space using margin, one RAM. Also, I'm going to make the corners rounded using border-radius to ramp. So here we have the changes. Then use display flex and also change the direction, make it column. And also I'm going to align the items in the center. So it's can see the items are placed in the center. I mean in the central vertically. Also, let's use justify content space between in order to create some space between the flex items. Then I'm going to use padding to create some space inside the card. Let's use here five prime and zero and also change the cursor type, make it a pointer. Alright, so the courts look nice. Then we need to select a wrapper development Pricing cards in order to align the cards at first, let's use width, make it 60%. Then set display to flex. Its can see the cards are placed side-by-side Now use justify content with the value Center. And after that, I'm going to wrap the elements using flex wrap, wrap. Okay, So as you can see, the cards are aligned nicely. Let's use margin bottom with the value five RAM in order to create some space at the bottom between the carts and the button. Next, I'm going to select Pricing card icons. At first, I'm going to hide them using display none. Then let's go ahead and select Image wrapper. I'm going to define width. Let's make it 20 RAM. Well, so let's define height. It's going to be 18 RAM. Besides that, I'm going to create some space at the bottom. Let's make it five-prime. Then set display to flex. And also place the contract and the central using justify-content center. Right? After that, I'm going to select the heading three. Let's change the font size. It's going to be 1.61. Also, I'm going to change the font weight. Let's set it to 300 and create some space between the letters. Make it 0.1 R&amp. Next I'm going to change the color. Use your blue color. So let's can see the heading elements. Look nice. Next, I'm going to select the stars. I mean the icon. Let's change the font size, make it 1.6 RAM. Also change the color. You see an orange. As you can see, stars look nice. And now it's time to Customize the H, four heading elements, which is the price, change the font size. Also change the color. So as you can see, headings look nice. Alright, now, we need the same styles for the button at the bottom. As you can see, these tiles are applied and the button looks nice. The last thing to do in this section is to customize the icons of the card. Let's select wrapper and define the position. Let's make it absolute. We need position relative for the parent element in order to align elements according to the parent. Let's set top two to RAM and right position to ram as well. Next, we need display flex and we have to change the direction, make it column. So as you can see, the Font Awesome icons are aligned in the top-right corner of the card. Now we need to Customize and Style the icon itself. I mean the Font Awesome icon. Let's set width to three RAM and also define height, Make it 31 as well. We need background color to be white. Then I'm going to make the icons rounded using border-radius 50 per cent. Also create some space at the bottom using margin, bottom one RAM. And then I'm going to place the icons in the center of the circles using display flex, justify-content center. And also we need to align items center. Right after that, let's create some shadow effects using box-shadow, use your values 0.5 RAM, one RAM, and the RGBA black color with a lower opacity. And now, let's change the font size, make it one point to RAM, and also change the color. Use blue color. Alright, so the icons look good, and now we have to hide them because they should appear on hover. Let's hide the icons and also move them slightly using Transform. Translate Y value to ramp. So as you can see, the icons are hidden. Now we have to create over effect. Let's select Pricing card with hover. And also we have to select the icons. On hover. We have to display back the icons and also set the transform translate Y property to the default position. I mean we need here zero. And also use transition for smooth effect. So as you can see, we have here a really nice and simple hover effect. And actually with the pricing section, we are done. So let's go ahead and move on to the next section. 9. Project 1 - Build Blog Section: Okay, so now it's time to move on. And so to create our next section, which is going to be a Blog Section, Let's insert your new comments Blog and of Blog. And then open section tag with a class name, Blog. I'm going to insert here DIV tag with the class blog content, in which I'm going to insert here another give the class block top. We need here again DIV tag with a class magazine. And also I'm going to pass urine image. Let's select image, which is going to be Magazine dot PNG. Right? Next we need DIV tag with a class trends and then H1 heading tag with the value winter trends. 2023. Came next. I'm going to use button download. And then let's use DIV tag with the class. Blog. Articles will have three different articles in which I'm going to pass year span with a number of one. Then we need another span element with some dummy text. Let's duplicate article twice, because as I said, we need three articles overall. So let's change the numbers. Alright, so that's it about the HTML markup. Let's go ahead and start to customize this section. I'm going to introduce new comments. Then select Section element defined width. It's going to be 100%. For the height. I'm going to set it to at viewport height. Also, I'm going to change the background color. It's going to be blue color. Then I'm going to use flexbox. Let's place the elements in the center using justify-content center and align items center. Okay, so next I'm going to select block content. Let's define a wave. It's going to be 50 per cent. Then the height is going to be 50 ramp. I'm going to change the background color. I'm going to use an orange color. Then let's make the corners rounded using border-radius. So here we have the content. Let's go ahead and select Blog top. Use flexbox. I'm going to suggest via contents is spaced evenly. And also I'm going to align items in the center. Next, let's go ahead and select block top image. I'm in the image of the magazine. Let's set some space at the top using margin top five RAM. So the image looks nice. Next I'm going to use trends, H1 heading elements. That's changed the font size. It's going to be six RAM. Also, I'm going to change the width. Let's set it to five-prime and also check the space between the words using line-height. One. Then change color, make it white, then change color, make it white. And also use some space at the bottom. Right. After that, Let's go ahead and select button. Let's define width. It's going to be 18 RAM. Then I'm going to define the height. It's going to be full RAM. Also change the background color. Let's use blue color. Gets rid of the default border. So here we have the button. I'm going to make it rounded using border-radius. Three RAM. Also change the font size is going to be 1.6 RAM. Then change color, make it white, and also make the cursor pointer. Right. After that, I'm going to start to work on articles. Let's use Flexbox. We need justify-content center. And also we need some space at the top using margin top to RAM. So here we have the articles. Let's select the article itself. Defined width, it's going to be 23 RAM. Also, we need to define height, which will be ten RAM. Then create some space using margin. After that, I'm going to use flexbox. Let's align items in the center and also use cursor pointer. Okay, next I'm going to select span elements in the article. Let's increase the font size, make it to RAM, and also change the color. I'm going to use white color. Next, I'm going to make the text uppercase. And also change the line height. Make it to one. So you will have the text of the articles. Let's duplicate this code and now select the first span element using nth child selector. I'm going to increase the font size is going to be five RAM. Then get rid off color, tax transform property. And also the line height. I'm going to use font-weight with the value bolt. And also let's create some space on the right side using margin-right one ramp. So as you can see, the blog section is finished and it looks nice. Let's move on to the next one. 10. Project 1 - Create Contact Section: Alright, so let's go ahead and start to create our next section, which is going to be a Contact section. I'm going to insert your new comments, Contact and of conflict. Then open Section elements with a class name, Contact. I'm going to insert here DIV tag with a class conflict content. Let's Institute and other DIV, which is going to be content. Left. I'm going to insert your H2 heading elements with the text. Subscribe to our newsletter, and grab 30%, which will be placed in the span element. Next, I'm going to place U DIV tag with the class content, right? In which I'm going to insert input tag with the type e-mail and with a placeholder attribute, your email address. Besides that, I'm going to insert your button with the text sign up. Alright, so that's it about the HTML markup. Let's go ahead and start to write CSS into the comments, contacts and contacts that I'm going to select Contact Section. Let's define width. It's going to be 100%. Also, I'm going to define the height. It's going to be 40, viewport height. Then I'm going to use display flex. And I'm going to place the contents in the center using justify-content center and align items center. So as you can see, the content is placed in the center. Let's go ahead and select content and define the width. It's going to be 50%. Also, I'm going to define height is going to be 15 RAM. Then I'm going to use again Flexbox. So let's consider the elements are placed side-by-side horizontally. Then let's go ahead and select content left and define width. It's going to be 40 per cent. Then I'm going to define the height is going to be hundred percent. I'm in 100% of the parent. Then let's change the background color. I'm going to use orange color. So here we have the left side. Let's make the corners rounded using border-radius to RAM, 00 to RAM. Also, I'm going to use flax books. And I want to place the items in the center. Besides that, let's create some space on the left side using padding. After that, I'm going to select content left, heading elements. Let's define a wave. It's going to be a 2%. Also, I'm going to change the font size. Let's set it to 2.2 RAM. Then I'm going to change the color, is going to be white. Also, we need to decrease the line height. It's going to be one point. For. Now, I'm going to select these span elements, which includes 30% of, let's change the font size, make it 2.5 RAM, and also change the color. I'm going to use your blue color. Right? So the left side looks really nice. Let's go ahead and select right side. Let's define the width. It's going to be 60%. Also, I'm going to define the height as 100 per cent. Then change the background color, use the blue color. Then I'm going to make the corners rounded using border-radius. In this case, we need zero to RAM, to RAM. And zero. Also use flexbox. To align the elements in the center, we need to align items center and also justify-content center. Alright, let's go ahead and select the input elements. First of all, I'm going to define the width is going to be 35 RAM. Then define the height. Let's make it full RAM. Change the background color. I'm going to use here a color 17469. Let's say lighter blue color. Next, I'm going to create some space inside the input using padding. Then gets rid of default border and Create for the radius 0.5 RAM also change the color. I'm going to make the color white and create some space on the right side using margin, right? Want Ram became. So, as you can see, the input element looks nicer. Let's go ahead and select input again. At here placeholder. Let's change the color. Make it white, and also change the font size. Make it one point. For RAM. Alright. After that, I'm going to select input with focus. On focus, I'm going to change the border. Let's make it 0.1 room solid. And as the color I'm going to use orange. So once we focus the input, the border will change. Right? Now it's time to Customize the button which is placed next to input element. Let's define a width, make it ten RAM. Then I'm going to define the height. It's going to be full RAM. Also change the background color. Let's use here orange color. Then. I'm going to get rid of border. Let's make a nun and use for the radius to make the corners of the button rounded. Then I'm going to change the font size is going to be 1.6 RAM. Change the color of the text. Let's make it white and also change the cursor type, make it pointer. Alright, so that's it about the Contact Section. It looks really nice. Let's move on to the next section. 11. Project 1 - Create and Style the Footer of the Website: Alright, so now it's time to create our last section of the Project, which is going to be a Footer. Actually, the Footer is going to be a simple one. Let's insert your comments for the Footer. Then I'm going to open HTML5 footer tag. We'll the class Footer. Then let's go ahead and insert U DIV tag with the class copyright, in which I'm going to place paragraph, which will include HTML5 entity. I mean the copyright sign, followed by the text. All rights reserved. 2023. And then create by code and create. Besides that, we will have here a logo. I mean the Font Awesome icon of the couch, followed by the H1 heading, element furniture. Okay, So that's it. All the elements are created. Let's go ahead and Customize this section. Instead comments for the Footer. Then I'm going to select Footer element, define its width. It's going to be 50 per cent. Then the height is going to be five RAM. Also we need here margin or you to center the element. And also use display, flex. Justify content space between to create space between the items. And also we need here align items center to center the elements vertically. Next I'm going to use border top with the values 0.1 RAM solid. And as the color. Let's use the CCC. Alright, that's it about the Footer. Next, I'm going to Customize the copyright development. Let's set font size to 1.6 RAM. Also change the color, blue color. Next, I'm going to take care of the right side of the Footer. Let's use display flex to place the items side-by-side. Also we need here align items, center. The elements are aligned nicely. Next, let's go ahead and select Font Awesome icon. Increase the font size, make it to RAM. And also change the color I'm going to use here, orange. And then we need some space on the right side using marginal right with the value 1.5 gram. Alright, so that's it about the icon. Next, I want to select the H1 heading elements. Let's change the font family. Use here Kenya course. It also set the font size to run and use some letter spacing 0.3 RAM. And also change the color. Use your blue color. Alright, so let's see the about the Footer. It looks nice and actually will the project we are done next, we have to make it Responsive 12. Project 1 - Make the Project Responsive: Alright, so now it's time to make our project responsive to different screen sizes. I'm going to inspect the page and switch to the responsive mode. The project is made for extra-large screen size. And now we have to find the break points on which we have to make some changes. Actually, I think that after 1,600 pixels, the project needs some changes. So let's go back to the editor. And first I'm going to insert new comments for Responsive. Then I'm going to create CSS media query. And as the screen size, I'm going to define here 1,600 pixels. First of all, I'm going to take care of the Banner. So let's go ahead and select a Banner. I'm going to change its width. Let's make it 70%. Alright, next, let's make a slight change for the products. Let's select it and set padding top to ten RAM. And also I'm going to change the height, which is going to be 100 viewport height. Right? So as you can see, the Products section looks better. Next, I'm going to select Products top and change the width is going to be 70%. So I'm going to take care of the products, icons. Let's set with two 70% as well. So now we have much better result. Alright, next, I'm going to take care of the Pricing cards. So let's change the width. It's going to be 70%. Next, I'm going to take care of the blog section. So let's go ahead and select Blog content. Defined width. It's going to be 70% again. Now we have better result. Then let's move on and select Contact Content. Again, change the width, make it 70%. The Contact Section looks good. And finally, we have to take care of the Footer. Let's change it with two 70%. Alright, so I think everything looks nice. Let's go ahead and find the next breakpoint, which I think is going to be 1,400 pixels. So let's go ahead and create new CSS media query. And as a max-width, let's set here 1,400 pixels. I'm going to change the font size of the HTML elements. Let's set it to 54 per cent. It will make all the elements slightly smaller and it will help us to make the project responsive. Next, I'm going to take care of the Pricing, top elements I'm in the image. Let's change the width, make it 60 RAM, and also change the space on the right side, set margin-right to ten ramp. Now we have better results. And actually all the other sections. Look nice. So let's go ahead and start to work on the next breakpoint, which I think is going to be 1,200 pixels. So let's go ahead and create new CSS media query. And as the max-width, let's specify here 1,200 pixels. First of all, let's change the font size of the HTML elements. I'm going to set it to 51%. As you can see, all the elements got smaller. Next, I'm going to select Banner. Let's change its width and make it 80 per cent So the Banner looks good. Next, I'm going to take here of the product section. Let's select Products Top. Change its width, make it 80 per cent. And also change the width of the products icons. Let's set it to 8% as well. Alright, next, we have here a Pricing cards. So I'm going to select Pricing cards and set its width to eight per cent. So we have three cards on each line again. Alright, let's move on and take care of the Blog Section. Let's select block contents and change its width, make it eight per cent. Next, I'm going to select Blog top image, which is Magazine. Let's set its width to 40 RAM. So I'm going to select blog articles and set margin top to zero. Alright, so the Blog Section looks good. And now we have to take care of the Contact Section and also the Footer. So let's set width to 8% for Contact Content and also change the width, the Footer as well. Alright, so that seats about this breakpoint. Let's go ahead and find the next one. So I think the next breakpoints, It's going to be thousand pixels. So let's go ahead and create new CSS media query with a max-width thousand pixels. First of all, I'm going to decrease the font size of the HTML element. Let's make it 46%. Next. I'm going to take care of the Navigation. Let's select nap or top development and change marching. Make it 0.2 Rem on the left and right sides. So the Navigation least, it looks better. Next, I'm going to select Search bar, input element. And I'm going to change the width. Let's make it for to run. So that's it about the Navigation. Let's select Banner heading and change the font size. Let's make it six RAM. Then I'm going to take care of the Products section. Let's select products and define height. Let's make it 90 viewport height. And also I'm going to set padding top to five-prime. Next, I'm going to select Products. Top H2, heading element, and set font size to five REM. Alright, let's duplicate this code and the same for the H one element. I'm going to set font size to seven ramp. Right? Let's go ahead and move on to the next section, which is Pricing Section. I'm going to select Pricing top image. Let's set its width to 40 RAM. Next, we need to select Pricing, top H1 heading element. Let's change the font size, make it five-prime. And also I'm going to set with 23 to five R&amp. Alright, so I think the top side looks good. Now let's take care of the Cards. Let's set its width to 90%. So again, we have three cards on each line. And actually everything looks good. Let's move on and find the next breakpoint, which I think is going to be 800 pixels. So let's go ahead and select new CSS media query with a max-width, 800 pixels. Let's change again font size of the HTML elements. I'm going to set it to 139 per cent. Next, I'm going to select a logo. I'm in the Font Awesome icon, and change its font size, make it for RAM. After that, I'm going to select Search bar, input element. And I'm going to change the width. Let's make it 30 ramp. Alright, now we have to take care of the Products section. I think we have large space in this section, so let's select products and to find high to make it 75 viewport height. And also change the padding at the top side. Let's set it to zero. Alright. Next, I'm going to select icons Development. Let's set its height to 18 RAM. Also, we need to decrease the size of the icons. So let's select images and set the width to five-prime. Now they look much better. And besides that, I'm going to select span elements and decrease the font size. Let's make it 1.8 ramp. Alright, next, let's go ahead and take care of the Pricing Section. Select Pricing top image, and set its width to three to run. Also, we need to take care of the pricing card. Let's set its width to 27 RAM. Now the images are u2, bigger. So let's take care of that. Select Pricing card image and define the width. Let's make it 18 RAM. Now they look much better. Now we need to take care of the block section. So let's go ahead and select block content set with two 90%. Also, I'm going to select Blog top image. And I'm going to define its width as three to ramp. Right? Next, let's go ahead and take care of the trends. H1 heading elements. I'm going to change its font size. Let's set it to full RAM. And also change the width, make it 30 ramp. Okay, So after that, I'm going to select blog articles. And let's set margin top to five RAM in order to move down the articles. Alright, that's it about the Blog Section. Let's move on and take care of the conduct Section, select Contact Content and change with make it 90%. Actually, we need here percentage sign. Besides that, I'm going to select right side. I mean the input element. Let's set with 230 RAM So the Contact Section looks good and let's move on to Footer, change its width, make it 90%. Alright, so that's it about this breakpoint. Let's move on and find the next one. I think that the next breakpoint, It's going to be 600 pixels. So let's Create new CSS media query and set max width to 600 pixels. First of all, again, I'm going to change the font size of the HTML element. It's going to be 35%. Next, I'm going to select Logo span elements. And I'm going to change its font size. Let's make it three RAM. So we need to take care of the search bar input elements. Let's set its width to 26 RAM. Also, we need to take care of the navigation items. So like development and change with make it 12 RAM. Now, as you can see, the top side of the Website looks nice. Let's move on to the Landing. I'm going to change the height. It's going to be 75 viewport height. Also, I'm going to select heading elements, which is placed on the Banner, and let's change its width, make it to Ram. Next. We need to take care of the button. The Bateson's, let's set width to 15 RAM. Next, let's select the first Batson and change the position I'm in. The right position is going to be 20 to ramp. Okay, So that's it about the Header of the Website. Let's move on and take care of the Products section. Let's set height to 90 viewport height. Now it's can see we have log-space down. So let's select Products. Top. We need text-align center and we have to change the margin at the bottom. Let's set it to three ramp. Alright, let's go ahead and select the icons and set its width to 70%. Also, we need flex wrap to wrap to place the icons on different lines. Next thing that will have to do is to select Development and set width to 16 RAM. Also, we need to set margin to, to run. So it's considered the last item has margin on the left side. So I'm going to fix that problem. Let's select Development. I'm in the last element in the list. Let's set margin right to, to run. Can see now the problem is fixed. Alright? Next we have to take care of the block section because the Pricing Section looks good. So let's go ahead and select article, span element. Change the font size. Let's set it to 1.5 RAM. Now, it looks good. And actually with this break point, we're done. Let's move on and find the next breakpoint, which is going to be the last one. So let's go ahead and create new CSS media query as the max-width of the screen. I'm going to specify here 450 pixels. First of all, let's change the font size of the HTML element. It's going to be 32%. Next, I'm going to take care of the logo. I think would be nice if we hide the text. I'm in this parliament at all using display, none. Next, I'm going to take care of the Products section. Let's select products and said hi to at viewport height. Alright, next, let's move on and take care of the top side of the pricing section. I'm going to select an image element. Let's set its width to 25 RAM. And also, let's customize the heading H1. I'm going to change the font size. Let's set font size to 3.5 RAM. And then change the width, make it 25 wrap. Alright. Now I had to take care of the Contact Section. Let's go ahead and select the left side. I mean content left, H2, heading element. Let's set font size to one point, a trap. Next, I'm going to select Contact left span element. And to change its font size. Let's make it to ramp. Alright, let's move on and take care of the right side. Select content, right? Input elements. Decrease its width, make it 25 RAM. So now it's can see everything. Looks nice and we can say that our project is responsive to different screen sizes. Alright, so with this project we are done. I hope you enjoyed it. Now, we can move on and start to create our next project, which I hope will be interesting and you will learn something new. Alright, let's move on. 13. Project 2 - Preview: Hi and welcome to our second project, which is going to be a Personal Portfolio Website. Nowadays, this kind of Website is really popular and highly demanded, so I think it will be interesting for you. The project is about a Web Developer with all his Skills, works, projects, Contact, and so on. Let's go ahead and describe the project. So we have here a Header of the Website in which we have a logo, Banner and a Hamburger Menu icon. If I click it, than the Navigation will appear with some nice effects. The Banner consists of a couple of different elements, including the image of a developer. Next, we have a skills section that shows us the technologies and knowledge level of a web developer. Skills section is followed by the Project section, where we can find different works of a developer. After that, we have here a Contact Section with some contact details and input fields. And finally, you can find here a simple and nice Footer. The project is responsive to different screen sizes. If I inspect the page, switch to the responsive mode and check the project four different screen sizes. You will find that the project is Responsive and it looks nice on every different screen size. Again, all the projects are created for extra large screen size. I'm in discrete sites with 1920 pixels of width and 1080 pixels of height. So if you're using a relatively smaller screen size, then during the lectures, you should switch to the responsive mode and specify the width and height like so. Otherwise, the project won't look good on smaller screen size until we make it responsive. So please take it into account. Okay, So that's it about our second project. Now we can move on and start to build it 14. Project 2 - Create and Style the Header of the Website: Alright, so it's time to start to build our projects. I have a folder here, portfolio website. Let's go ahead and open it in VS Code. And then create our working files for HTML, CSS, and also for JavaScript. Then Let's go ahead and open index.html file and create a basic HTML document. I'm going to change the title. It's going to be portfolio website. Then I'm going to link CSS file. And also let's link the JavaScript file using script tag. Alright, let's open the Project Browser. And also I'm going to place the editor and the browser side-by-side, like so. Besides that, I'm going to use couple of different links. The first one is going to be Google fonts. Throughout this project, we will use font called wrote these. Let's select a couple of different styles. Then we will search for another Google font, which is called Cabot. Select different styles. Then copy the link and paste it in the head element. Alright, next we need Font Awesome CDN. Because we're going to use a couple of different font, awesome icons. Let's grab the link, then open link tag and the head element and paste the CDN. Alright, so everything is ready. Let's go ahead and start to create HTML markup comments for container. Then I'm going to insert here DIV tag with the class container. Then we need another comment for Navigation. Let's create HTML markup for the Navigation, we need here DIV tag with the class Menu icon, which will include two different lines. Development will have two classes, line and line one. Next we need Navigation. I'm in nav element with the class Navigation. It will include Section border. And then we will have here nav items. Let's insert your link element with home that's duplicated couple of times and change the navigation items. The second one is going to be about, then we will have projects. Next one will be Gallery. Then we will have Blog clients. Next one will be Pricing and then Contact. Alright, so that's suitability Navigation. Let's institute new comments for Landing. Let's open section tag with the class Landing. I'm going to institute DIV tag with the class Section, PG heading with the text web developer. Actually, it's going to be H1 heading, tag and not the team. Next we need a logo with span element with the text web. And then again span element with the text tab. Right? After that, I'm going to create Banner. Let's insert here Section border. And also we'll have here developer info. It will include h3 heading tag with the class greeting. Let's institution text, hello. Then we will have span element. My name is Let's insert your H1 heading elements with a class name and then insert you span tag with the text John Smith. Alright. After that, I'm going to insert your h3 heading tag with the class. Prof. I mean profession. Let's introduce some texts in. Then. Is it span tag, the content Web Developer. Alright, Next, let's insert paragraph with the class about. And I'm going to institute some dummy text. Right after that. I'm going to institute a couple of social media icons. But first let's open DIV tag with the class social media. And then I'm going to place you Font, Awesome icons. The first one is going to be a brand's FAA, Facebook F. Then the second one is going to be a brand's of a Instagram. As far as the third one, it's going to be if I brands have a Twitter. Alright, so here we have our HTML markup. Let's move on and start to work on the CV. I'm going to institute button with the type button and with a class. Btn, CV, BTN. And also institute text. Downvote CV. Next, we need here span tag with the text, my skills. Next, I'm going to institute a DIV tag with the class name developer image. Then let's insert your image rapper. I mean the development will the class deaf image wrapper. Let's insert image tag and then select the path of the image. When you developer dot PNG. Alright. The image will be followed by a deep element with the class name deep experience. And also it has another class Deep Work Institute span tag with number 15. And also we need another span. Years of experience. Let's duplicate this code. Change here. Class name we need projects, has changed a number, it's going to be 400 plus. Also change the text. We're going to institute completed projects. Alright, so let's can see we have here our HTML markup for the Navigation and for the Header. Let's start to write some CSS instead comments for default styles. Then I'm going to select every element using an asterisk, set margin, and padding both of them to zero. Also, I'm going to define box-sizing, border-box. Then we have to get rid of text-decoration. Also, let's set outline to none. And set font-family. To roll these sensory. Alright, after that, I'm going to set font size of the HTML element to 62.5 per cent because I'm going to use RAM as a measurement unit. One RAM will be equal to ten pixels. Next, I'm going to insert your comments for the container. Let's select container. Define with as 100% and also define height as 100 viewport height. Then change the background. I'm going to use your linear gradient with couple of different colors. The first one is going to be 23293 to the second one is going to be to see 3138 and also have here the third one. It's going to be 232932. So here we have the background color with a linear gradient Next, I'm going to institute comments for the Landing. Let's select developer image wrapper and set its width to 60 RAM. Because right now the image is to bigger. We need here height 60 RAM. Also. Let's go ahead and select the image itself and define a width and height as 100%. Now the image became smaller. Next, I'm going to select the section element. Let's define with Make it hundreds per cent. Also change the height and set it 200 viewport height. I'm going to change you the height of the container. Let's add it to 100%. Now, I'm going to select the Section background heading. Let's set its position to absolute. And also we need to change the position for the parent element. Let's set it to relative. Then set bottom to zero. And also we need left 50 per cent. And then for perfect centering, we need transform, translate X with -50%. After that, I'm going to increase the font size. It's going to be through to ran. So we have here background heading. Let's change the width is going to be 100%. Also. I'm going to align, taxing the center and then change the font family. In this case, I'm going to use font called cabinet cursor. Now the heading looks much better. Next we need to change its color. It's going to be 3136 3D. It's like a gray color. Also, we need opacity to be 0.5. Now, it looks really nice. Let's go ahead and select Banner. I'm going to set its position to absolute. Then we need tough position to be 50% left position feet per cent. And then we need to center it using transform translate -50 per cent. And again -50 per cent because we need to center the elements vertically and horizontally. Alright, after that, I'm going to select Logo. Let's set its position to absolute. Then we need tough position to be full RAM. And then let position five RAM. Then let's change the font size. It's going to be three RAM. So we have here logo, it's placed at the top left corner of the page. Next, I'm going to select span elements. The first span element. Let's change the color, make it white. So here we have the first span element. Let's duplicate this code and change the class name. We need to. We interchange the font size. It's going to be five RAM. And also I'm going to change the font family. I'm going to use caveat. Course it, the font weight is going to be bold. And also I'm going to change the color. I'm going to use green color, 298587. Alright, so we have here our logo, which I think looks pretty nice. Next, I'm going to display flex for the Banner. And then I'm going to select Section border. Let's set its width 2.3 RAM. The height is going to be 55 RAM. Then I'm going to change the background color. Let's use here BBB. Also create some space on the right side using margin-right ten RAM. So here we have Section border, the border for the Navigation. So right now I'm going to hide the Navigation for awhile. So let's Institute comments. Then select Navigation and assigned to display not. We will get back to the Navigation in a while. Let's go ahead and continue to customize the Header of the Website. So I'm going to select Section border with a pseudo-class before. Let's set content to empty. Then I'm going to set width to three RAM. The height is going to be three Rahm. Actually we are creating the circle here. So let's set border to point to ram solid on the color BBB. Also, we need background color to be 1d22 to eight. Then set position to absolute positioning relative for the parent element. So we have here before pseudo elements. Let's make it rounded using the border-radius is present. Then the position I'm in, the left position is going to be -1.65 ran as follows. It's a position, it's going to be minus three RAM. You will have the circle. Let's duplicate this code. We need another circle, in this case using after pseudo element. We have to change here a couple of things. We need. Bottom position. Minus three ramp. Actually, we don't need to change anything else. So then we need greeting. Let's change the font size. It's going to be 1.6 RAM. Then I'm going to transform text into uppercase. Change the color, make it white. Also, we need some space between the letters. Here we have Greeting text. Next, I'm going to select span elements, the greeting. Let's change the color, make it green. Next, I'm going to select name. Let's change the font size, make it ten RAM. We need with to be 60 RAM. Also, create some space around the element is in margin for RAM zero to RAM zero, then the color is going to be white. So here we have the name. Let's add to it some shadow with RGBA, black color with a lower opacity. So we have here little shadow effect. Next, I'm going to select span element, which is placed inside the name. The color is going to be green. So the first name is green now and it looks nice. Next, I'm going to select prof. Let's change the font size. It's going to be 1.8 R&amp. Also, I'm going to change the font weight. Let's set it to 300. Transform text into uppercase. Also change the color Here, white color. And then create some space between the letters that set a to point to RAM. Also create some space at the bottom using margin-bottom six rent. Right? Now, I'm going to select span element of the Prof. change the font family. It's going to be caveat, corrosive. And also I'm going to set font size to three R&amp. Next, I'm going to change the font weight, it's going to be bold. Then transform text into capitalize. Also, create some space using margin-left, one point to run. So here we have the second part of the Prof. next we need about, Let's set width to 60 RAM. Change the font-family, it's going to be caveat cursive. Also, you need font size to be 2.5 RAM. Then I'm going to change the line-height Let's set it to one and change the color. Make it a nine, a BAE. So here we have about paragraph. Let's set margin bottom to five RAM in order to create some space at the bottom. Now, we have to take care of the social media icons. Let's set margin bottom to five RAM. Then I'm going to Customize three icons. So it's like social media. Ireland. Increase the font size. It's going to be 2.5 RAM. Then change the color white. I'm going to create some space on the right side using margin-right to RAM. And then use some shadow effect. The values 0.5 gram or one RAM, and the RGB a black color with the opacity 0.3. Okay, so the icons look much better. Let's change the cursor type, make it point. Alright, That's it about the social media icons. Now, I have to take care of the button. Let's set its width to 20 RAM. Then height is going to be six RAM. Also, I'm going to set border to point to ram solid with a BBB color. For the radius is going to be three RAM. I want to make the pattern rounded. Then change the background color, make it transparent. So you will have the button. Let's take care of the text. Font size is going to be one point for RAM. Change, the transform, make it uppercase. Also we need to set color to white and also change the cursor, make it point. Alright. Next thing I'm going to do is to create some space on the right side, it's going to be seven RAM. And now we have to create a hover effect. We need to select BGN before. Let's add content to empty. With is going to be 100%. Height is going to be 100% as well. Then change background color, you see a green color. Also, I'm going to set border-radius to three RAM. It should be rounded like the bottom. Then set position to absolute. We need to hear position relative because the button is the parent element. So here we have the before pseudo element. Let's set top position to zero and that position to zero as well. So now, before we will uncovers the button, let's fix that problem using the index property value minus ten. Alright, so now it looks pretty nice. And we have to hide these elements using Transform Scale zero. Once we hover over the button, then before pseudo element should appear. So let's select BTN with over, followed by the before pseudo element. Let's set scale to one. And also we need to you transition to make smarter fact. Let's use transition here as well. Alright, now we have to create a line next to button. So let's select CVP ten with the after pseudo element. Let's set content to empty. Then we find width. It's going to be five RAM. We need height to be point to RAM. Then change the background color. It's going to be BBB. So set the position to absolute. Then top position is going to be 50 per cent. As for the right position, it's going to be minus five grand. So here we have line. Let's add here Transform, Translate Y -50 per cent in order to center the line perfectly. Alright. Now we need CV span. Let's change the font size. It's going to be one point for RAM. Font weight. I'm going to set it to 300. Also, transform text into uppercase and then change the color, make it white Alright, so that's it about the left side. Let's move on and take care of the right side. I'm going to add here background color. Let's use green color than we need to, border radius to be 50 per cent. Let's add here padding with some different values on different sites. Also we need here shadow effect. The values 01 RAM, one RAM, and RGBA, the black color and with the opacity point to have shadow effect. Let's hide the part of the image using overflow hidden. Alright, now we need some space between left and right sides. Let's select developer info and set margin right to 15 ran. So now we have here much better result. Let's select that Work. Set width to 25 RAM than height is going to be nine RAM. Also we need here background color to be one, T22 to a. Then change the font size. It's going to be one point for RAM. We need text to be uppercase. Change the color, make it white. So he will have that work. That's set border to point to ram, solid and BBB. Also we need border-radius six RAM. So now we have here much better result. Let's set display to flex. We need to send to the text using justify-content center and align items center. Also, let's use padding, zero to ramp. Then use box-shadow with the values 0.5 gram 1 gand, the RGBA black color with the opacity point for. Alright, Next, let's set position to absolute. And also we need here position relative for the parent element, which is developer image. Then we have to select separately that work. In this case, you step experience, set bottom position to ten RAM. Also, right position is going to be four to RAM. So one element is placed correctly. Let's select that Projects set bottom position to one RAM, and then right position is going to be minus two ramp. Alright, so everything looks good. Now, I'm going to select that work span. Nth-child one. The first span element. Let's set font size to three RAM, which is going to be 50 per cent. Also, let's align text and the center. So here we have, let's duplicate this code, change nth-child to, to get rid of text-align center. Also font size, and then set color to green. Alright, so that's it. Everything looks great. Let's move on to the next lecture. 15. Project 2 - Style and Make the Navigation Work: Alright, so once we're done with a Header, now it's time to move on and work on the Navigation, which right now is hidden because we assigned to it display none. Let's go ahead and Customize the Menu icon. I'm going to set with 23 RAM. Then height is going to be three RAM. And I'm going to sign to it some temporary background color, C, C, C. Then we need to define the position. It's going to be fixed. Top position is going to be five RAM. As for the right position, it's going to be five RAM as well. So as you can see, we have here Menu icon. Let's get rid of these temporary background color and then select line. Let's set with two or three RAM for the height is going to be pointing to RAM. And then let's set background color to BBB. So here we have lines. I'm going to set display to flex for the Menu icon. And then we need to change the direction. Let's make it column and also use justify content space evenly. Besides that, we need to align items center and also change the coarser, make it zero point. So as you can see, we have here nice Menu icon with two lines. Next, I'm going to get rid of display none from the Navigation and defined position, Make it fixed. Then we have to, if I interposition is going to be zero. And also we need here, right position to be zero as well. Then let's set with 250 RAM. For the height is going to be hundred viewport height. Then I'm going to change the background color. It's going to be gray color. Here we have the Navigation. Let's set the index property to 100 in order to display the Navigation. Alright, so now we need Z index for the Menu icon as well. So now the icon is displayed. Next, I'm going to set display to flex and we need to align the Navigation items using align items center. Also, I'm going to use padding left atrium. Then let's go ahead and select items. We need display flex and we have to change the direction. Let's make it column. So the items are placed vertically. Next, I'm going to select nav item itself. I mean the link element. Let's set font size to three RAM. Also change font-weight. It's going to be 300. Then let's transform text into uppercase. Create some space between the letters and change color. Make Color II. Also we need some space, is in margin, one RAM and zero. So as you can see, the navigation items look nice. Next I'm going to select link elements with hover. Let's change color, make it green, and also use transition for smooth effect. So now let's consider we have here nice smooth hover effect. Alright, so now it's time to make the Navigation Work. Let's hide it. Set to opposition to minus eight. Um, as for the right position, we need -63 RAM. Also, I'm going to use Transform Rotate. Z. Value is going to be -15 degrees. If I set position to absolute, then we will see the position of the Navigation. Let's get back here, fixed position. So once we click the icon, the Navigation should appear. We need JavaScript. Let's create some variables. Menu icon, Let's select it using querySelector method. We need to specify here the class name, Menu icon. Let's duplicate this code. We need here. Container also changed the name of the variable. It's going to be container. Next, I'm going to add event listener to the Menu icon with a click event. And also we have to pass a callback function. It's going to be an arrow function Once we click the Menu icon, we have to add a class to the container. So we need here class list property than toggle method. And we have to place your class name, which is going to be changed. Okay, so now we have to select Navigation with a class change and we have to apply to eat some styles, top position zero and right position zero. Also we need here Transform, Rotate Z. And we have here to pass default position zero. Once we click the Menu icon, then the Navigation will appear. In order to make this affects motor, we need to transition all points 6 s. So now everything works fine and we have here nice effect. Next, I'm going to set opacity for the nearby attempts to zero and also visibility hidden. We need to hide the Navigation items. Let's select Navigation. Then Section border. We need to hide border as well. So we need again opacity zero and visibility hidden. Alright, so now we have to display them, wants the Navigation is displayed. We need to again change class and then nav items. Let's set opacity to one and visibility to visible. Then use transition with some delay time. Because once we need to display it in Navigation and then the items, Let's do the same for the Section border. Use class change and set opacity to one and visibility to heat it, sorry, visible. And also use transition, which again some delay time. Okay, now, everything works fine. We have here cool effect. Once we've displayed the Menu icon. Alright, Finally, I'm going to take care of the lines. We have to set transform property to rotate Z 45 degrees. It's going to be for the line one. Also, we need to translate in order to move the line with the value 0.7 RAM and -0.1 ramp. Let's do the same for the line two. We need here -45 degrees. And also we need to transition. Now once we click to the Menu icon, it will be transformed to X closing button. So everything works perfectly. Alright, that's it about the Navigation. Let's move on to the next lecture. 16. Project 2 - Create and Customize Skills Section: Alright, so now it's time to create our next section, which is going to be a Skills Section. Let's go ahead and insert new comments for Skills Section. Then open section, tag with a class name. Skills. First of all, I'm going to insert you a couple of headings. The first one is going to be H1 Section background heading. It's going to be heading likely for Section. My skills. Then to instruct you and other H1 heading elements. Well, the class name section heading. Let's insert your professional skills. After that, I'm going to insert h3 heading element, which is going to be a subheading. And it will include span tag. With Skills. After that, we need Section border, the border which we have in the first section. And after that, I'm going to create cards. Overall will have six different cards. Let's open DIV tag with the class Skills card. So we will have here skill with span elements, HTML, and the percentage of the skew, 95%. Then I'm going to institute a paragraph with some dummy text. And also we need the progress, which will indicate the percentage of this cube. Alright, so that's it. I'm going to duplicate code five times because overall will have six cards. And then I'm going to change the technologies and also the percentage values. The second one is going to be CSS, 90%. Then we will have JavaScript at 5%. The next one is going to be React JS 75%. Then the next one is going to be NodeJS, 85%. And the last technology is going to be future as a percentage value 75. Alright, so the HTML markup for the Skills section is ready and now it's time to write some CSS. First of all, let's answer to your comments. Skills and of skills. Then select Section element and defined width and height. Width is going to be 100%. As for the height is going to be 100. Viewport height. And also defined position, Make it route. Alright, after that, I'm going to select Section border with the Skills, class name, set position to absolute. And then to find Luck, position is going to be 20 ramp. Then we will need to position it present. And in order to center the elements vertically, Let's use Transform Translate Y -50 per cent. So as you can see, the border is placed nicely. Next, I'm going to use flexbox for this section element. Change the direction, make it column. Align items in the center. So it's can see the elements are placed in the center horizontally. Next, I'm going to select section heading. Let's customize it. Change the font size, make it six RAM, then we need font-weight, it's going to be 300. Also, transform text into uppercase. Then create space between the lattice, set it to point to ram, change the color, make it white, and also create some space at the bottom. Three RAM. So the heading looks good. Now it's time to Customize the subheading. Let's change the font size. It's going to be to RAM Then we need color. Let's make it green. 29587. Also transform text into uppercase. So here we have these, the padding. Now, we need to select span tag, which is placed into the subheading. Let's change the font family. It's going to be caveat corrosive. So I'm going to change the font size. Let's set it to 3.5 RAM. Then transform taxing to capitalize instead of uppercase, and also change the color. It's going to be white. Alright, so this is, the padding, looks really nice. And now we have to move on and take care of the cards. Let's select a wrapper. Set width to 140 RAM. Then sit margin two, atrium at the top, zero. On the right side, zero at the Boltzmann can RAM on the left side. Then we need to flex and also flex wrap with the value wrap. After that, I'm going to select card itself. First of all, let's define width. It's going to be four to RAM. Then define height with the value 18 RAM. Set margin to three, run on all four sides. So we need some padding with the values 0.3 RAM and also change the background color. Ccc for awhile. So here we have all six cards placed nicely. Next, I'm going to select skill, set it to flex. Also, we need justify content space between in order to create some space. Also, I'm going to create some space at the bottom using margin bottom to ram. Next, I'm going to select span tags, set font size to, to run. Change the color, make it E, and then get rid of these temporary background color. So it's can see the technology and the percentage looks nice. Next I'm going to select span elements, which is the second one. Let's change the color, make it green. So now we have better results. After that, I'm going to take care of the paragraph. Let's change font-family. It's going to be caveat coercive. Next I'm going to change the font size. Let's set it to, to ram. Change color, make it BBB. Also change margin at the bottom, sorry, two for RAM. So the paragraph looks really nice. Now, we have to take care of the progress bar. Let's set with 2.5 RAM. The height is going to be 2.5 RAM than we need background color to be 122228. Then we need border point to ram solid. The color is going to be BBB. And also, I'm going to make elements rounded using border-radius 50 per cent and also set position to absolute. Actually, we need a relative position for the parent which is going to be in Skills Caught. Next, we need bottom position to be -1.25 RAM. So here we have the circles, and now we need to create the lines. So let's copy the class name and use. Before pseudo element, set content to empty. Then we need height to be point to RAM. Then change background color. Use green color. Position to absolute. Then we need tough position to be 50 per cent. In order to Central Design, Let's use Transform Translate Y -50 per cent Alright, after that, Let's select Skills card, nth-child one, followed by the Skills called progress, we need to wipe position to be ten per cent. For the first element. Let's duplicate this code and select before pseudo element the right position. It's going to be 2.5 RAM. And also the width, it's going to be 30th. We ramp. So here we have the line. Let's copy this code. And now use after pseudo elements. The color is going to be 777. Also, I'm going to duplicate this code here. Change before into after. Than, width is going to be full RAM. As for the right position, we need here -4.3 RAM. Alright, so now we have lines. Let's duplicate this code. Change the numbers we need here to. The right position is going to be 50 per cent than width is going to be 31.5 RAM. As for the right position, here, we need -6.1 RAM and the width is going to be 5.8. Alright, so the second card is ready. Let's duplicate this code. Change the numbers. We need here. Three. The right position is going to be 20 per cent. Then I'm going to change the width. It's going to be 29.8 RAM. Sorry, five RAM. Also, I'm going to change the right position here, eight point to RAM. And also the width is going to be 7.9 ramp. Okay, So the first three chords are ready. Now let's duplicate this code. Change the numbers. It's going to be for the right position, just going to be 30%. Then I'm going to change the width. It's going to be 25.5 RAM. And also we need here Y position to be 12 point to ramp. As for the width is going to be 12 round. Alright. Next, I'm going to copy the third card because we need some similar values. Let's change the number is going to be five. So let's can see the progress is ready. Then I'm going to copy the fourth card. Change the numbers, make it six. So now everything is ready. We have finished working on the Skills section. Let's move on to the next one. 17. Project 2 - Build Projects Section: Alright, so once we're done with the Skills section, now it sounds, move on and start to work on the next section, which is going to be a project section. So let's insert here you comments for the projects section. Then I'm going to open section tag with a class name, Projects. Let's go ahead and copy this code from here because we need here similar heading elements. Let's go ahead and change here my projects. Then we need here portfolio. And also change you this element. Then it projects. Right? Next, I'm going to open DIV tag for the class project cards. Then we need the card itself. It will include a Div element project image. Let's open image tag. Then select the image from the images folder we need here project one, PNG. Also I'm going to insert here and other DIV tag with the class texts. Instead use Pontiac, it's going to be HTML. Then we need another span tag, CSS. And the third one is going to be JavaScript. Next I'm going to use H3 heading tag with a class project name. In this case, we will have contact for the heading will be followed by the paragraph with a class name project description, task. Let's introduce some dummy text. And after that, we need a button. Type is going to be button. Also we need here a class name, project, BTN. Let's insert here. See project. Then we need a Font Awesome icon for the arrow. F sharp, F, a solid arrow. Right? Okay, so that's it about the card. Let's duplicate it five times because overall we will have six different project cards. Let's go ahead and change the details we need to project to PNG. Then change the heading. It's going to be calculator. The next project is going to be project three. Then we will have project four. Heading is going to be Website. Next we will have project five. Name is going to be Menu. For the last card, we will have project six. And the heading is going to be profile card. Right? That's it about the cards. The last element that we need here is going to be bottom with a type button. Also we need here a class name. It's going to be BTN. And let's insert your view more. Lastly, I'm going to insert your DV element, the class Section. Alright, so here we have our elements. Right now this section looks ugly. So let's go ahead and take care of that. I'm going to start to write some CSS we need here new comments for projects. Then I'm going to select project image. Let's set with 236 ramp. The height is going to be 20 RAM. Next we need to select image itself. Let's start with 200 per cent. Then the height is going to be 100%. Now, images Got smaller, and now we have much better result. Let's select Section elements. Define width. It's going to be 100%. Then the height is going to be 100% as well. Next, I'm going to set position to relative. Also we need here a flux books. Let's change the direction is going to be column. And also, we need to align items in the center using align items center. The cards are placed Center. Also we have here border and the Section background heading. Alright, Next, let's go ahead and select Section border. Let's set height to 140 RAM. Change. The position is going to be absolute. The top position is going to be 50%. Right position will be 15 ramp. And also we need to center the border using Transform Translate Y with the value -50 per cent. Also, I'm going to use margin zero. So let's can see we have here Section border which is placed on the right side of this section. Let's go ahead and select project card. Set its width to four to ram. The height is going to be 55 RAM than we need to change the background color. You see 1222 to eight. Then I'm going to select project cards. The rapid development set width to 140 ramp. So we need here flex books. Then use justify-content center in order to send to the elements. And also we need to wrap the flex items and create margin at the top side. Also, we need some space at the bottom using padding-bottom can run. Alright, so the cards are placed nicely in the center of the section. Next, we need to create some space between the cards. Use margin and set it to, to run. Also, we need padding to RAM. Then I'm going to use border-radius. Will the value one RAM use flexbox? We need here to change the direction. It's going to be column. And also I'm going to use justify content space between. Alright, so as you can see, the background heading covers the card. So let's fix that problem using the index property. Let's set it to 100. So now the problem is fixed. Next, I'm going to take care of the images we need object feet to be cover. And also, let's use border-radius with value one RAM. Change the cursor, make it point. Alright, so the cars look better. Let's go ahead and take care of the hover effect. Once we hover over the images, they should widen. So let's use Transform Scale 1.3 and then use transition for smooth effect. So it's can see we have here a hover effect, but we need to fix one problem. The images are overlapping. The carts, so we need to overflow with value hidden. Okay, so now we have much better effect. Let's use here border-radius with a value one RAM. So now the hover effect looks even better. After that, I'm going to take care of the texts. I mean, it technologies. Let's change the font size. It's going to be 1.6 RAM. Then we need font-weight to be 300. Also transform text into uppercase. Change the color, make it green. So here we have the technologies. Let's create some space. Make it 0.1 rent, right? Next, I'm going to select texts wrapper. Let's set margin top two minus three RAM. In order to place the span elements up. Next I'm going to select project name. Let's change the font size. It's going to be three. Ramp. Change the font weight, making 300, and change the color. We need here a white color. Next we need margin top to be minus two RAM. We need to move the name up. Next. I'm going to select project description. Let's change the font family. It's going to be caveat. Cursive. Also change the font size, make it to point to ramp. Change the color I'm going to use here, C, C, C. So the description looks nice. Next, I'm going to take care of the button. I mean project BTN set with 220 RAM than the height is going to be full RAM. Change the background color, it's going to be transparent. Next, we need font-size to be 1.8 RAM. Let's align text to the left side. Change the color, make it white. And also you need border to be none left for the course, so it's going to be zero pointer. Okay? Next, I'm going to select Font, Awesome icon. I mean the arrow. Let's change the color, make it green. And also we need margin on the left side. Let's add it to one row. Okay? So the button looks nice. Let's Create little hover effect. Select ions on hover and change the margin left side. Let's set it to, to RAM and also use transition for a smoother effect. Margin left with iteration 0.3 s. Okay, so now we have here nice little effect. Next, I'm going to select button, which is placed at the bottom. Let's set margin to five frame at the top and zeros on the rest of the sides. So now everything looks good. And with this section, we're done. Let's move on. 18. Project 2 - Create and Style Contact Section: Alright, so once we're done with the Skills section, now it's time to move on and start to create our next section, which is going to be a Contact Section. Let's go ahead and insert new comments for the Contact Section. Then I'm going to open Section, check with the class name. Contact. Next, I'm going to grab some headings from the previous section because we will have here a similar heading elements. So let's paste those elements here. Also, we need to change text values. We need to contact me. Then the next heading is going to be contacts. Then we'll have, let's have some torque which will replace the inside this span element. Right? After that, I'm going to open the chat, the class Section border. We will have the same border in this section as well. After Section border, I'm going to open DIV tag with the class Contact Content, in which I'm going to insert another development Contact left. On the left side we will have address. Let's put here Font Awesome icon, which will be a solid if a location dots. Next I'm going to insert here DIV tag with the class name Contact Info, in which we will have span elements, address, followed by another, span, New York, USA. Next I'm going to insert your and other deep elements with the class name freelance, in which I'm going to put Font Awesome icon with the classes fa, regular user. Then we need deep dark with the class Contact Info, in which I'm going to put two span elements like the previous case. We need here. Freelance. As for the second span element, it's going to be available right now. Alright, let's go ahead and copy this code twice and change the class name. It's going to be email. Next we need to change the class name for the Font Awesome icon is going to be envelope. Also change the span elements, e-mail and some dumb e-mail. John Smith at sign, web tab.com. Okay, Next, I'm going to put your phone. Also change the Font. Awesome icon is going to be a phased solid fa phone. Then change the span elements, will have your phone. And I'm going to put here some dummy phone number, numbers 1-9. Okay, after that, I'm going to open another development that's going to be the right side. Let's open form tag. Get rid of action attribute. In the form element, I'm going to insert DIV tag with the class input groups. Then we will have input group. Let's open label element. I'm going to put here your full name and the Font Awesome icon, which will be fa solid. A asterisk. Next, I'm going to insert here input tag with a type text. Alright, let's go ahead and duplicate input-group. Change the for attribute. It's going to be emailed. Also, we need here your email address. Change the type. Next, I'm going to copy this code. Change the for attribute, it's going to be subject. Also change your text, your Subject and we need you type a to B to be taxed. Alright, let's insert here again, input-group. Change the label, it's going to be messaged. Change your text is going to be your message. Instead of input tag, I'm going to use here text area. After that, I'm going to open button elements. The type is going to be button. Also we will have your class Contact BTN. And let's insert here send message. Alright, so let's sit about the HTML markup. All the elements are created and now we have to write some CSS. Let's go ahead and insert new comments for the Contact Section. First of all, I'm going to select Section elements. Let's set with 200 per cent. Then the height is going to be hundred viewport height, and the position is going to be relative. Next, I'm going to use Flexbox. Let's change the direction. It's going to be column. And also I'm going to align items in the center. So here's can see the items are placed in the center. Next I'm going to select Section border. Let's define this position is absolute. Set leg position to 20 RAM. That's probably tough position, it's going to be 30%. So as you can see, this Section, bottler is placed on the left side of this action. Next, I'm going to select Contact Content. I'm going to define width. It's going to be 120 RAM than the position is going to be absolute. Position is going to be 50%. Left position, 50 per cent as well. And then for perfect centering, I'm going to use transform translate -50% and again -50 per cent. Next, I'm going to set margin top to seven ramp. After that, I'm going to use flexbox. That's justify content space between. And then use align items. Center. Okay, So as you can see, both sides are placed nicely. I'm in left and right sides. Next I'm going to take you off the left side. Select deep element in the Contact left. Set display to flex. Then use align items, center. And we need margin. It's going to be three ramp and zero. Okay? After that, I'm going to select Font Awesome icons on the left side, let's set with 25 RAM. Then height is going to be five frame as well. Next, I'm going to change the background color. It's going to be one D22 than set border to point to ramp solid. The color is going to be BBB. So here we have the icons. Next, I'm going to make those boxes rounded using border-radius 50 per cent. And also I'm going to place the items in the center are using flexbox. We need justify-content center and align items center. So it's can see the icons are placed perfectly in the center. Next, I'm going to increase the font size. It's going to be to ramp. Then I'm going to change the color. It's going to be E. Also create some space on the right side, it's going to be nine RAM. So now it's can see the icons. Look nice. Let's go ahead and select icon, followed by the after pseudo element. The continent is going to be empty. Then we will have width. For RAM. Height is going to be point to ramp. We are creating melody lines. Next we will have background color, BBB, and the position is going to be absolute. Also, we need here position to be relative for the parent element. After that, let's define top position is going to be 50 per cent. And also we need to center the line using Transform, Translate Y with the value -50 per cent. Also lets define the right position is going to be minus 4M. Is can see we have here Lines on the right side of the icons. Next, let's go ahead and select Contact Info set with 220 RAM. Then we need to use flexbox. Change directions going to be column. We have here. The info text is aligned in the center. Next, I'm going to select span elements. Change the width. It's going to be hundred percent. After that, I'm going to select the first span elements using F child selector that's specified here. One, change the font family. It's going to be caveat course. Then we have to increase the font size. Let's set it to three RAM. Change the font weight. I'm going to set it to bold. The color is going to be white. And also I'm going to create some specialty bottom using margin bottom 0.5 RAM so that you can see span element name in the first element. Looks good. Let's go ahead and select the second one. Change here, the number, it's going to be two. In this case, the font size is going to be 1.6 RAM. Font weight is going to be 300. As for the color, I'm going to make it 777. So now both span elements look pretty nice. Let's go ahead and select the right side. I'm in the contract right? Set width to 60 RAM. Height is going to be 60 RAM as well. Then use again Flexbox, followed by justify-content center and align items center. Alright. After that, Let's go ahead and select input groups. Use again display flex. Next I'm going to select the input-group itself. Again, display flex. Change the direction, make it column. So step-by-step, the input elements. Getting nicer. Next, we need input-group label. Change the font size. It's going to be 1.6 RAM than we need font-weight 300. And also create some space between the letters. Use that just basing. Next, we need to transform text into uppercase and also change the color, make it white. After that, Let's set margin to 001.5 ramp and to ramp. So it's can see the label. Look good. Next we need input, group, label I element. I'm in the Font Awesome icon, the asterisk. Let's set font size to one point to ramp and change the color. Use green color. Right? After that, I'm going to select input-group input, followed by the text area. We need some similar CSS tiles, let's say hi to six RAM. Also we need margin to be 03, ramp, five REM, and zero. Dan, I'm going to change the background color. It's going to be one due to a set border to point to rams solid and 777. So now the inputs look nice. Next, we need border-radius in order to make the corners rounded, set it to three ramp change font size is going to be 1.6 R&amp than the font weight will be 300 and change the color, make it white. Next, we need some space inside the inputs. Set padding to one ramp or one ramp, then again one RAM and to read mandu left side. After that, I'm going to select input itself set width to 35 RAM. And then I'm going to select text area. I'm going to change its height. Let's make it 12 ramp also we need here margin bottom to RAM. And I'm going to disabled resizing function. Let's set the resize to none. Okay, so finally, I'm going to Customize the button at the bottom. So let's select it. Set width to calc 100% minus three RAM than the height is going to be five ramp. Let's change back on color, use green color. Also, we need border points to rams solid and the color is going to be Bb B. Next, we need to make the corners rounded using border-radius. The value is going to be three RAM. Change the color, make it white. And also we need here to transform text to uppercase. Next, let's change the font size. It's going to be 1.6 RAM. And also we need here font-weight to be 300. Create some space using letter spacing point to ramp, and we need to change the cursor. Let's make it point. Alright, so let's say the Contact Section looks pretty nice. Let's move on to the next section. 19. Project 2 - Create and Customize the Footer of the Website: Alright, so after Contact Section, now have to move on and start to create the last part of the Website, which is going to be a Footer. Footer is going to be a simple one. Let's go ahead and insert view the comments. Then I'm going to open a Footer, tuck the class Footer. Let's insert you. Keep track with the class icons. I'm going to grab those social media icons from here. Let's go ahead and paste them inside the icons. I'm going to open TikTok will class copyright. Let's insecure paragraph with a copyright texts. We need here a copyright sign, which is HTML5 entity. Then it will be followed by the text web. And then we need span tag with the value deaf. Also, I'm going to pass you all rights reserved. 2023. Next, let's open data with the class order N place here, Paragraph made by span elements and code and Create. Okay, So that's it about the HTML markup for the Footer. Let's go ahead and start to write some CSS. Insert here, Footer and a Footer. I'm in the comments. Then I'm going to select Footer. Let's set with 200 per cent. The height is going to be ten ramp. So I'm going to set boulder at the top with values 0.1 ran solid and the color is going to be 444. Also, I'm going to use display flex With justify content space evenly. And also I'm going to use align items center in order to center the flex items. Okay, after that, Let's go ahead and select icons, followed by the island. We need here font size to be, to ramp down the color is going to be white. So I'm going to use margin, right? To run. And then you some shadow effect using text shadow, 0.5 gram 1 gand. If the color I'm going to use RGBA, black color with lower opacity. And also change course will make it point. Okay, So that's it about the social media icons. Next, I'm going to take care of the copyright text. And also I'm going to select author. Set font size to 1.6 RAM. Change color, white. So you can see the text became white and bigger. Let's use copyright, span. Set font family to caveat cursive. So I'm going to set font size to 2.5. Rhyme. Change font-weight, it's going to be bold, and also change the color. I'm going to use green color. Next, set margin right to one ramp. Alright, so we have here a logo. Let's go ahead and select author span. Actually, I'm going to copy this code from here. So let's it, the Footer looks really nice and actually all the sections are finished. So as you can see, we have here a little problem. The Navigation is displaying behind the cart. So let's fix that problem using the index 150. Okay, so that's it. Everything looks perfectly. The only thing that I've had to do is to make the project responsive to different screen sizes. So let's move on. 20. Project 2 - Make the Project Responsive: Alright, so we have finished creating and customizing our sections of the project, and now we have to make it responsive to different screen sizes. Let's go ahead and inspect the page and switch to the responsive mode. We need to find our first break point on which we have to make some changes. So I think that the first breakpoint, It's going to be 1,700 pixels. Let's go ahead and insert new comments for the responsive mode. And then use CSS media query. I'm going to specify here max-width as 1,700 pixels. So the first thing they have to do is to change the font size of the HTML element. Let's make it 57%. So the elements became relatively smaller. Next, I'm going to select Navigation and change the right position. It's going to be minus seven to RAM. Also, I'm going to select Section border for the Skills section. Let's change length position, make it ten RAM. Then I'm going to select Contact Section border. Let's change left position, make it ten ran. So let's check the project. Actually, we need to adhere S because the code didn't work. Okay, so next, we need to find another breakpoint. And I think it should be 1,500 pixels. So let's go ahead and create new CSS media query and specify here the max-width, which is going to be 1,500 pixels. Again, I'm going to change the font size of the HTML element. Let's set it to 52%. Next, I'm going to Customize the name. Let's change the font size, make it seven RAM. Also change the width, is going to be for to run. Okay, next, I'm going to select About and change the width. Let's make it 45 RAM. After that, I'm going to select developer image wrapper. Let's set width to 40 RAM. Also define the height, make it 40 RAM as well. Next, we have to take care of the dapp work. Let's change width. It's going to be 20 rent for the height, I'm going to make it seven RAM. Then the padding is going to be 0.1 RAM on the left and right sides. Next, we need to change the positions for their work. Select span element. Nth-child one. Change the font size, make it to ramp. And the width is going to be 35. Present. Okay, so now I'm going to select tab experience and change. The bottom position is going to be 22 ran for the right position, I'm going to set it to 25 ran. Next, I'm going to take care of the deaf. Projects. Change. The bottom position is going to be 14 rent. For the right position, I'm going to make it minus four ramp. Alright. Next, I'm going to take care of the background heading. Let's select Section BG heading, change the font size. It's going to be 23 R&amp. Next, let's take care of the Skills section. I'm going to select skills and change the height is going to be hundred percent. Also, let's set padding to ten RAM and zero, then 20 RAM and zero Then I'm going to select cards, wrapper, change the width, make it 100 ran. Alright, now the cards look pretty nice. Next, let's select Section, border for the Skills section. And I'm going to change the height. It's going to be at five RAM. Now I think the border looks pretty nice. Next, let's move on and take care of the Project section. Let's select project cards. I mean the wrapper set width to 100 Ren. So now everything looks nice. We need to take care of the Contact Section. Let's select Contact Content and set width to 110 RAM. Ok, so everything looks nice. And let's move on to the next break point. So the next breakpoint is going to be, I think, 1,200 pixels. So let's go ahead and create new CSS media query. Set max width to 100, sorry, 1,200 pixels. Change the font size of the HTML element. I'm going to set it to 45%. Next, I'm going to take care of the Projects action. So let's select Projects followed by the Section border. Change. The right position is going to be ten RAM. Now it looks good. Next we have to take care of the Contact Section. Select Contact contents, set width to 100 ramp. Also we need to change, justify content. Make it spaced evenly. Then we have to select Contact, right? Let's use margin-right, make it -15 RAM. Also, we have to customize input groups. Let's change the direction, Make column. Then. We need to select input groups, followed by the inputs. Change the width. Let's make it 60 Ran. Okay, so now Contact Section looks good. And actually we can go ahead and find next breakpoint, which is going to be 900 pixels. So let's go ahead and create new CSS media query. Setup max-width to 900 pixels. We need to change the font size of the HTML element. It's going to be 39 per cent. Then I'm going to select Section border and hide it at all for all these sections. Next, I'm going to select Section, background heading. Change the font size. It's going to be 20 R&amp. Next I'm going to take care of the Contact Section. So let's go ahead and select Contact Content and change the width is going to be hundred ramp. Also, I'm going to select Contact, right? Let's set margin right, two minus five RAM. So the Contact Section looks good. And actually, we can go ahead and find next breakpoint, which is going to be 700 pixels. So let's Create new Caesars media query. Change max-width, it's going to be 700 pixels. Select HTML and change the font size. Now it's going to be 35%. Next, I'm going to select Section background heading And change the font size. Let's set it to 17 RAM. Then I'm going to select developer image and hide it. After that, Let's go ahead and select Skills cards. I mean the wrapper set with 260 RAM. Then I'm going to duplicate this code, changed skills into Projects. And after that, we have to take here the Contact Section. So let's go ahead and select Contact left and hide it. And also I'm going to select Contact Content and set its width to 70 Ran. Okay, So on the breakpoint, I think we're done. Now it's time to find the last breakpoint. Let's go ahead and create new CSS media query. Then I'm going to specify the max-width as 500 pixels. Let's take here of the Navigation. I want to extend it on the page. So let's set with 200 per cent and also change the right position. It's going to be -100 grand than we need justify-content center to put the items in the center. Okay, After that, I'm going to select Banner, set its width to 70%. Then we need to select section heading and use text-align center in order to align the headings in the center of the sections. Next thing that have to do is to take care of the Contact Section. So let's go ahead and select Contact Content set with 255 ramp. Also we need to select input element. Set width to 50. Run. Okay, So I think everything looks pretty nice. We can add here one more thing. You know, it's looks cute cards and set width to 55 RAM as well. After that, I'm going to select icons of the Footer and make them height. Okay, So I think finally we are done and everything looks pretty nice. The project is Responsive. So I think you enjoyed this project. Now we can move on and start to create the next one. 21. Project 3 - Preview: Hi and welcome to your next project, which is going to be a Website about architecture. The project consists of a couple of different sections. So let's go ahead and go through each of them. We will start to create the project by working on the not poor and the Navigation. We have here, the logo, search bar and a Hamburger Menu icon. If I click it, then the Navigation and will display nicely. If I hover over the Navigation items, then we will get here this nice and cool effect. After the Navigation will create these nice and simple Banner in which we have a couple of different elements. The Banner is followed by an About section which consists of two parts. The left side, we have some text elements and the button is called the right side. It consists of a frame and image. And besides that, we have here nice and cool part at the bottom of the Section. Actually, those elements will appear in every section. Next we have the Project section, which includes five cards with some nice over effects. After that constitute Customers Section, which consists of two different cards than we had a Contact Section and simple Footer down below. The project is responsive to different screen sizes. If I inspect the page, then switch to the responsive mode and check the project four different screen sizes. You will find that the project is Responsive and looks nice on average, different screen size. Again, are the projects are created for extra large screen size. I'm in. This coincides with 1920 pixels of width and 1080 pixels of height. So if you are using a relatively smaller screen size, then during the lectures, you should switch to the responsive mode and specify the width and height like so. Otherwise, the project won't look good on small screen size until we make it responsive. So please take it into account. Alright, so that's it about our third project. Let's go ahead and start to work on it 22. Project 3 - Create and Style the Navigation - Part 1: Alright, so let's go ahead and start to create new project. I have a folder here. Let's go ahead and open it in VS Code. And then we need to create or working files for HTML, CSS and JavaScript. We need index.html, then style.css. And the next one is going to be script.js. Then open index.html file and create basic HTML document. First of all, I'm going to change the title, it's going to be architecture. Then we need to link or files. The first one is going to be CSS file. And then I'm going to open script tag and specify in the source attribute the path of the JavaScript file. Let's open project to the browser and then place the editor and the browser side-by-side. Like so. Alright, I'm going to grab a couple of different links. The first one is going to be Font Awesome CDN, because we're going to use some Font Awesome icons throughout the project. Let's copy the link. Then I'm going to open link tag in the head element and paste here the CDN. Next I'm going to visit Google Fonts website because we're going to use some Google fonts. Let's go ahead and search for font called Able. I'm going to select this tile. The next one is going to be our first lab one. Let's select the Style. Then I'm going to copy the link and paste it in the head on. Alright, so we're ready to start to write the code. First of all, I'm going to create HTML markup. Let's insert your comments for container. Then I'm going to open DIV tag with the class name container, in which I'm going to insert comments for the navbar. Then open HTML5 nav element with the class name navbar, in which I'm going to insert a DIV tag with classes brand, brand. Now four. Then I'm going to open and other DIV tag with the class logo. One. Let's change here the class names. We need a logo and logo three. Next we need here span elements in which I'm going to insert text architecture. Okay, so that's it about the logo. Next, we need to create a search bar. Let's insert here input elements with a type text and with a placeholder attribute. What are you looking for? And also we need here a Font Awesome icon, which will be search icon. We need classes, fa solid, fa, magnifying glass. Okay, So that's it about the first part of the Navigation. Now we need to create a Hamburger Menu. Let's insert here Menu icon, which we will have three lines, line one, line two, and layer three. Next we need DIV tag, which will be a Navigation. I'm going to insert here a couple of different links. The first one is going to be home. Then we will have about the next one is going to be projects. Then we will have Blog. Next one will be Customers And for the last item, I'm going to put here Contact. Okay, So actually let's sit about the HTML markup. Now, I'm going to start to write some CSS. First of all, let's Institute comments for the default styles. Next, I'm going to select every element using an asterisk. And I'm going to set margin and padding both of them to zero. Then we have to set box-sizing border-box. Also, I'm going to change the font family. Let's use here able. Sans-serif. Also. I'm going to get rid of text-decoration. It will be none. And also I'm going to set outline to none as well. So the default styles are applied to the elements. Next, I'm going to change the font size of the HTML element. It's going to be 62.5 per cent because we're going to use RAM as the measurement unit. Okay, let's go ahead and start to customize the container. Insert here the comments, then select container. First of all, I'm going to set width. It's going to be 100%. As for the height, I'm going to make it 100 viewport height. Next, let's change the background color. It's going to be 202020. It's like dark gray color. Then I'm going to place your comments for the navbar. Let's go ahead and set width to 100%. As for the height it's going to be. Can RAM. Also, I'm going to change the background color. Let's use here the same color which we use for the container. Then I'm going to define the position is going to be fixed. Top position will be zero. Lag position will be zero as well. And after that, I'm going to select Logo one. Let's set with 26 RAM than the height is going to be six RAM as well. Let's set border 2.4 RAM, solid. And the color is going to be the be H1B, It's like, and yellow color. Let's duplicate this code and change the class name. We need your logo two, let's change width and height. I'm going to set them to five RAM. Gets rid of border and change the background color. Use here, dark gray color. Alright, so right now logo two is not visible because we have here the same color. Let's set position to absolute. Actually, I'm going to select brands and set position to absolute as well. Then we need to position to be 50%. Luck position is going to be a tram. And also we need to center the elements using Transform Translate Y -50 per cent. Okay. Let's go back to the logo to set the position to one RAM than the left position is going to be one RAM as well. So now the element is visible. Next I'm going to select Logo three. The third part of the logo. Let's set width to five RAM than the height will be five for M as well. Change the border. It's going to be zero point for RAM, solid with a yellow color. Next I'm going to change the background color. It's going to be dark gray. And now we have to take care of the position. It's going to be absolute. The top position will be to ram. That position will be to ram as well. So now the logo looks better. Let's set here display flex. Then I'm going to select span element and the brand. Let's change the font size. It's going to be three ram. Next I'm going to change the color. Let's set it to white. Also, we need some space between the letters. Let's set it to 0.3 ramp. So we have here this pan element. Next, I'm going to create some space, let's say margin to 1.5 ramped and 00.3 RAM on the left side. After that, I'm going to select search bar. Let's set position to absolute. Then we need to position to be 50%. Right position is going to be 15 RAM. And also we need to center the element vertically using Transform Translate Y -50 per cent. Okay, So the search bar is aligned on the right side of the navbar. Let's select input elements. Refined width as 45 RAM than the height is going to be full RAM. Also, I'm going to change the background color. I'm going to use here 3341. It's a gray color, but the lighter one. Then we need border none. And I'm going to use padding to create some space. Let's set it to, to RAM to run than two REM again and forum on the left side. Also change the font size. It's going to be 1.6 RAM. Then I'm going to change the color of the text. Let's set it to white. Change border-radius, make it 0.5 RAM. So now the input element looks much nicer. Next I'm going to select the placeholder attribute. Let's set color to C. C, C. Now, I have to take care of the Font Awesome icon. I'm in the search icon. Let's set position to absolute. Then we need to position to be 50%. Luck position is going to be 1.5 RAM. Also, we need to center the elements vertically using Transform Translate Y -50 per cent, change the font size. It's going to be 1.6 RAM. And also I'm going to set color to C. C, C. Alright, so that's it about the search bar. Next, we have to move on and start to create a Hamburger Menu 23. Project 3 - Create and Style the Navigation - Part 2: Alright, so let's go ahead and start to work on the Hamburger menu. I'm going to select the Menu icon. First of all, I'm going to display the Menu icon. So let's set width to four RAM. We need height to be 2.5 RAM than the background color. It's going to be CCC. Actually, we need this background color for some temporary reasons. Next, I'm going to the position to absolute. So position is going to be 50%. Then we need here, right position, which will be eight RAM. And also we need to center the icon using Transform Translate Y -50 per cent. Next I'm going to change the cursor pointer. So we have here the Menu icon. Actually let's get rid of this temporary background color and then select line. The width is going to be full rank. Then we need height, which will be point to ram. Next, I'm going to change the background color is going to be CCC. So right now the lines are not visible. Let's check the HTML file. Actually we need you to add separate class line. So now the lines should be visible. Still. We have here some problem. Yeah, we need here DIV tag and not the line tog. Sorry for the mistake. Now, you can see here the lines. Let's go ahead and align them separately. For that, I'm going to use flexbox. We need display flex. Then we have to change the direction. It's going to be column. And we need to create some space between the lines using justify content space between. So now we have here the Menu icon with three different lines. Okay? After that, I'm going to take care of the Navigation itself. Let's set the width. It's going to be hundred percent. Then we have to define the height, which is going to be 100, viewport height. Next I'm going to change the background color. In this case, I'm going to use 0 B, 0 B, one for it's like dark blue color. Next I'm going to sit position is going to be absolute. The top and let positions, both of them should be zero. Next, I'm going to take care of the navigation items. They should be placed in the center. So from that, Let's use flexbox in order to center the items. At first we need to flex direction column, and then justify content center and also align items center. So here we have the items aligned in the center vertically. Next, let's select navigation items. I mean the link element set the font family two alphas lab, one, coarser than increase the font size. It's going to be five RAM. Well, so I'm going to change the color. Let's set it to white. Next, I'm going to create some space between the letters. Let's set it to 0.3 RAM. Also we need here margin at the bottom. Let's set it to 1 g. So as you can see, the navigation items look pretty nice. Next, I'm going to select before pseudo element. Let's set content to empty. Then I'm going to define a width. It's going to be 15 RAM than the height is going to be 0.5 RAM. Change the background color. I'm going to use yellow color here to set the position to absolute position is going to be 50 per cent. Now left position should be -17 ramp. And also we need to transform, translate Y -50 per cent in order to center the elements vertically Right now, the before pseudo element is not feasible because we need to set position to relative for the parent elements, in this case the link element. So it's can see we have here now the lines on the left side of the items. We need the same thing on the right side. For that I'm going to use after pseudo elements. We just need to change the position. We need here, right position. So now we have lines on both sides. Those lines will be used for the hover effect. So first of all, we need to hide them using Transform Scale. It should be zero, so the lines are hidden. Next I'm going to select Navigation link followed by hover. And also we need here before pseudo element. So on hover, we need to increase the scale and set it to its default value, which is one. Let's use transition for smooth effect. So as you can see, once you hover over the item and the line will appear, we need to display the line from the right side. So for that we have to change the origin of the transformation. By default, it's set to center. And now we need, right. Now the line appears from the right side. We need the same thing for the after pseudo element as well. So let's copy this code change here before and after. And also we need here transform origin and transition. To transform origin is going to be left in this case. As well, the transmission we need the same. So if we hover over the Navigation items, then we will have this nice and cool effect. Alright, so the next thing that have to do is to display the Menu icon because it's hidden right now. So let's use the index property. Now we see here the Menu icon. And now it's time to write some JavaScript to make the Navigation Work, I'm going to create variable, let's call it Menu icon selected using query select method. We need to specify here the class name, which is going to be Menu icon. Let's duplicate this code. We need the second variable, which is going to be navbar selected. Here class name navbar. Next, I'm going to add event listener to the Menu icon with a click event. And also we need to put here an arrow function, which is going to be a callback function. So I'm going to add to Napa a class name with toggle method. This class name will be, let's say change. After that, we have to hide the Navigation. Let's set to position two -100 viewport height. And then we need to select Navigation with a change class name. We have to set position back to zero. Let's use transition effect. We need here top. And the duration is going to be 0.3 s. So if we click the Menu icon, then nothing will happen. So let's inspect the page. We don't have here any errors. Let's check the HTML5. We have to add here dot JS because the name of the file wasn't indicated correctly. So now the Navigation works fine. And I'm have here nice effect. Next, I'm going to hide the Navigation items using opacity zero and the visibility hidden. Next, I'm going to select class change with Navigation link that's sent opacity to zero and the visibility to visible. Also. I'm going to select first Navigation item with a class change. Let's say transition to all 0.3 s. And then we need a delayed time 0.3 s. We need to display the Navigation item separately with a different delay time, which will create a really nice effect. So let's change the delay time. We need 0.4 s, then 0.5 s for the third item. Then the next one is going to be 0.6 s. Then for the fifth item we need 0.7 s. And for the last item, it's going to be 0.8 s. So let's check the results. And as you can see, we have here a really nice and cool effect. Alright, so now we need to take care of the Menu icon. I'm in the lines. Let's select Change with line one. Let's set with two 55%. And also we need here Transform, Rotate Z direction -15 degrees. And also we have to move the line one using translate minus zero points to RAM and 0.8 ramp. Let's duplicate this code. Use your line three. In this case, we need to get rid of mine sign from the rotate function. And also we need here -0.8 RAM. Also, let's use transition for smooth effects. Let's check the result. So as you can see, we have here nice and cool effect. The Menu icon transforms into an arrow. Alright, so that's it about the Navigation. Let's move on and start to create next part of the Website 24. Project 3 - Create and Style the Header of the Website: Alright, so once we're done with the Navigation now it's time to move on and start to create next section of our project. Let's go ahead and insert comments. For Landing. We're going to create a Header of the Website that's open section tag with the class Landing. I'm going to insert U DIV tag with the class Landing image, in which lets place image element. I'm going to select image from the images folder is going to be Landing BG. Alright, next we need Banner in which I'm going to insert H1 heading elements with the class name Banner heading. The text is going to be inside the span element. Dream house. Next, I'm going to insert here DIV tag with a class name, Banner content in which we will have paragraph with some dummy text. And besides that, I'm going to institute Bateson. Read more. Okay, So that's it about the HTML markup. Let's go ahead and start to customize this section. I'm going to insert you comments, Landing and of Landing. Then let's go ahead and select Landing image and set width to 92%. Next we need height. It's going to be 70, viewport height. Then we need to select the image itself. Let's define a width as 100%. As per the height is going to be 100% as well. And also we need you object fit to be carbon. Alright, so we have here the image. Next. I'm going to select the section element and define its width. It's going to be 100%. Let's follow the height. I'm going to set it to 90 viewport height. Next, I'm going to set the position for the image wrapper to absolute. And also we need here position relative for the section element, which is a parent element. Next, let's define top position is going to be 11 ran. As for the left position, we need here 50 per cent. And also we need to center the image using Transform, Translate X -50%. Alright? Next, we need to decrease the opacity for the image. After that, Let's go ahead and select Banner. I'm going to set its position to absolute. Then we need here bottom position to be 15 RAM. As for the lab position is going to be 20 ramp. So it's can see the Banner is positioned down below. Next, I'm going to select heading elements. Let's set font size to nine. Ram. Color is going to be white. Next, I'm going to select the span elements inside the heading. Let's change the font family. In this case, I'm going to use phone called Alpha flap one cursive. And also I'm going to change. The font size is going to be eight RAM than the color will be yellow. So I'm going to create some space between the letters. So now the heading looks pretty nice. Next, let's go ahead and select Banner content. We need here Flexbox. And also we need to align items in the center. Next I'm going to select Banner content followed by the paragraph. Let's set width to 45 RAM. And the font size is going to be to RAM. Also, I'm going to change the color that is here. White-collar. Create some space on the right side using margin-right to ramp. So the paragraph looks nice. Now we have to take care of the button. Let's define width is going to be 15 R&amp. Next, we need here height, which would be five grand. I'm going to change the background color. Let's set it to transparent. Also, we need to border to be 0.3 ramp solid, and the color is going to be light. Next, let's take care of the color. It's going to be white. So I'm going to increase the font size. Let's set it to 1.6 RAM than the font weight will be bold. And also in want to change the cursor. Let's make it point. Alright, so let's see double the Header of the Website. It looks nice. So we can move on instead to work on the next section. 25. Project 3 - Build About Section: Alright, so we're done with the Header of the Website and now it's time to move on and start to work on the next section of the project. So the next section is going to be About Section. Let's insert your comments for the About section. And then as usual, let's open section tag with the class about. I'm going to place U DIV tag About left, in which we need H1 heading element. With a text. We are creative building Design Company. The heading element will be followed by the paragraph with some dummy text. Next, after paragraph, we need here button. With the text, read more. After that, I'm going to create the right side in which we are going to have frame. And also we're going to have your image wrapper in which I'm going to insert your image itself. Let's select image from the images folder. It's going to be About dot JPG. Next, we need to U DIV tag with a class name experience. And also we need another class Section bottom. Insert your H1 heading element, 20 years. And then we need h3 heading element with the text experience working. Okay, so that's it. All the elements are created and now we have to customize this section. Actually, I'm going to change the height of the container is going to be 100% and not the 100 viewport height. Now let's insert you comments probably About Section. Then. First of all, I'm going to take care of the image. It's too big right now. So let's set with 250 RAM and the height is going to be certified RAM for the wrapper of the image. Next I'm going to select the image itself. Let's define within height, the width is going to be 100%. For the height, it's going to be 100% as well. And also we need to fit the image using object feed cover. Okay, So now we have much better result. Now I'm going to take care of the section element. Let's set with 200 per cent. The height is going to be 75 viewport height. Then I'm going to change the background color. It's going to be 313133. It's a gray color, lighter one. Then I'm going to use Flexbox. Let's align items in the center. And also I'm going to use you justify content with values pays around. So the left and right sides are aligned nicely. Next, I'm going to select About left H1 heading element. Let's set font size to five REM than the color is going to be white. Also, I'm going to change the width, it's going to be 50 ran. Then we need some space at the bottom. It's going to be six RAM. Actually. We don't need this year. Next, I'm going to select paragraph. Let's set font size two to RAM. Also change the color. The color is going to be white. We need width to be 50 RAM. And also we need margin-bottom to be five-prime. Okay, next, let's go ahead and take care of the Bateson. I'm going to set with 218 RAM than we need height to be five RAM. Also, I'm going to set the background color to transparent than we need border point to ram solid. And the color is going to be Tba eight 1-p. I mean, the yellow color. Next, I'm going to set color to again, yellow. So we need on-site to be 1.8 RAM. We need some space between the letters. Let's set it to 0.1 run. And also we need Caruso to be point. Okay, So the button looks pretty nice. And actually with the left side, we're done. Let's move on and take care of the frame which is placed in the right side. Let's set with 250 RAM. Then we need height to be 35 frame. So I'm going to use border, which will be three REM solid with the color 555. Let's set position to absolute. Next we need to position to be 15 RAM. As for the right position, I'm going to set it to 40 RAM. Actually, we need position relative for the parent element. That's why we don't see here the frame. So now here it is. I'm going to set position for the image wrapper to absolute than two position is going to be a dram. The right position will be 33 RAM. So now we have really nice results. Next, I'm going to take care of the Section bottom. Let's set position to absolute. We need here bottom position to be, to RAM. Then the right position is going to be 33 ramp. And also we need you to define height's going to be 12. Rahm. Next we need border on the right side. Let's set it to one RAM solid and the color is going to be yellow. So here we have the border on the right side. Let's set text aligned to write. And also we need some space on the right side using padding right? To run. Alright, now we have two Style the headings. Let's start with the H1 heading elements. I'm going to set font family to Alpha slab one. Cursive font size is going to be 61. Next I'm going to change the color. Let's use your 555 also, we need space between letters. Let's say 2.5 ran. The first heading. Looks really nice. Next, I'm going to select the second heading, which is H three. I'm going to set font size to 2.5 prime. Then the color is going to be white. So now Section bottom looks really nice. We have here one tiny problem. We have to display the Navigation. For that. We have to use the index property with value 100. Okay, So that's it. Everything looks nice. We can move on and start to work on the next section. 26. Project 3 - Create and Customize Projects Section: Alright, so now it's time to move on and start to create our next section of this project. The next section is about projects. So I'm going to insert new comments for the new Section projects and of projects. And then I'm going to open section tag with a class name projects. Inside this section, I'm going to put H1 heading element with the class name Projects heading. Let's Institute latest projects. Next, I'm going to open DIV tag with the class cards in which I'm going to place called. The card will include an image. Let's select image from the images folder. Also, I'm going to open another DIV tag with the class name called content, in which we will have H1 heading elements with a text. Your dream house is here. Next. We will have here a paragraph with a dummy text. So that's it about the card. I'm going to duplicate this element a couple of times and change the images. Overall, we will have five different cards. Alright, so after that, I'm going to open DIV tag with the class designs. And then Section bottom. We have already used this. In the last Section. Let's open H1 heading tag with the texts. Awesome. Then we need h3 heading tag with a text designs. So here we have HTML markup. Let's go ahead and start to write some CSS. I'm going to insert new comments for the projects section. Then I'm going to take care of the card. Let's set width to 32 RAM. Then I'm going to set the height as 50 RAM. Next, I'm going to select the image and define its width. It's going to be 100%. Let's put the height will be 100% as well. And also we need to fit the image using objects cover. So now we have here relatively smaller images. And also we have here Section bottom, awesome designs. So I'm going to put it down below. Let's select Section element and set its width 200%. The height is going to be hundred viewport height. Also, I'm going to set position to relative. So now the Section bottom element is placed down below. Next I'm going to select projects having, let's define its font size as a tram. Then I'm going to change the color. It's going to be white. I'm going to create space between the letters. Let's set it to point to ramp. Next, I'm going to create some space using margin with values sudden RAM, 010 RAM and nine RAM. So here we have the heading. After that, Let's select cards. I mean the wrapper set width to 90%. Then we need margin auto in order to place the element in the center. Then we need Flexbox. So it's can see the cards are placed nicely horizontally. Let's create some space on the right side of each card using Margie, right? 2.5 RAM. And also we need cursor to be pointer. So we have here much nicer and better result. Next I'm going to select cart contents. Let's set with 200%. Also the height is going to be hundred percent as well. Then we need positioned to be absolute. Also, we need position relative for the parent element, which in this case is called. Next I'm going to set top position to zero. Left position will be zero as well. Here we have the card contents. Let's change background color. I'm going to use your RGBA color. I'm in the black color with a lower opacity, 0.9. Next, I'm going to select H1 heading element in the cart contents. Let's set font size to RAM than the color is going to be white. So I'm going to set position to absolute. They took position is going to be full RAM. As far as the lead position, I'm going to set it to 4M as well. Change with it's going to be 15 ran. So here we have the H1 heading element. Next, we need to select paragraph of the cod content. Let's define font size is going to be 1.6 ran. The color will be white. And also I'm going to define the position is going to be absolute and we need to position to be 13 RAM. As for the left position, I'm going to use for RAM, the width is going to be 17 ramp. Alright. So the heading paragraph or Customize. Next, I'm going to select called content with before pseudo elements. Let's set content to empty. Next, I'm going to define the width. It's going to be 92%. Then we need height. It's going to be 0.1 RAM. Also, we need to change the background color I'm going to use here and yellow color. Let's set position to be absolute. We need Let position to be zero. I felt it took position is going to be to RAM. So here we have before pseudo elements. Next we need to create another line using after pseudo elements. In this case, we will have vertical line. Let's change the width. It's going to be 0.1 RAM as far the height. I'm going to set it to 94%. Left position is going to be two REM. Let's put the two position we need here, zero. So here we have now the second vertical line. Now I'm going to create a hover effect. Once we hover over the card, we have to display the card content. Actually, let's place background color here. Then I'm going to use transition background color with a duration 0.6 s. So now, once we hover over the card, it will change the background color. Next, I'm going to Hyde both lines using transform. Scale. Value should be zero and then we have to use hover followed by the before. Pseudo elements. We need to change the scale. And you see here the default value one. So we need to transition for smooth effect. So now, once we hover over the cut line will display. Actually, we need to change the origin of the transformation because we need to display the line from the left side. So now we have much better result. And now we need the same thing for the second line. I mean the after pseudo element, Let's use here hover, change the pseudo element we need here after. And also we need to transform origin to be top and transition with a transform. Alright, so now we have here nice hover effect. Next, I'm going to hide the heading and the paragraph using opacity and visibility. And once we hover over the card, we have to display them back. So we need here opacity one and visibility, visible. Let's copy this code and use it for the paragraph as well. To change here the selector here P. And also we need transition for both elements. Besides that, we need to transition with hover as well and with some delay time. Okay, Now as you can see, we have here Much better fact. Actually, I think everything works fine. We just need to change the position of the Section bottom elements. Let's set right position to 12 round. Alright, so everything looks good. And with this section we're done. So let's move on. 27. Project 3 - Create and Style Customers Section: Alright, so once we're done with the Project section now it's down to move on and create our next section, which is going to be a Customers Section. So I'm going to place you knew comments for the Customers Section. Then let's go ahead and open section tag with a class name. Customers. I'm going to insert your H1 heading element with a class Customers heading. Let's insert your customers as the text value. Next I'm going to open Tip check with the cluster name Customers content, in which I'm going to place another give. And it's going to be Customers card. So inside the card, I'm going to insert image. Let's go ahead and select image from the images folder. It's going to be as tumor one. Also will have here DIV tag with the class Customers card contents. Inside that element, I'm going to place H1 heading tag with the name John Smith. Then we will have h3 heading and it's going to be co-manager associated. Next, we will have a Font Awesome icon. It's going to be FAA, solid quotes left. Then we need your paragraph with some dummy text. Let's go ahead and duplicate Customers card. Next, I'm going to insert here DIV tag, which is going to be client Section bottom. The elements from the previous sections. So we'll have here H1 heading elements with the text clients. And also we need here h3 heading element with the text says, okay, so that's it. We have here HTML markup. Actually we need to change here the image. It's going to be customer two. So now the image is changed. We are done with the HTML markup. Let's go ahead and start to write some CSS. We need here new comments for the Customers Section. Then I'm going to select Section elements, which has a className Customers. Let's define width. It's going to be 100%. That's probably height. I'm going to set it to at viewport height. And also we need to change the background color. In this case, I'm going to use 313133. Then we need some space at the top using padding, top seven R&amp. Next, I'm going to select Customers card image in order to make them smaller. Let's set with 220 RAM. Now the images became smaller and now it's more comfortable to work. So we need here position relative for the section element. As you can see, these Section bottom is placed nicely. Next, I'm going to select Customers heading. Let's define font size. It's going to be eight ramp. Then we need color. It's going to be white. Also, I'm going to create space using margin with the value 0010 RAM, and then nine RAM on the left side. Also create some space between the letters. Let's set it to point to RAM. So here we have the heading of the section. Next I'm going to, next I'm going to select Customers content. Let's define wave. It's going to be 80 per cent. Then we will have your margin row in order to center the element. Then I'm going to use flexbox. We need justify content space evenly in order to create even space between the flex items. Next, let's go ahead and take care of the customers card content. The width is going to be 50 R&amp. Then we will have height, which is going to be 22 RAM Next I'm going to change the background color. It's going to be 777. Also, we need here border-radius, 0.5 RAM. Next we will have some shadow effect with the values 01 RAM. Then again one RAM and the RGBA color, black color with a lower opacity. Next, we need some space using padding value to wrap. Okay, So step-by-step, the card looks nice. Next, I'm going to so the position for the image, it's going to be absolute. Then I'm going to select Customers card, which is a parent element for the image. And we need here position relative. After that, Let's go ahead and define. The position is going to be minus five-prime. And also we need here right position, it's going to be to ramp. So we need here border-radius to be 0.5 REM. Next we need some shadow effect. Will the values 0.5 RAM, 0.5 RAM, and the color is going to be RGBA color with lower opacity. Alright, so the images are aligned nicely. Next, I'm going to take care of the H1 heading elements of the cod content. The font size is going to be 2.5 RAM. Then we'll have color. It's going to be white. Also. I'm going to create some space at the bottom. Let's set it to one RAM. So the headings look nice. The next element to Customize is going to be the h3 heading element. Let's change the font size. It's going to be 1.8 dram as well. The color I'm going to use C, C, C. And the margin at the bottom is going to be three ramp. After that, I'm going to take care of the I element, the Font Awesome icon, Emily quotes, Let's the font size two to ram. The color is going to be light as well. The margin bottom, we need to get rid of it. So the codes look nice. Now we have to take care of the paragraph. Let's set font size to 1.6 round. Alright, so that's it. That's it about the customer section. It looks really nice. And now we can move on and start to work on the next section. 28. Project 3 - Build Contact Section: Alright, so it's time to move on and create our next section of the project. The next section is going to be a Contact Section. So let's go ahead and insert new comments for the conduct Section. Then I'm going to open section tag with a class name Contact. Inside the section element. I'm going to open deep tag, which is going to be Contact Content. Then we need Contact left, the left side, this section. Let's open H1 heading, tag and institute. Stay tuned and get the latest updates. Next we need Contact right, in which I'm going to insert input tag with a type e-mail and with the placeholder attribute value, enter your email address. Next we need Font Awesome icon, which is going to be a solid a paper plate. Okay, So let's see. The HTML markup is ready. Let's go ahead and start to write some CSS. Let's insert your new comments for Contact. Next, I'm going to select Contact elements. I mean this Section elements. That cell with 200 per cent, the height is going to be 25 ramp. Then we need to Flexbox and justify-content center. And also we need align items center in order to center the content inside this section. Next, I'm going to select Contact Content, and I'm going to specify the width. It's going to be 80 per cent. Then we need to display flex in order to place the items side-by-side. Then I'm going to use justify content space, even need to create evil space between the flex items. Next, let's go ahead and select Contact Content H1 heading element. So the font size to three RAM. Then I'm going to transform text into uppercase. Also change the color. It's going to be CCC. Here we have the heading element. Let's go ahead and select inputs elements. I'm going to set width to 45 RAM. Then the height is going to be for R&amp. Also, I'm going to change the background color. Let's set it to transparent. Next, I'm going to create space inside the input using padding, 1.5 RAM, and then 1.5 g. Next we need to point to RAM and zero. After that, I'm going to use border and I'm going to set it to none. Then we need for the bottom. It's going to be 0.1 rhymes solid, and the color is going to be 777. So here we have the border at the bottom. Next, let's set font size to 1.8 Ran. Also, we need your color to be CCC. After that, I'm going to select input element followed by the focus pseudo-class. So once we focus the input element, we need to change border, I mean the color of the border, and it's going to be yellow. Also, we need here transition for a smooth effect. Alright? So once we focus the input element and the border at the bottom, change its color. Next, I'm going to select placeholder attribute, and I want to change the color. Let's make it CCC and also use letter spacing, 0.1 RAM. Okay? So that's it about the input element. Now, I'm going to take you off the Font Awesome icon. Let's say font size to 1.8 around. Then the position is going to be absolute. I'm going to set up position to 20 per cent. As for the right position is going to be zero and also change the color. Make it C, C, C. Next, let's change the cursor, make it point. So the icon is not visible because we forget your position relative for the parent element. So let's look conflict, right? And set position to route. Okay, so that's it. The Contact Section looks nice, so we can move on and take care of the index Section 29. Project 3 - Create and Customize the Footer of the Website: Alright, so now it's time to build our last section of the project. It's going to be a Footer. The Footer will be simple one. Let's insert new comments for the Footer. Then I'm going to open HTML5 footer tag, followed by the class name Footer. Let's open DIV tag with the class Footer content in which I'm going to place the logo. We need here to talk with the classes, brand and then brand Footer. Inside the development will have three elements. I mean logo, one, logo to level three, like it's in the Navigation. And also we need here span element with a text architecture. Okay, next, we need here the copyright text paragraph with a copyright sign. And also with the text. All rights reserved. Made by coding Create. Alright, so that's it about the HTML markup of the Footer. Let's go ahead and Style this section. Let's insert new comments for the Footer. Then I'm going to select Footer element. Let's define a width. It's going to be 100%. There's probably height. I'm going to set it to seven R&amp. Next we need background color. It's going to be 2020 to zero. Also, we need border at the top, 0.1 g solid. The color is going to be three, e3, e4, one. So here we have the border at the top of the Footer. Next I'm going to select Branch Footer, set its position to absolute. Then we need position relative for the parent element, which is the Footer. The top position is going to be 3.5 RAM. For the left position, I'm going to set it to 20%. Okay, so here we have the logo. Let's select Frankfurter logo one, which is going to be three RAM. That's probably heights. I'm going to set it to three RAM as well. Then we'll have here border points to ram, solid, and the color is going to be yellow. Next I'm going to duplicate this code, change the class name. It's going to be go to width and height are going to be 2.5 RAM. And we don't need border. Let's change the background color. It's going to be 202020. Also, we need tough position to be 0.7 ramp. That's what led position. It's going to be 0.7 ramp as well. So the second part is ready. Let's duplicate this code and change the class name. We need here a logo three. Actually, let's copy the border from here and paste it here. Then we need to change top and let positions. Let's set both of them to 1.3 RAM. So here we have the logo. Next I'm going to select span element. Let's set font size to, to run. As far the margin top, it's going to be 0.5 RAM. So actually, we can say that the logo and the left side of the Footer is ready. Let's go ahead and take care of the copyright text. I'm going to send position to Absolute than top position is going to be 50%. We need to center the elements using Transform Translate Y -50 per cent. For the right position, it's going to be 20%. Next, we need to change the font size. Let's make it one coin six R&amp. Also change the color. Let's set it to CCC. So that's it. The Footer is already, looks nice. And actually we can say that the project we are done, the only thing that had to do is to make it responsive to different screen sizes. 30. Project 3 - Make the Project Responsive: Alright, so once we have built all the sections of our project, now we sound to make it responsive to different screen sizes. I'm going to inspect the page and switch to the responsive mode. Then I'm going to insert your new comments in the CSS file for responsive mode. So we're going to find the breakpoint on which we have to make some changes. And then we had to use CSS media query. So let's create it and specify the max-width. It's going to be 1,700 pixels. The first thing that I'm going to do is to select Banner and change the position. It's going to be 12 R&amp. Next, I'm going to select about, right, I mean the right side of the About section and define margin-right as 20 ramp. After that, Let's go ahead and select frame and change the width. It's going to be 45 RAM. Also, we need to change the height. It's going to be at 30 RAM. Next, I'm going to change the right position. Let's set it to 20 RAM. So I'll the position of the frame is changed and it moved to the right side. Next, let's go ahead and select About image wrapper and change the width. It's going to be 45 RAM than the height will be 30 RAM. And also I'm going to change the right position. It's going to be 13 rent. So now the right side looks good. Next thing that I'm going to do is to change the position of the Section bottom. So we need here experience and change the right position. Let's set it to 20 ramp. Okay, next, let's take care of the Project section. Select Section element and set the height 200 per cent. Then we need to select cards and set with two 80%. Also, I'm going to wrap the flex items using flex wrap, wrap. And also we need justify-content center. Next thing that I'm going to do is to create some space at the bottom using padding bottom, Let's set it to 25 ramp. Okay, So the cards are wrapped, but we need here to create some space. For that. I'm going to select card itself and set margin to 1.5. Okay, so now everything looks great. Next I'm going to take care of the Customers Section. Let's elect Customers content. Set width to 90%. And also we have to change the position of the Section bottom. Let's set the right position to 20 Ran. Okay? Next thing that I'm going to do is to select Contact Content. Let's change the width is going to be 90%. Also, we need to select brand Footer and change the left position. It's going to be 16%. And let's do the same for the copyright. Let's set right position to 16% as well. Okay, So I think everything looks good on a breakpoint. Let's go ahead and find the next one. So I think that the next Breakpoint is going to be 1,400 pixels. So I'm going to create new CSS media query. And I'm going to specify here the max-width as 1,400 pixels. I'm going to decrease the font size of the HTML element. Let's set it to 55%. It will make all the elements relatively smaller. Next, I'm going to select frame in the About section. Let's set its width to 40 RAM. Height is going to be 25 RAM. And also we need to change the right position. Let's set it to 15 RAM. To the same for the image. I made the wrapper of the image. Let's set width to 40 RAM and height is going to be 25 from. And also we have changed the right position. And this case the right position is going to be a tram. Okay? So the right side of the About section, it looks good. Let's take you of the experience. Changed the right position and set it to 12 ramp. Alright, so everything looks good. Let's go ahead and find the next breakpoint. So I think that the next breakpoint should be 1,200 pixels. So let's go ahead and create new CSS media query and set max-width to 1,200 pixels. I'm going to change the font size of the HTML element again, let's set it to 49%. Then I'm going to take care of the About section. So let's select the left side of the About section. And also we need here Paragraph set width to 40 R&amp. Next. I'm going to take care of the Customers Section because the cards are too close to each other. So let's select Customers content and set with 200 per cent. Next we need clients and we have to change the right position is going to be ten ramp. Okay. After that, Let's go ahead and take care of the Contact Section. Let's set width of Contact Content 200 per cent. And also I'm going to take care of the Footer. We need to change the leg position. Let's set it to ten per cent. Also have to change the position of the copyright. Actually, we need here Luck position and not the right. We need right position for the copyright. So let's set it to ten per cent as well. Okay, So I think everything looks pretty nice. Let's move on and take care of the next breakpoint. I think the next break point should be 900 pixels. Let's go ahead and again Create new CSS media query and specify the max-width as 900 pixels. First of all, I'm going to change the font size of the HTML element. Let's set it to 45 per cent. Next, I'm going to take care of the search bar. I mean the input element. Let's change its width making 30 ramp. So no, we don't have any problems with the navbar. Next, we need to take care of the heading on the Banner at set font size to seven ramp. And also, I'm going to select span elements in the Banner heading. Let's change the font size and set it to seven rum as well. Okay, after that, I'm going to select Paragraph independent content. Let's change the font size. It's going to be 1.7 ramp as probably width. I'm going to set it to so to five ran. Next we have to take care of the About section because things are messed up here. So let's go ahead and Select About left. H1 heading elements. Change the font size. Let's set it to three ran. Also, I'm going to set with 235 RAM. Then I'm going to select paragraph in the About left side. Let's change the font size. It's going to be 1.7 ramp. And also change the width. I'm going to set it to 35 ramp like the heading elements. Next, we have to take care of the frame. On the right side. That's changed. Width is going to be 30 R&amp. Also, we have to change the height at 30 to 15 RAM than change border. I mean the width of the border, it's going to be 1.5 RAM. Also, we need to change the right position. Let's set it to ten R&amp. Next we have to take care of the image wrapper. We need to change the width it's going to be. So to run, then we have to change the height. Let's set it to 15 ramp. And also I have to take care of the positions. Top position is going to be 12 ramp. And also we have to take care of the right position. Let's study to seven ramp. Okay, so the right side looks good. Next, we need to customize the experience. That's change the right position and set it to seven R&amp. Next, we have to take care of the Customers Section. So let's go ahead and select Customers. Section element set height to 100%. And also we need padding at the bottom to be 12 ramp. Then I'm going to select Customers content and change the direction of the flexbox. That's only two column. And we need here align items center. So now the cards are placed vertically on top of each other. Let's create some space between them using margin H ramp. So now the Customers Section. Looks good. We have to take you have to Contact Section. Let's select Contact Content. Change the direction, make it column like the previous section. And also we need here align items, center, then select Contact left, and use margin, bottom. That's only two for rent. Okay. I think everything looks good on the breakpoint. Let's check the Navigation. So now we have to take care of the next breakpoint. Enacting is the last one. So let's Create new, sees this media query set max width to 600 pixels. So the first thing that I have to do is to change the font size of the HTML element. Let's set it to 35 per cent. Then I'm going to take you to Navbar. Let's select brand. And let's select span elements and the brand now poor and hiding using display none. So we have here and just the logo. Also. We have to take care of the navigation items. So let's select Navigation, followed by the link element. So font size to three RAM. And also we have to take care of the lines. They are too long. We need an element with before pseudo element, and also we need after pseudo element as well. Let's set the width to can run. Then I'm going to select before pseudo elements separately Let's change that position. It's going to be -13 ramp. And we have to do the same for the after pseudo element as well. In this case we need to right position. So now I think the problem is fixed. Next, let's take here of the Banner. Need to change the left position. It's going to be five RAM and also we have to change the bottom position. I'm going to set it to 18 R&amp. Next, let's select heading elements and change the font size, set it to five RAM. Also, I'm going to select span elements inside the Banner heading, that cell, its font size two for R&amp. Alright, Next we have to take care of the About section. So let's select about rights and make it hidden using display. None. Actually. We need to take this element out of the development because it was hidden. So next I'm going to select About section and set its height to 100%. And also use justify-content center. We need also padding to be ten RAM 025 gram zero. Alright. After that, I'm going to select left side. Let's airline texts in the center. So change margin-right, make it zero. I think now about Section looks pretty nice. Let's take you off the heading of the project section. So select project heading, change the font size, make it six RAM. Next I'm going to check the Customers Section. Select Customers heading, font size to six RAM as well. Alright. I think everything looks good and our project is responsive to all different screen sizes. I hope you enjoyed it and learn something new. Let's move on and build our next project. 31. Project 4 - Preview: Hi and welcome to our next project. In this section, we're going to be building an interior designer Website. This field is very popular and highly demanded today. So I think this type of website will be interesting and helpful for you. Let's go ahead and describe the project. We have here a Header of the Website which includes the logo, the Hamburger Menu icon, and an Animated Banner. If I click the Menu icon, then the Navigation will appear nicely. They Banner is Animated. As you can see, the text elements are changing with some fade effects. Next we have an About section which appears nicely with a fade effect. We're going to use this effect for every section and this project. The About section consists of an image and some details about the designer. Next we have the Services section, which shows us what the designer can offer. After that, you can find the projects of the designer. I'm in the portfolio of her works. Then comes the achievement section in which we have Animated Counters. And finally, you can find here a simple and nice Footer. The project is responsive to different screen sizes. If I inspect the page, switch to the responsive mode and then check the project four different screen sizes. You will find the project is Responsive and it looks nice on every different screen sizes. Again, all the projects and this course are created for extra large screen size. I mean, this coincides with 1920 pixels width and 1080 pixels of height. So if you're using a relatively smaller screen size, then during the lectures you should switch to the responsive mode and specify the width and height like so. Otherwise, the project won't look good on smaller screen size until we make it responsive. So please take it into account. Alright, so that's it about our fourth project. Let's move on and start to build it 32. Project 4 - Create and Make the Navigation Work: Alright, so let's go ahead and start to create our project. I'm going to open this folder in VS Code. And then I'm going to create our working files. As usual for HTML, index.html, for CSS and JavaScript. Next I'm going to open index dot HTML file and create basic HTML document. First of all, let's go ahead and change the title. It's going to be interior designer Website. Then I'm going to link CSS file. Let's specify here the name of the file and also we need script tag. The source attribute. We need script such as the name of the JavaScript file. Let's open the Project Browser. And then I'm going to place the browser and the editor side-by-side. Like. So. In order to make our working process more comfortable. Alright, next we need now the links like Font Awesome icons. Let's visit Font Awesome, C, D, and J. Yes, and then grab the first link from here. I'm going to open link tag in the head element and then paste you the CDN. Besides that, I'm going to use Google phones. So let's go ahead and visit Google Fonts website. I'm going to search for font called Railway. Let's select couple of different styles. From here. Next, I'm going to search for another phones called can-it. Let's select again a couple of different styles. Then copy the link and paste it in the Header want. Alright, so we're ready to start to write HTML markup. Let's insert your comments for the container. Then I'm going to open DIV tag with the class container. Next we need DIV tag for the rectangle. It needs two classes, rectangle and a rectangle one also we need here rectangle two. Next, I'm going to insert comments for the Navigation. Then let's go ahead and open enough TOC with a class name. Now four, in which we will have another element with the class name designer. Let's insert your image. I'm going to select image from the images folder. It's going to be designer, the JPEG. Next we need DIV tag in which I'm going to insert span with the name and Smith. And also we need another span element with the text interior designer. Okay, after that, I'm going to create the Menu icon in which I'm going to place your DIV tag with the class names. Line line one. We need three lines. So let's go ahead and change the class names. It's going to be lined to and lie three. Then I'm going to create Navigation itself. Let's hear. Now, left with the image, I'm going to select image from the images folder. It's going to be nafta JPG. Next, we need to create the right side of the Navigation in which I'm going to insert you give track with the class name X BTN. It's going to be the X closing Batson. Sincerity, your DIV tag with the classes XS line, X, line one, and we need then X line two. Alright, let's see about the X button. Next, we need here H1 heading elements with a text and Smith. Then after that, I'm going to insert DIV tag with a class nap least, which will include navigation items. The first link is going to be home. Then I'm going to duplicate this element a couple of times. The second one is going to be about, then we will have Services. Next, I'm going to insert your portfolio. Then we'll have Blog. And finally, I'm going to interfere, Contact Alright, so let's see. The HTML markup is created. Next, I'm going to take care of the CSS. Let's open CSS file and insert new comments for the default styles. I'm going to select every element using an asterisk. First of all, let's set margin and padding both of them to zero. Next, I'm going to set box-sizing border-box. Also. We need here text-decoration to be none. Found. The outline, It's going to be known as well. And also, I'm going to change the font family for every element. It's going to be Railway sensory. Alright? Besides that, I'm going to change the HTML font size because we're going to use RAM as a measurement unit. We need one row to be equal to ten RAM. So the HTML element should have font size as 62.5 per cent. Next, I'm going to create hear comments for the container. Let's insert comments, pause the Navigation. Then I'm going to select Navigation. Let's set display to none. I'm going to hide it for awhile. Alright. After that, I'm going to select the container. Let's define its width. It's going to be 100% than the height. It's going to be 100 viewport height. I'm going to change the background color. Let's use color. One-two, one-two, one-two. Next, I'm going to select rectangle. Let's define its width. It's going to be 70 RAM. Also we need here height, it's going to be 40 RAM. Then I'm going to set border 2.1 RAM solid. And the color is going to be RGBA to five to five to five. It's a white color with a lower opacity, 0.1. Next, let's set position as fixed. So we have here the rectangle, we need to change its position. But right now I'm going to select rectangle one. Let's set to position and make it 48 per cent. The left position is going to be -21%. Now. So we need here transform, rotate with the z-direction and the value is going to be 20 degrees. Next we need to position relative for the container. So here we have the first rectangle. Next, I'm going to take you off the rectangle tool. Let's set the position is going to be minus eight RAM than we need right position. Let's set it to minus ten RAM. And also grab transform property. Value is going to be 60 degrees. Alright? So here we have the second rectangle. Actually, I'm going to change the position for the rectangle to the two position is going to be 8%. And we need here right position minus ten per cent instead of RAM, right? So next, let's select designer image. And at its width to six RAM, the height is going to be six Rome as well. And also we need here object feet in order to fit the image. Also, I'm going to change the border radius. It's going to be 50 per cent. So here we have the image of the designer. Next, let's go ahead and select navbar. Set position to absolute. Then to position it's going to be zero, the left position it's going to be zero as well. And we need to set the width as 100%. And the height is going to be ten RAM. Then I'm going to go ahead and select designer. Lets set position to absolute. Two, position is going to be to ram, supposedly left position. I'm going to set it to a third to RAM. Then we need here flexbox in order to align the elements. Let's use align items, center. Okay, so here we have the image and the span elements. Let's select deep elements inside the designer. So I'm going to use again Flexbox Then we need here to change direction. It's going to be column. Also. I'm going to align the text in the center. Next we need some space on the left side. Let's set it to, to run. So here we have this parliaments. Now actually, we can customize each of these pan elements. Let's go ahead and select the sine or the span. The first span element using nth child selector. So the font size is going to be 1.8 RAM. Then we need here font weight, it's going to be bold. Let's set text, transform it to uppercase, and change the color. It's going to be white. Next, we need some space between letters using letter spacing point to ramp. So here we have the name of the designer, the first span element. Let's go ahead and duplicate this code. Change the child selector we need here too. I'm going to change the font size. Let's set it to one point for RAM. And also change the color is going to be 999. Let's check the results. So we have here the second span element. After that, I'm going to take care of the Menu icon, which will be placed on the right side. Let's set position to absolute. Then it's a position is going to be three RAM. We need right position. It's going to be so to RAM. And also set width. Let's make it five RAM. Then. The height is going to be three RAM. And also we need here temporary background color. Let's use CCC. So here we have Menu icon place on the right side of the Navigation. Let's go ahead and select line. Let's set its width to 100%. The height is going to be point to RAM. Also, we need here background color to be white. Let's get rid of these temporary background color from the Menu icon. So here we have the lines, now we need to align them. And for that, I'm going to use flexbox. We need display flex. Then we need to change the direction. It's going to be column. And also we need some space between the lines using justify content space evenly. So here we have the Menu icon, which now it looks nice. Let's change the cursor. Make it pointer. So next, I'm going to select Menu icon with hover. Let's set transform to scale. Why? 1.4? Also we need to transition for smooth effect. Once we hover over the Menu icon, then this K will increase here. Nice and cool effect. Okay, let's get rid of displaying them from the Navigation because we are going to make it work. First of all, I'm going to take care of the Navigation left. Let's set width to 30%. Then we need height to be 100%. Let's go ahead and select nafta left image, because right now the image is to bigger. Let's set width to 100%. Height. It's going to be 100% as well. Again, we need here object feet with the value cover. So here we have the image which is placed on the left side of the Navigation. Let's set width for the Navigation. It's going to be 100%. Then the height is going to be 100 viewport height. Also we need here background color, the dark black color. Then I'm going to set position to fixed. The top position is going to be zero and the left position will be zero as well. Alright, so let's see it. Image looks nice. Let's use display flex. So here we have the Navigation, least. Next I'm going to decrease slightly opacity. Let's set 0.5 for the image. After that, I'm going to select the right side. Let's set width to 70% than the height is going to be 100% After that, I'm going to take care of the X closing button. Let's set its width to four RAM than the height is going to be full REM as well. So when you hear background color, I mean the temporary background color, then I'm going to set position to fix. The tip position is going to be five RAM. As for the right position, I'm going to set it to five for him as well. Also, let's change the course from a good point. So here we have the X closing button. Let's get rid of these temporary background color and take care of the lines to create X sine. So let's set with two for RAM. The height is going to be point to ramp than the background color will be white. So here we have the lines and now we need to transform them and make it X. So I'm going to select the first line that's use Transform. Rotate Z direction as the value I'm going to place your -45 degrees. So the first line is rotated. Let's duplicate this code. Use your ex line to get rid of minus sign from here. Also, we need here Translate function to move the elements by minus point to RAM and then -0.1 ramp. So now we have here and X button. Next, I'm going to take here of the H1 heading elements on the right side of the Navigation. Let's set font-family. It's going to be candid, sans-serif. Then we need here font size, it's going to be five RAM. We're going to change the font weight. Let's add it to 300. I'm going to transform text into uppercase. Also change the color. I'm going to set it to white. So here we have the H1 heading element, which is the name of the designer. Next, let's set position to absolute. I'm going to set top position to 20 per cent. As for the lead position, it's going to be 50 per cent. So here we're happy. Heading aligned nicely. Next, let's take you off the Navigation least. I'm going to use display flex. Then I'm going to change the direction because we need to align items vertically. Next, let's set position to absolute. The top position is going to be 30% as well. The left position, I'm going to set it to 50% likely heading. So here we have the navigation items. Let's go ahead and select not least a elements. I mean, the links, I'm going to change font-family, it's going to be candid san-serif. Next, let's define the font size. I'm going to set it to fall RAM. Also, we need here color to be CCC. Then we need Margin, 0.5 RAM than zero. So now the Navigation items look better. Next, let's go ahead and select the first link with the nth child selector. I'm going to change the color. Let's use red color. Ceo 374. All okay, So you have the first item which is read. Next, I'm going to use a hover effect. I'm going to change the color on hover and use again these red color. And also we need to transition for the smooth effect. Okay, So now, once we hover over the Navigation items than they will change the color and come read. Next, I'm going to use some JavaScript. Let's create a variable. It's going to be Menu icon. Let's go ahead and select Menu icon using query selector method, we need to specify who the class name, which is going to be Menu icon. Let's duplicate this variable twice. We need here X button selected. And also I'm going to use your Navigation. Let's specify here the proper class name. Navigation. Now I'm going to add an event listener to the Menu icon with a click event and with a callback function. So we need to add class to the Navigation. Once we click the button. This class is going to be navigate. That's copy this code. Now, we need here X button. Once you click the X button, we need to remove the class from the Navigation. Next, let's use that newly created cluster navigate. But first of all, we need to hide the Navigation using opacity zero and visibility hidden. Next we need Navigation followed by the navigate. And we have to display back the Navigation using opacity one and visibility visible. Now so we need to you transition all 0.3 s. So now once we click the Menu icon, the Navigation will display. And once we click the X button, then it will hide. Alright, so that's it about Navigation. Let's move on. 33. Project 4 - Create an Animated Banner: Alright, so once we're done with the Navigation, now it's time to move on. And so two Create next part of the project. The next part is going to be an Animated Banner. So I'm going to insert your new comments for Landing. Next, I'm going to open a section tag with a class name, Landing, in which I'm going to open DIV tag with the class Banner. So this element will include and other deep chug with two classes, heading slide and heading slide. One overall will have two slides. Let's insert here h3 heading elements with the text, Hello. I am. Then we will have H1 heading elements with a text and Smith. Let's duplicate. Elements, change the class name. And also we need to change the text. So here we have from London. So we need here and interior design. Alright, so let's see it about the HTML markup. Let's move on and start to write some CSS. I'm going to insert your comments for Landing. Then I'm going to select Landing. I'm in this section element. Let's set with 200% than the height is going to be 100 viewport height. Next I'm going to select Banner. Let's set position to absolute. Then we need position relative for the parent element, which is a section element. Then let's set a position to 35%. Left position is going to be 50 per cent and we need to center the Banner using Transform Translate X with -50 per cent. Alright, next, we need here to define the width. It's going to be 100%. As for the height, I'm going to set it to 40 RAM. Also, we need here text-align center. So it's can see the Banner is placed in the center. Let's go ahead and select Heading slide h3 heading elements. I'm going to set font size to, to run and the text transform uppercase. I'm going to change the color, it's going to be 999. Then we need some space between the lattice using letter spacing 0.3 ran. Also, I'm going to create some space at the bottom using margin bottom, it's going to be to run. So here we have headings. Let's duplicate this code, change the selector we need here H1 heading element. The font size is going to be six RAM. Also, I'm going to use font weight is going to be bold. Then change the color. Let's make it white. Also, we need to let this patient to be 0.25 RAM and get rid of margin. Okay, so that's it. The headings look pretty nice. Next, we need to select Heading slide. Set position to absolute. The width is going to be 100%. So now the headings are placed on top of each other. I'm going to use Transform, Translate Z minus atrium and also set opacity to zero and visibility hidden. So now the headings are hidden. Next, I'm going to create CSS keyframes. The name of the animation is going to be animate heading. So at zero per cent, we need those three lines of code. Then at eight per cent, I'm going to change the value of Translate function is going to be zero and also we need to display the heading. The next step is going to be 48%. We need the same code here. Next, we need 56%. And we need this code from here, from the first step. The next step is going to be 100%. It's going to be the last step. We need here. The same code. Now, we need to apply these rules to the elements, your animation property, and then the name of the animation. Next we need duration and infinite and also linear. Let's duplicate this code, change the class name. Actually we need here is pace. For the second slide, we need a delay time 4 s. So as you can see, we have here really nice and cool animation. Okay, So that's it about the Banner. Let's move on. 34. Project 4 - Build About Section: Alright, so now it's time to move on. And so two Create the next section of the project. So the next section is going to be an About section. Let's go ahead and insert new comments for an About section that I'm going to open. Section type with the class about. In which I'm going to open deep tag with a class about left. It's going to be the left side where we will have image. Let's go ahead and select image from the images folder. It's going to be About dot JPG. Next, we need the right side in which we will have H1 heading elements. About. Next, we will have H three heading Elements, high and Smith. Next we need here DIV tag with the class info in which I'm going to open paragraph with a dummy text. Next, we will have here DIV tag with the class social media, in which I'm going to insert. Now some icons. The first one is going to be fa brands. Fa tweeter. Let's duplicate it twice and change the class names. The second one is going to be Facebook, F, and the third one is going to be Instagram. So you will have the HTML markup. Next, we need to create a couple of other elements. When you hear H4 heading elements with the text, Contact me. Here. Next, I'm going to open span tag in which I'm going to insert email. Then it's going to be full link in which I'm going to pass. And Smith at design.com, some dummy e-mail address. Let's duplicate this code. Change here, emailing to phone and insecure some dummy phone number. Alright, so actually with the HTML markup, we're done. Let's go ahead and start to write CSS. Insert new comments for our new section. I mean the About section. Then I'm going to select Section elements and set its width to 100%. As for the height is going to be 100 viewport height. Next, I'm going to use flexbox. Then we need justify-content center. And also I'm going to create some space at the top using padding, top can ramp. So it's conceived the left and right sides are placed side-by-side. Next, we need here to change the height of the container. It's going to be 100%. So now we have here the dark background in the About section as well. Next I'm going to select the left side. Let's set width to 40%. Let's duplicate this code and Find the width for the right side as well. It's going to be 60 per cent. Next, I'm going to select the image which is closed in the left part. Let's set width to 33 RAM. Change height, it's going to be 55 RAM. Then we need to fit the image using objects. Feed cover. Also, set the position, make it absolute. Then we need positioned relative for the parent element which is about left. Let's define two positions going to be minus ten RAM. Now we need right position. Let's set it to zero. Okay? So here we have the image. Next, let's take care of the H1 heading elements on the right side. Let's set font family to can-it sans-serif. Then we need here font size, it's going to be 20 RAM now, so I'm going to use font-weight. Let's make it bold. Then I'm going to transform text into uppercase. After that, I'm going to Create some space between the letters. Also change the color is going to be 222. And then I'm going to change the position is going to be absolute. We need position relative for the parent element for the about right development. Next, I'm going to set top position as -20 RAM. As for the left position is going to be 15 RAM. So the heading looks good and is aligned nicely. Next we need h3 heading elements on the right side. So the font-family is going to be counted. San-serif. Next I'm going to increase the font size. It's going to be full RAM. Next I'm going to set the font-weight to 300. Also, we need color to be white. Then I'm going to change position. Let's set it to absolute. And we need to position to be minus seven RAM than we need lap position is going to be 25 RAM. So here we have the second heading aligned on top of the first heading, and it looks pretty nice. Next I'm going to select Info. Lets position to absolute, set to position 25 RAM. Then we need left position is going to be 25 RAM. After that, I'm going to select paragraph inside the info. Let's set font-family to can it san-serif. Then I'm going to change the font size. It's going to be 1.8 RAM. Next, I'm going to set the width. Let's make it 45 RAM. The color of the paragraph is going to be 777. Also, we need to change the line height. Let's add it to 1.8. And we need some space at the bottom using margin bottom, Let's make it five RAM. So here we have the paragraph. Next. Let's go ahead and take care of the social media. I'm going to set display to flex. Then we need space at the bottom using margin bottom five ran. And now we can Customize the Font Awesome icon. So let's select social media followed by the I element. Let's set way to to six RAM. And the height is going to be six RAM as well. We need border radius to be 50%. And also we need background color. Let's use 202 O2O. So here we have the circles. I'm going to use display flux. Then in order to center the icon when you justify Contact Center and the line items center. So I'm going to increase the font size. Let's make it 2.5 RAM. So now the icons are placed in center of the circles. Next, I'm going to use some space on the right side using Margie right to RAM. And also the color is going to be red one, which we used in the previous lectures. And also change the cursor, make it point. So the Font Awesome icons look pretty nice. Next, I'm going to take care of the info H, four elements. Let's set font size to 1.8 RAM. Then use color, make it white. After that, I'm going to select span elements. Inside the info. Let's set font size to 1.6 RAM. Change the font weight, it's going to be bold. Then we need color to be 777. Also, I'm going to use display block and then marching to RAM and zero. Finally, we need to select link elements. Let's change the font-family. It's going to be counted some serif. And then when to change the color, Let's use red color. Alright, so actually this section is customized. It looks pretty nice. Now we have two Create fade effect. First of all, we need to hide the image. Let's use opacity to zero and then visibility. Hidden And also we need to move the image down using Transform, Translate Y 20 ramp. Let's use this code for the right side of the About section as well. So now the content is hidden and we need to write some JavaScript. I'm going to add event listener to the window object using scroll events and with a callback function. Next, we need to create a variable which will be about, let's select the elements using query selector method. And now we need to use if else statements, you condition is going to be window dot Page Y offset is greater than or equal to 200. Actually, this property shows us the distance that we scroll down. Next, we need to add class change to the about. If this condition is true. In the else statement, we need the same condition but with remove elements. So we need to remove the change class from the about. Let's check in the console page Y offset property. I'm going to show you what it actually gives us once we scroll down the page. So let's inspect the page and switch to the console. So once we scroll down, then we will get some values. Again, it shows us the distance that we scroll down in pixels. Okay, so now we need to select change, followed by About left image. And we have to use those three lines of code. We need to display back the image. And also we need to move it up. Let's use the same code for the right side. Gets rid of image selector. We need here transition with some delay time. And when you transition here as well. So now, as you can see, we have here really nice fade effect. Alright, so that's it. Actually, the Menu icon doesn't work here. So we need to fix that problem. Let's use the index property and set it to 100. So now let's consider the problem is fixed, right? Let's move on. 35. Project 4 - Create and Customize Services Section: Alright, so now it's time to move on and create the next section of our project. The next section is about Services. Let's insert new comments for a new section. Then I'm going to open section tag with the class Services. Inside the section element. I'm going to open DIV tag, which is going to be Services Header. In that element, I'm going to open h3 heading tag with the text. What I do. Next, we need H1 heading elements with a text my Services. After that, I'm going to open DIV tag with the class Services, least. Inside that element. I'm going to open another DIV tag with the class list item in which I'm going to open Font Awesome icon with the class is FA, solid fa, layer group. Next, we need you span element in which I'm going to insert space. Planning. Next one in another span element with the text furniture layout. Next we need another span, which is going to be surface selection. So I'm going to duplicate list item twice, and then we have to change class names and the text as well. So the second icon is going to be fa, pen nib. We need here lighting design. Then the next one is going to be interior detailing. Next, we will have installation. As far as the third list item here, the Font Awesome icon of a house. Then inside this panel amount, I'm going to insert color selection. Then the next one is going to be window treatments. Then we'll have constructor documentations. Alright, so that's it about the HTML markup. Here we have the HTML elements. Next, I'm going to start to write the CSS. First of all, as usual, I'm going to insert new comments for a new Section, Services and off Services. Next I'm going to open Section elements. Let's define with it's going to be 100%. Then we need height, which is going to be 70 viewport height. Then I'm going to use Flexbox. Let's change the direction is going to be column. And also I'm going to align the items in the center. Alright, so here we have the HTML elements. Next, I'm going to select Services Header, followed by the H three heading element. I'm going to set font size to two-gram. Then we need to transform text into uppercase. So I'm going to change the color, it's going to be 777. Then I'm going to use letter spacing. 0.3 ran. Also. I'm going to create some space at the bottom using margin bottom value to run. So here we have the first heading. Let's duplicate this code and change the heading. It's going to be H1. We need here font-size to be five RAM. Then I'm going to get rid of text transform property. The color is going to be white. Also, we need your margin bottom 12 RAM. So here we have the second heading. Actually, I'm going to place the headings and sensory using text-align center. So now we have better result. After that, I'm going to take care of the services list. Let's set with two 70%. Then I'm going to use flexbox, followed by the justify content property with the value spaced evenly We have even space between the items. Next, I'm going to select list item. Let's cell with 230 RAM. Next we need flux books. I'm going to change the direction. Let's make it column because we need to align items vertically. Let's use the align items center. So the list items are aligned nicely. Next, let's go ahead and select list item elements, Font, Awesome, icon. I'm going to increase the font size. It's going to be full round. Then the color. It's going to be read. Also, I'm going to use margin bottom. With value three RAM. We need some space at the bottom. So the icons look pretty nice. Next I'm going to take care of the span element. Let's set the font family to can-it sans-serif. Next I'm going to change the font size. It's going to be to ram, change the color. I'm going to use white color. And also we need margin, 0.7 RAM on top on bottom, and zero on the left and right sides. Okay, So actually everything looks nice. We have to hide the Header because we're going to use the same fade effect like we did in the previous section. Let's move the Header down using Transform Translate Y five RAM. We have the same for the services list as well. I mean the list items. So now the whole contents is hidden. Let's go ahead and write some JavaScript. I'm going to duplicate this variable. Change name, it's going to be Services. Next we need, again if else statements. Now the number of pixels will be changed by About dot offset top. Once the About section is finished, then plus 200 pixels, we need to display the effect. Now, I'm going to select change followed by the Services Header. And we need here opacity one, then visibility, visible and Transform Translate Y with zero. Let's use transition. Then I'm going to copy this code and paste it here we need list item instead of services Header. Let's select here list item with F child selector and use transition for the first item with a delay time 0.5 s. Let's duplicate this code twice. Change the charts lecture. And also we need different delay time for the second and for the third list items. Okay, if we reload the page and scroll down, then we'll get this nice and cool fade effect. Okay, So that's it about the Services section. Let's move on to the next lecture. 36. Project 4 - Create and Style Portfolio Section: Alright, so once we're done with the Services section, now it sounds to move on and Create next section, which is going to be a portfolio. So I'm going to insert your new comments for the new Section. Then let's go ahead and as usual, open section tag with the class portfolio. I'm going to insert your DIV tag, which is going to be Portfolio Header. Let's open h3 heading tag with the text Portfolio. Next we need H1 heading element. We're just going to be Checkout my work. After that, I'm going to open DIV tag with the class works. It will be wrapper than we need Work itself, which will consist of two parts. We'll have image. Let's select image from the images folder. It's going to be Work one. Then we will have Work Info in which I'm going to insert h3 heading element. It's going to be interior design. Then we need H1 heading element, which is going to be giving your home a new style. Then we will have paragraph with some dummy text. And then we need link, which is going to be few. Project. Alright, so that's it about the work. I'm going to duplicate this element couple of times. We'll have four works. For the second Work, I'm going to change the places for the image and for the work info. And also I'm going to change the image name. Then we'll have here image Work three. Then worked for and for the fourth Work, I'm going to do the same. Let's change the places for the image and the work info. Alright, So actually with the HTML markup for this section, we're done. Let's move on and take care of the CSS. I'm going to institute new comments for the portfolio. Then I'm going to select section tag. Let's set width to 100 per cent. And the height is going to be 100% as well. And also we need padding, 20 RAM and zero, then five-prime and zero again. Next, I'm going to copy this entire code from the previous section. And I'm going to change the class names. Let's insert here. Portfolio. Also we need here margin at the bottom, 20 ramp. So as you can see, we have here the section headings and they look pretty nice. Alright, Next, I'm going to take care of the works which the wrapper, Let's set width to 80 per cent. Then we need margin auto to center the elements. So the Development Center. Next I'm going to select Work itself. Let's use Flexbox. We need here justify content space evenly. We need even space between the flex items. Then I'm going to sit margin to 15 RAM and zero. So it's can see the elements are aligned nicely. Next, let's select Image. I'm going to define width, it's going to be 40 per cent. Then we need to your height. It's going to be 30 RAM. Also, I'm going to use object feed with the value cover. Next, I'm going to decrease slightly opacity. Let's set it to 0.8. So the images look nice. Next, I'm going to select Work Info. Let's set width to 40 per cent. After that, I'm going to select h3 heading elements inside the work info that set font size to 1.6 RAM. Then we need to color it's going to be 777. Also, I'm going to transform text into uppercase letter spacing to create some space between the lattice. So the first heading element looks nice. Next, I'm going to duplicate this code, change the selector we need here, H1 heading elements. We need to change the font-family. It's going to be candid san-serif. Then I'm going to increase the font size. Let's set it to fall RAM. Also, I'm going to use here font-weight, bold, then change the color. It's going to be white. Also, I'm going to get rid of checks transform property. As for the letter spacing, it's going to be pointing to ramp. Besides that, we need to your margin. Three ramp and zero. Alright. Next, I'm going to select Work Info, followed by the paragraph. Let's set font size to 1.6 RAM than the color is going to be 777 or so. I'm going to sit line height to 1.6 and then use margin bottom with a value to ram. Okay? So the paragraph looks nice. Next, I'm going to select link elements. Let's set font size to 1.6 RAM than change font weight, it's going to be bold. Also, I'm going to change the color. Let's use red color and then use space between the letters. So now the link element looks nice. Next, I'm going to hide the Portfolio Header using opacity and visibility. And also we need to move down the elements. We're going to use the same fate effect that we used in the previous sections. Let's grab this code and use it for the work as well. We need here ten RAM for the work instead of five RAM. Next, I'm going to write some JavaScript. Let's select new variable which is going to be portfolio. Then I'm going to use if else statement. We need to change here the name of the section. In this case we need Services. And here we need portfolio because portfolio comes after the Services section. Now, we need to select elements using class change efforts. We need here portfolio Header, grab this code and set opacity to one. Then we need visibility, visible. As for the Translate Y function is going to be zero. And also we need here transition for smooth effect. I'm going to grab this code and use it for the work. Let's change the class name. It's going to be Work. Then we need to use transition, but we will use different transitions for the different work items. For the first item we need transition with a delay time 0.5 s. Let's duplicate this code. For the second item we need delayed time, 1 s. Then for the third item, we need 2 s. As for the fourth item, it's going to be 3 s. Alright, so if we reload the page, then we will get these nice and cool effects. So that's it about the Portfolio Section. Let's move on to the next lecture. 37. Project 4 - Build Data Section with Counters: Alright, so once we're done with the Portfolio Section, now have to move on and start to work on the next section, which is going to be a data, I mean the Animated data Counters. Let's open section tag with a class name Data. Then I'm going to open a DIV tag, which is going to be Data Header. Let's insert your age three heading elements, just going to be achievements. And also I'm going to insert you H1 heading elements with the text. Let's share my achievements. Alright. That's it about the Header of the section. Next I'm going to open DIV tag, which is going to be Data list, in which we will have data items. Let's insert here span element. And right here clients. Next we will have another span elements. The class name, numb, I meant the number. And also we need here Data, Val, which is going to be an attribute. I'm going to pass here some random number. By default, I'm going to insert here zero. So let's duplicate data item twice. Let's change here the content, it's going to be projects done and the data value is going to be 652. And we need here cups of coffee. And the data value is going to be 1,000. Okay, so let's say it about the HTML markup. Here we have all the elements that we have just created. I'm going to start to write the CSS. Let's Institute comments for data. Then I'm going to select Section elements and set width to 100%. As for the height is going to be 100% as well. We need padding, 20 RAM and zero. Next, I'm going to select data Header. Let's use here text-align center. After that I'm going to select data Header H, three heading elements. Let's change the font size. It's going to be to run. Then we need tax transform. It's going to be uppercase. Also. I'm going to change the color. Let's set it to 777. Then we need some space between the letters, let's say 2.3 RAM. And also I'm going to set margin bottom to ramp. So the first heading is Customize. Next I'm going to select H1 heading elements. Let's change the font size. So five RAM, then we need color to be white. Also, we need letter spacing with 0.3 RAM and then margin at the bottom, which is going to be 12 ramp. That's it about the headings of the section. Next, I'm going to customize the data. Least. Let's set width to 60%. The height is going to be 90 RAM than we need margin auto to send to the element. After that, I'm going to take care of the data items. Let's set the position to absolute. And also we need here position relative for the parent element, which is a data list. Next, let's use flexbox. We need to change the direction. It's going to be column. So here we have the data items. Next I'm going to select the first data item. Let's set the position to zero. As for the next position is going to be zero as well as duplicate this code twice. Change the numbers here. We need to position to be 50 per cent. For the second item is for the left position is going to be 50% as well. And also, I'm going to use here transform translate in order to center the element perfectly The values I'm going to cost here, -50 per cent and again -50 per cent. As for the third item, we need here, bottom position to be zero and Y position is going to be zero as well. Actually, I don't see here the third item. Let's check the code. Yeah, we need to change the number. Okay, so now all the elements, I mean, all the items are aligned. Next, let's Style those items. Select data, item, span elements. But the first one, let's change the font size. It's going to be to RAM. We need here text transform, uppercase. Also in some space between the letters. Let's set it to point to ram. Next, we need color. I'm just going to be 777. So here we have the first span elements inside the data item. Duplicate this code, change the number. Here, F child to than the font-family is going to be. Can it sans-serif? Then we need font-size to be 20 RAM. Get rid of tax transform. Also, we don't need that spacing. Let's put the color I'm going to use right column. And besides that, I'm going to use line height. Let's 321. Okay? So as you can see, the data items are customized. They look pretty nice. And now we have to write some JavaScript. I'm going to select a couple of different variables. First one is going to be start, which will be false by default. Then I'm going to select data. I'm in the section element. Besides that, we need to select numbers using querySelector all method. And as the class name, I'm going to pass here Num. After that, I'm going to create a function start count. Let's insert here parameter elements. Then we need to create variable which is going to be max. And actually it will be the value from the data attribute which we placed here in the HTML file. Next, I'm going to create a variable called count. And I'm going to use setInterval method. Now we have to increase the contents of the elements by one using increment operator, the plus, plus. Then IF statements in which we have to check if content of the elements is equal to max, which is the value from the attribute. If it's true, then we have to clear the interval as the interval. I'm going to place here five milliseconds. Also we need IF statement here in order to define the scroll event. I mean, if window the scroll why is greater than or equal to data off the top -300 pixels? Then again, we need if statements in which we have to pass Boolean value start with NOT operator, and then we have to loop through the numbers using for each array helper. We have to call the function start count using numb parameter. And then we have to set start Boolean value to true. Alright? We have to fix that little problem here. We need text's content. So as you can see, the Counters work fine. Now if Y reload the page and it's called down, reach to the Data Section, then the numbers will count immediately. So here it is. Okay, so that's it. Let's move on to the next lecture. 38. Project 4 - Create and Customize the Footer of the Website: Alright, so now it's time to move on and sturdy Create the last part of the Project, which is coming to be a Footer. The Footer is going to be simple one. Let's insert new comments for the Footer. Then I'm going to open HTML5 footer tag, in which we need DIV tag with the class name Footer. Social media. I'm going to institute Font Awesome icons. I mean the social media Font Awesome icons. Let's grab this code from here and paste it down here inside the development. Next, I'm going to open H1 heading element with the text. Contact me. Also, we need here a link. It's going to be and Smith at design.com, some Tammy email address. After that, I'm going to open a paragraph with class copyright, in which we need some copyright text. Copyright followed by the copyright sign. Then we need 2023, all rights reserved. Standard copyright texts. And also I'm going to institute made by code and Create, which will be placed in the span. Okay, So that's it. All the elements are created for the Footer. Now, we have to go ahead and Style them using CSS. Let's Institute your comments for the Footer. Then I'm going to select footer tag. Let's set with 200 per cent. Then we need height. It's going to be 50. You put height. Also am going to use Flexbox. Let's change direction, make it a column. And also I'm going to use justify-content center in order to send to the items horizontally and vertically using align items center. Okay, so here we have the elements aligned nicely. Next, I'm going to select social media, the wrapper. Let's use again flux books. Then we need margin at the bottom to be three RAM. Next I'm going to Customize the icons. I mean the I elements. Let's start with 25 RAM. Then we need height to be five RAM. We're going to create the circles. So I'm going to change the background color. Let's use 262626. Also. Make the element rounded using border-radius which present. Okay, next, I'm going to use flexbox in order to center the icons inside the circles using justify-content center and align items. Center. Also, let's create some space using margin 0.1 RAM on the left and right sides. Next I'm going to change the font size. It's going to be to run. Also change the color. Use here 777. Alright, so here we have social media icons. They look nice. Next I'm going to take care of the H1 heading and let's change the font size. It's going to be full RAM. Then I'm going to use color white. Also. Create some space between the letters. Let's set it to point to ramp. Then we need margin at the bottom to run. So the heading looks pretty nice. Then we have to take care of the link element and set font size to, to run also change the color. Use here, D, D, D. Then we need margin at the bottom. Let's make it tan RAM. So here we have the link element. Finally, we have to take care of the paragraph. So that's selected using copyright. Change the font size. It's going to be 1.6 RAM than we need color to be CCC. Next, I'm going to select span elements, which is placed inside the paragraph. Let's change the font family. It's going to be counted san-serif. And then I'm going to change the font size. It's going to be to run. Also we need here color. Be read. Came cell that sits above the Footer. It looks pretty nice. And actually with the project we are done. The only thing that I have to do is to make it responsive to different screen sizes. 39. Project 4 - Make the Project Responsive: Alright, so we have finished creating all the sections of this project, and now it's time to make the project responsive to different screen sizes. I'm going to inspect the page and switch to the responsive mode. So we have to find the breakpoints on which we have to make some changes for the Project. Can see on smaller screen sizes, some of the parts of the project are messed up, so we have to take care of that. Let's go back to the CSS file. And first of all, I'm going to institute comments for the responsive mode. Then I'm going to create new CSS media query, in which I'm going to specify max-width as 1,500 pixels. So first of all, let's decrease the font size of the HTML element. Let's make it 55 per cent because it will make all the elements smaller. Actually, we have to take care of the rectangle to need to change its position. Let's select Rectangle Tool and set my position to -15%. Actually, I think all other sections look good. So we can find another breakpoint. So the next breakpoint is going to be 1,300 pixels. Let's Create new CSS media query and specify here the max-width as 1,300 pixels. First of all, let's decrease the font size again for the HTML element. I'm going to set it to 50%. So again, the elements became smaller. Next, I'm going to take care of the About section that's all about left and set its width to 35 per cent. As for the about right, I'm going to set its width to 65%. So now the About section looks good. Next, I'm going to take care of the portfolio. I'm only works. Let's start with tonight's per cent. So now we have better results. Also, I'm going to take care of the data section. Let's set width of data leads to 70%, right? So I think that's it. Let's check the Navigation. Everything looks fine. Let's go ahead and find the next breakpoint. So the next breakpoint, I think it's going to be 1,100 pixels. Let's Create new CSS media query. Set max-width to 1,100 pixels. Again, I'm going to decrease the font size of the HTML elements. Let's 30 to 45%. Next I'm going to take here of the About Section. Select About right H1 heading elements and change the font size. It's going to be 15 RAM. Also, I'm going to change the two position we need here, -18 RAM. Then I'm going to duplicate this code. Select H, three heading elements. The font size to 3.5 RAM. As polytope position is going to be minus nine ramp. Okay, so now the About section looks nice. Next, I'm going to take care of the data section. Let's select data list span element. In this case, the second span element. Let's set font size to 16 RAM. So now we have better results And actually we can go ahead and find the next breakpoint. So I think that the next breakpoint is going to be 900 pixels. Let's Create new CSS media query and specify here the max-width as 900 pixels. Let's go ahead and select rectangle one. I'm going to set Luck position to -40 run. Then let's go ahead and select rectangle two. It's going to be set right position to -25 per cent. Then I'm going to select designer and set its position to 15 ramp, I'm in the left position. Then we need here Menu icon. Let's change right position is going to be 15 RAM. So now we have better results. Let's take care of the Navigation, which right now doesn't look quite good. So I'm going to select Navigation left setup with 250 per cent. Then I'm going to select the right side and set its width to 50 per cent as well. Alright, so right now, the Navigation doesn't look good. Again, let's select H1 heading elements, which is placed on the right side. Let's use Transform. Translate Y. I'm going to move it. Sorry, we need here translate X and Y. Let's use -50 per cent. And also I'm going to use position relative. Next, we need to set with 200 per cent. Also let's align text center. After that, I'm going to select Navigation least. Let's move it using Transform, Translate X -50%, and then use again text-align center. Next, I'm going to take care of the About section. Let's select About left and height eight using display none. Next we need about right, and we have to set width to 100%. Now, the About section looks good and also the Navigation looks nice. Okay. So let's move on and take care of the right-side of the About section heading element. Let's set left position to 50 per cent. Also, we need to center it using Transform Translate X -50 per cent. Next, we have to take care of the second heading, h3 heading element. Let's change its lag position is going to be 35%. Now, everything looks nice. Next, I'm going to select Info and set its left position to 50%. Now, so we need centroid using Transform Translate X -30%. Okay? After that, I'm going to take care of this Services Section. Let's select Services list and set its width to 90%. Next, let's take care of the portfolio. I'm going select works and set its width to 100%. Also, I'm going to select Work Info and set its width to 50 per cent. I think. It looks nice. And actually, with this breakpoint, we are done. Next, we have to find the next breakpoint, which I think it's going to be 700 pixels So let's go ahead and create new CSS media query. And specify here the max-width as 700 pixels. At first, let's decrease the font size for the HTML elements. I'm going to make it 40 per cent. Next, I'm going to select designer and set its left position to eight RAM. And also we need Menu icon. It's right position. It's going to be atrium as well. Alright. We need to take care of the slides. I mean the second heading. So let's select H1 heading element and decrease the font size, make it five RAM. So now it looks pretty nice. Next we have to work on the Services section. So let's go ahead and select Services. Change the height is going to be 90, viewport height. So we need to select Services, list and change the direction of the flexbox. Let's make it column. And also, we need to align items center. So the items are placed vertically, but we need some space between the items. So let's use margin, bottom with value. Three round. Alright? So I think that's it about this breakpoint. And we have to take care of the last breakpoint. So let's go ahead and create a new CSS media query. Max width is going to be 500 pixels. Let's select the rectangle one and change the lag position. It's going to be -70%. Then we need a rectangle to change its right position. I'm going to set it to -50 per cent. So they look nice. Next I'm going to take care of the Navigation. Let's go ahead and select Navigation left and make it hidden. And now we have to align the right side properly. So let's select enough, right, and set its width to 100%. Now, the items are placed in center of the Navigation. Alright. Next we have to take care of the portfolio. Let's select Work and assigned to the align items center. Also, you need here Work image. I'm going to set its width to 60%. Next I'm going to select Work Info and make it hidden. Let's check the projects. So now I think we have much better results. Next, I'm going to take care of the data items. I mean, the second item, year span element. Let's change font size, make it 12 ramp. Alright, so I think everything is ready and the project is responsive to all different screen sizes. I hope you enjoyed this project and learn something new. So let's move on and build the next project. 40. Project 5 - Preview: Hi and welcome to our next project. In this section, we're going to be building a website about coffee house. The project will consist of a couple of different parts and will be full of modern looking designs and functionalities. Let's go ahead and describe the Website. We will start with a Navigation which is fixed at the top side of the page. Once we scroll down, it will change its background nicely. After the Navigation will work on the Banner, which has a Slideshow, we're going to use one of the plug-ins called swipe, that goes. As you can see, the Slideshow works automatically. But besides that, you can use those controllers. And also you can drag the slides with a mouse. Okay, Next we have an About Section with some info. This section is followed by a Menu. After that, we have some data with Animated Counters and with some nice over effects. The next section will be about the customers we have here the Customers opinions placed by Koch nicely. Next comes the Contact section, where you can contact the house or reserve a table. And finally, we have here a sample Footer. The project is responsive to different screen sizes. If I inspect the page, switch to the responsive mode and check the project four different screen sizes. You will find that the project is Responsive and it looks nice on average, different screen sizes. Again, like the other projects, this one is created for extra large screen size two. I'm in this coincides with 1920 pixels in width antenna at pixels of height. So if you're using a relatively smaller screen size, then during the lectures, you should switch to the responsive mode and specify the width and height like so. Otherwise, the project won't look good on smaller screen size until we make it responsive. So please take it into account. Alright, so we're ready to start building the project. Let's move on. 41. Project 5 - Create and Style Navigation: Alright, so it's time to start to build the projects. I'm going to open folder in VS Code. And then I'm going to create our working files for HTML, CSS, and also for JavaScript. Then let's go ahead and open index.html file and create basic HTML document. First of all, let's go ahead and change the title. It's going to be coffee house. Then I'm going to link Files. Let's open script tag and specify the name of the file and the source attribute. Then I'm going to open the Project Browser. Next, let's grab some links. I mean, link for Font Awesome icons, because we're going to use those icons throughout the project. Let's open link tag and paste the CDN in the H reference attribute. Let's place the editor and the browser side-by-side. Like so. Next, I'm going to visit the Google Fonts website because we're going to use some Google Fonts. And the project. Let's go ahead and search for Google font called great wipes. Let's select this tile. Next, I'm going to search for another Google font, which is Poppins. Select a couple of different styles. Then copy the link and paste it in the head element. After that, I'm going to grab the link force wiper dot JS because we are going to use this plug-in throughout the project. So let's grab this link, paste it in the head element. And besides that, we need to grab the JavaScript link and we have to paste it above the screen. Torture. Yes. Alright, so we're ready to start. Let's insert comments for the container. Next, I'm going to open DIV tag with a class container. Then we need comments for the Navigation. Let's open enough TOC with a class name navbar. Going to insert your DIV tag, which is going to be a logo. Inside the logo, I'm going to open a tag with the class is a phase solid as a mug Saltzer. And besides that, we need logo text. I'm in the development in which I have span tag with the test coffee and then another span house. That's it about the logo. Next I'm going to create the Navigation. Least, let's insert you link elements. We're just going to be home. Let's duplicate link couple of times, then change the text. The second one is going to be Menu. Then we'll have Blog about. Also. We have here sharp. Then Contact. Besides that, I'm going to insert another link which will have a Font Awesome icon with the class is a phase solid FA, caught shopping. Actually, the icon is not visible. So we have to fix that. There's a problem. Alright, so now everything works fine. Next, I'm going to take care of the Landing. I'm in the Header of the Website. Let's insert new comments and then open Section element with a class name Landing. We need here and deep elements, which is going to be Banner, in which I'm going to open h3 heading element with the class main heading. The text is going to be welcome. And also we need another heading is going to be H1, with the text amazing Taste and beautiful place. Next we need paragraph with some dummy text. And also I'm going to insert your buttons with the class name Banner BTN. And also we need here Banner BTN one. Let's insert your order. Now. I'm going to specify the type which is going to be button. And we need here the second one with the class name Banner between two. For the text. It's going to be View menu. Right after that, I'm going to take care of the Slideshow. We need here DIV tag with the class swipe, in which I'm going to insert swipe or wrapper. And also we need here second class name mice wiper. Inside this wiper wrapper, I'm going to open Div element, which is going to be swiped per slide. And then I'm going to place you image. Let's select the image from the images folder. It's going to be image1. Then I'm going to duplicate, slide twice and change the names of the image we need image to an image three. Next, I'm going to take you of the pagination. I mean the controllers. After the Swiffer, we need Landing Contact. Let's Institute U DIV tag with the class details in which I'm going to open, I took the class is a solid fa phone. Then we need here deep in which I'm going to insert span element with some dummy phone number. Next we need another span in which we're going to insert some dummy text. Alright, let's duplicate this. Development. Change the Font Awesome icon. The second one is going to be fa, location dot. Also, let's get rid of those numbers from here. And you should some dummy address. The second span element. I'm going to ensued against them. Fake dummy location. After that, Let's change the third icon is going to be if a clock, Let's get rid of numbers and use it to you. Text open Monday, Friday. As far the second span element and it's going to be the text. Please. Join us. We're available 08:00 A.M. to 09:00 P.M. Alright, Actually, that's it. About the HTML markup. I'm going to start to write the CSS. Let's Institute comments for default styles. Then I'm going to select every element using an asterisk. And as usual, I'm going to set margin and padding both of them to zero. Next, I'm going to set box-sizing border-box. Then we need to get rid off default text decoration, also the outline. And then I'm going to set the font family for every elements to Poppins, san-serif. And besides that, we need to change the font size of the HTML element because we're going to use RAM as the measurement unit. Let's set font size to 62.5 per cent. So those default styles are applied to the elements. Next, I'm going to insert comments for the container. Then let's select Development for the class container defined the way it's going to be 100% and the height will be 100% as well. Also, I'm going to institute you comments for the Landing. Because right now I'm going to hide the Banner at all using display none. Alright? Next, I'm going to insert the comments for the Navigation. Let's go ahead and select navbar. Set its width 200 per cent. For the height, it's going to be 10 g. Next, we need here the position is going to be fixed. Then the two position will be zero. As for the left position, it's going to be zero as well. Right now, the navbar is not feasible. Let's fix that using the index property value 100. So we have here the Navigation. Next, let's use flexbox. We need to justify content space evenly and also align items center in order to center the items vertically. Next, I'm going to create border at the bottom with the value is 0.1, run solid, and the color is going to be RGBA, white color with a lower opacity. So here we have the border and also the items are aligned nicely. Next I'm going to select Logo. Let's use display flex. Then we need to align items center. And also let's change the cursor, make it a pointer. Right? After that, I'm going to take care of the I elements. I mean the icon. Let's set font size to foreign. Also, I'm going to use here webkit text, stroke. Let's set it to 0.1 RAM, and the color is going to be white. Then I'm going to set the color to transparent. And also we need margin on the right side. Let's set it to one ran. So we have here the icon with texts stroke. Then I'm going to select logo text and use Flexbox. Let's change the direction. We need to place the items in the column. And also we need to align text from the center. So we have here both span elements. Next, I'm going to select the first span element using F child selector. Let's set font size to run. So we need you to transform text into uppercase. Then let's create some space between the letters, but 32.1 round. And also change the color. I'm going to use white color. So as you can see, the first span element looks pretty nice. Let's duplicate this code. Change the nth child number. It's going to be to change the font size. I'm going to sell it to one point for RAM. And also, let's change the color, make it E. Besides that, we need margin at the top. Let's add it to -0.7 ramp. So the logo looks pretty nice. Next, I'm going to take care of the Navigation. Let's select link element. Set font size to one point for RAM. Then we need text transform to be uppercase. Also, let's set color to E and we need margin on the right side. It's going to be three ramp. Alright? After that, I'm going to create some space between the letters. Let's set it to point to RAM. Next, I'm going to select a almond with hover. On hover, I'm going to change the color. It's going to be C4, nine. P63. Also use transition for smooth effect. So once we hover over the Navigation item, standard, color will be changed. I'm going to select the first Navigation item because I want to set its color by default to the color that we used here. Next, I'm going to take care of the last item of the least. I mean, the shopping cart. Let's its font size. Make it 1.8 RAM. So the icon became bigger. And then I'm going to use after pseudo elements. Let's set content to one. So I'm going to change the width. It's going to be 2.5 RAM than the height will be 2.5 RAM as well. I'm going to change background color. Let's use here color FFC 107. It's going to be in yellow color. Then I'm going to set position to absolute positioning relative for the parent elements. So we have here after the element, Let's change the position. The two position is going to be -1.5 RAM than we will have left position. It's going to be one RAM. Also. I'm going to make the elements rounded. And then having to take care of the contents. Let's set display to flex. Then use justify-content center and align items. Center. Also, I'm going to change the color. Let's make it 222. And finally, I'm going to change the font size. Let's add it to one point to run. Alright, so that's it about the Navigation. Next, we have to take care of the Landing 42. Project 5 - Create Slideshow with Swiper.js: Alright, so once we're done with the Navigation, now it's time to move on and take care of the Landing. Actually, let's get rid off this, go from here. And select Landing. I'm going to set with 200 per cent. That's fairly high. It's going to be 95. Viewport height. Next, I'm going to select Banner. Let's set position to absolute. Then we need to position relative for the parent element. Next, I'm going to set to position to 20%. So that position is going to be 50%. And in order to center the elements horizontally, we need transform translate X with -50 per cent. So right now the Banner is visible. Let's fix that using the index property value 100. So here we have the Banner. Let's set text in the center using text-align center. And then I'm going to select main heading. Says Bombe family two, great lives. Cursive. Then I'm going to set font size to fall. Ran font weight is going to be 300, and I'm going to change the color. Let's use here is color. Okay, next, let's select Banner, H1 heading elements. So font size to six RAM, then font weight, it's going to be 400. Also, I'm going to transform text into uppercase. Then change the color. It's going to be white. So here we have the heading. I mean, the second heading. Next. I'm going to create some spaces in margin with values to RAM and zero. And also I'm going to change the line height. It's going to be 1.5. And create some space between the letters. Let's set it to point to run. Alright. Next, I'm going to select the paragraph of the Banner. Let's set font size to 1.5 RAM than the font weight is going to be 300. Also, I'm going to change the color, it's going to be white. Then set with 260 RAM. Also, I'm going to use margin with values zero and auto than to RAM and ROM as well. So he will have the paragraph and now we have to create some space between the letters. Let's set it to 0.1 ramp. Right? After that, I'm going to take care of the buttons. Let's select both buttons. Set width to 12 RAM than the height is going to be 5.5 ramp. So I'm going to set course, we'll two pointer. Then. Margin is going to be 0.1 RAM. And we need font-size to be one point for RAM, so the buttons look better. Next, I'm going to select the first button. Change the background color. Use here that golden color than we need border to be. None. Change the color of the text. Make it two to two. So the first button looks pretty nice. Next, I'm going to duplicate this code, change the class name, and Customize the second button. I'm going to make the background color transparent than the border is going to be 0.1 RAM solid. And you see here the color white. As for the color of the text, I'm going to make it white as well. Alright. So both buttons look pretty nice. Let's select first button with hover, I'm going to change background color. Let's make it transparent. And also change the color of the text. Make it golden. Next, I'm going to set border 2.1 RAM, solid, and color is going to be c4963. Let's copy this code. Change the class name So the background color, it's going to be Golden than the color of the texts. You're going to be two to two. So I'm going to use the transition property to make the fact smoother. So if we hover over the parts of them will get this nice and cool effect. After that, I'm going to take care of the slideshow. Let's, let's wiper. Said wait to 100% than the height is going to be 85%. Also, I'm going to select. So I slide followed by the image. Let's set width to 100 per cent. The height is going to be 100%. And also we need to fit the image using objects feed cover. So have you the image with new width and height. Now it's time to write some JavaScript. Let's create a variable. It's going to be swiped. I'm going to use some default ready code for the Slideshow we need to create here. Object news wiper to your class names wiper. Then we need here and other objects with the property auto-play, which will include object as value. We need here, property delay with 4,000 s. Next, we need another property disabled on interaction. It's going to be false. Then I'm going to create here new property with a value, fate, I mean Effect Fade. Then we need loop, which is going to be true. Also. Going to institute pagination. Here, an object element is going to be swipe or I'm in the class name, swipe or pagination. Next, we need property called clickable, just going to be true. So now, as you can see, the Slideshow works fine and the pagination works fine as well. Alright, Next I'm going to Customize the circles down below. I mean the pagination controllers. We need select span dot, swipe or pagination bullet. Let's set width to two RAM than the height is going to be. To ram as well. We need opacity to be one. Next I'm going to sit margin on the right side, 1.5 RAM. We need here important to apply this code. Then background color is going to be AA. So we need here position to be relative. So now the control this look better. Next, I'm going to copy the class name and adhere after pseudo elements. Let's add content to empty. Then we need with to be 2.5 RAM. The height is going to be 2.5 from as well. Then we need Part the rate used to be if it's present because we need to circles. Let's set position to. Absolute. Position is going to be 50%. Net position is going to be 50 per cent as well. And then in order to send to the element perfectly when you transform, translate with values -50% and again, -50 per cent than the background color is going to be transparent. And we need here border points to RAM solid and the color is going to be AA. So now the bullets, I mean, the controllers look pretty nice. Next, I'm going to copy the class name. Let's paste it here. Actually, we need to paste it twice, then get rid off span element from the selector and adhere active. So once the bullet is active, we need to change the background color. Let's add it to white. So I'm going to duplicate this code and Adhere after pseudo elements. So once the bullet is active, we have to change the border for the after pseudo elements. I mean, the color of the border. It's going to be white as well. So now it's can see everything works fine and with this wiper Slideshow, we are done. Next, I'm going to select Landing Contact, Set position to absolute. Then to position it's going to be H 5%. Left position is going to be zero. Also, I'm going to set width to 100%. And the height is going to be 15. Viewport height. Change the background color. I'm going to use here black color. So here we have the bottom side of the Landing, I mean the Landing Contact. Let's use flexbox. We need here justify content with values paste evenly. We need even space between the flex items and also we have to align items in the center vertically. Next, let's change the color, make it white. So here we have the details. Actually we are missing here the Font Awesome icon. Let's check the code. We need here location. So now, now the icon is visible. Next, I'm going to select details. Use again flux books. So now the icon and the text elements are placed side-by-side. Then I'm going to select the I elements, set font size to, to run than the color is going to be. Colton. Also, I'm going to create some space on the right side. Let's hit margin right to, to run. So as you can see, the icons, look nice. Next, I'm going to select development inside the details. Let's set display to flex. Then we need to change the direction. Let's make it column. Now we have to customize the text elements. Let's go ahead and select the first path element using F child selector. I'm going to change the font size. It's going to be 1.61. Then we need to change the color. Let's make it white. And also I'm going to use margin bottom. Let's set it to 0.5 for N. So the first span elements look nice. Let's go ahead and duplicate this code. Change the nth child selector is going to be two. And we have to change the font size. Let's set it to 1.4 and also change the color, make it BBB and gets rid of margin, bottom. Set width to 2M. Alright, so that's it. About the Landing. Everything looks great. Let's move on. 43. Project 5 - Create and Customize About Section: Alright, so let's move on and start to create the next section of our project, which is going to be an About section. I'm going to interview new comments for the About section. And then let's open section tag with the class name about. I'm going to instruct your DIV tag in which we will have Font Awesome icon with the class names fa, solid, a mobile. Next, we need here H1 heading elements with the text easy to order. Then the next element is going to be a paragraph with dummy text. Let's go ahead and duplicate Development twice, and then change the class name. Your fa truck. The atrial Hannigan, what it's going to be fastest delivery. As far as this third item, we need here, a mug hot. Let's for the H1 element, I'm going to insert you quality coffee. Okay, So that's it about the HTML markup. Now, it's time to won't end, start to write some CSS. I'm going to insert new comments for the About section. Then I'm going to select Section element with a class about. Let's set width to 100% than the height is going to be 60 viewport height. Let's change the background color. I'm going to use here. Color golden. Then we need to use Flexbox. Let's Elon items in the center and also use justify-content center. So it's can see we have here elements aligned nicely. Next, I'm going to select development inside the About section element, which is going to be through to RAM. Then I'm going to set the height is going to be 35 ran. Also, I'm going to create some space using margin with the values zero or three ramp and then align text in the center. Next I'm going to use again Flexbox. Change the direction, it's going to be column. Also, we need to align items and center and justify content space evenly. So now we have much better results and we have two Style the elements. Let's start with the fast mic and let's set its width to nine R&amp than the height is going to be ten RAM. Let's change the font size. It's going to be full RAM. Also, I'm going to use you Web Kit attack stroke with a values point to RAM, and the color is going to be 282727. Besides that, we have to define the color, make it transparent. Alright, so the Font Awesome icons, look nice. Next, let's use border 0.1 RAM, solid. The color to eight to seven to seven. Then I'm going to send to the Font Awesome icons using Flexbox, justify-content center and align items center as well. Okay, So that's it. Well, the Font Awesome icons. Next, I'm going to select H1 heading element. Let's set font size two to ramp. Then I'm going to default weight to 400. Transform text into uppercase. Then change the color. I'm going to use you the same color. Okay, So your headings look nice and I will have to customize the paragraph. Let's set the font size. It's going to be 1.5 RAM. Then we need here font weight. It's going to be at 300. Change the color, make it to H7 to seven. So that's it. The About section looks nice and now we can move on. 44. Project 5 - Build Menu Section: Alright, so with the About section, we are done and now we have to move on. And so two Create the next section, which is going to be the Menu. I'm going to insert your new comments for the new section. And then as usual, I'm going to open section tag with a class Menu. Then inside this section element, I'm going to insert a DIV tag, which is going to be Menu left. The left side of this section. We need here h3 heading element with the class main heading. Let's institute these cover. Then we need H1 heading elements. I'm just going to be our Menu. Next. I'm going to insert here the paragraph with a dummy text. And also we need here a button. It will have class Menu, BTN. Also we need to the type attribute. We're just going to be Bateson. For the text. I'm going to Institute here. View Full Menu. Right after the development. I'm going to create another one, which is going to be Menu, right? We need here Menu right? Images. Let's open DIV tag, which is going to be Menu Image wrapper. This element will include four different images. Let's select the first one from the images folder. It's going to be image four. Then I'm going to duplicate this code three times and change the names of the images. We need image five, image six, and then image seven. Okay, So actually, that's it about the HTML markup. Now have to move on and start to write the CSS. Let's institute new comments for the Menu. Then I'm going to select the Section elements and set its width and height. The width is going to be hundred percent. As for the height, I'm going to make it 70 viewport height. Next, I'm going to select Menu Image wrapper in order to make the image is smaller. Let's set with 225 RAM and the height is going to be 25 RAM. Next, I'm going to select the images and set width to 100% and height 100%. Also, we need object's speed to be covered. Now it's can see we have relatively smaller images. Let's set the background for the menu. I'm going to use linear gradient function with RGBA color. I'm in the black color with 0.9 opacity. And again we need RGBA, black color 0.8, I mean the opacity. Next I'm going to set the image as the background. We need to select your image eight. And also we need a position to be center and no-repeat. Next, I'm going to set the background size to cover. So we have here the image as the background of this section. Next, I'm going to use flexbox. We need to align items in the center. So we have here the items images placed in the center. Next, let's go ahead and select the left side. Set width to 50%. Also, I'm going to select Menu right, and set its width to 50 per cent as well. Alright, after that, I'm going to select Menu, right? Images, set its width to 60 RAM. And then I'm going to use flexbox. We need to use flex wrap with a value rap in order to wrap the images and align them. Like so. Let's create some space between the images using margin. Let's set it to, to RAM. Also, we need cursor pointer for the image itself. After that, I'm going to Take you off the left side. We need text-align center. And also I'm going to sit margin on the right side, 23 RAM. So we need margin-left for the Menu, right? The value three REM as well. Okay? Actually, text-align should be right and not the center here. Next, I'm going to select Menu left, followed by the main heading. Let's set font size to six RAM. So the heading looks pretty nice. Next I'm going to select Menu left followed by the H1 heading element. Let's set font size to six RAM. Also in font-weight to be 300. Then I'm going to transform text into uppercase. Next, I'm going to change the color of the heading. It's going to be white. Also, I'm going to set margin top to minus full RAM. So we have here the H1 heading element. Next, I'm going to select the paragraph and customize it. First of all, let's change the font size. It's going to be one point for ran. Next, I'm going to change the color of the paragraph. Let's set it to 777. This is a light gray color. Next, we're going to wait to be 50 RAM. And also I'm going to sit margin to RAM and zero, then foreign. And I'll row. Okay? So the paragraph looks good. The only thing that we need here is line-height, the value 1.2. Okay? After that, I'm going to take you of the next one. We're just going to be Menu button. Let's set width to 15 ran. And the height is going to be 5.5 RAM. We need background color, which is going to be transparent. Then I'm going to set border 2.1 RAM. Solid. The color, it's going to be golden. So we need color of the tax to be called an as well. Then change the font size. It's going to be 1.3 RAM. I'm going to transform text into uppercase. Then set the cursor to point. Okay, So the button and actual the left side of this section looks pretty nice. Next, I'm going to use a hover effect. Let's change the background color. I'm going to set it to Golden. And also I'm going to change the color of the texts. Let's set it to 222 and then use transition for the smooth effect. So we have here nice over effect. Now we have to take care of the right side. I'm going to create hover effect for the images as well. So let's select Menu Image wrapper with hover and then followed by the image selector, we need transform scale with a value 1.3. Also, we need transition. Once we hover, send, the images should widen. Let's use overflow hidden to hide the parts of the images. Now we have here really nice effect and actually with the Menu section, we are done. So let's move on. 45. Project 5 - Create and Style Data Section with Animated Counters: Alright, so once we're done with the Menu Section, now it's time to move on and create the next section. We're just going to be the data. Let's insert new comments for the new section. In this section we will have Animated Counters. Let's open section tag with the class data. Then we need to insert U DIV tag, which will include icon wrapper. Let's open it back with the class names. If a solid, a mug hot. Next, we need here Style element with the class name. I can BG. Then we'll have another span element with the class numb, in which we need an attribute called data. Well, let's insert you some numbers. Let's say 350. As for the default value, I'm going to pass here zero. Then we'll have another span with a class info in which I'm going to instead coffee branches. Let's duplicate development three times and then change the numbers. And also we need to change the contents of the info. Let's insert your number of awards. Then the next element we will have 25, 40 as well. This panel is going to be happy customers. For the last item I'm going to insert here, let's say 750 as well. This final amount is going to be stuck. Alright, so actually, that's it about the HTML markup. Let's go ahead and start to customize this section. I'm going to institute new comments for the data. Then I'm going to select Section element and set with two 100%. The height is going to be 50 viewport height. Then we need background to be linear gradient. I'm going to use here RGBA value. I'm in the black color with opacity point for. And also we need here and other RGBA value. Again, black color with the opacity 0.3. Next we need to select image as the background. It's going to be image seven. Then we have to specify the position is going to be center. And also we need no repeat. And we have defined background size as cover. Okay, so here we have the background image. Next, let's use flexbox. I'm going to use justify-content center and align items center in the center of the content. Here we have the flex items. Next, I'm going to select elements. Is it Data Section with is going to be 25 RAM, the height will be 30. Ran. Next I'm going to use again Flexbox. Let's change the direction. It's going to be column. And also we need to align items and the center. Then I'm going to use justify content will be values Pacioli. We need to create even space between the flex items. Next I'm going to select I can wrapper and set its width as a Tran. Then the height is going to be eight RAM as well. Next we need coarser to be pointer. And now we have to select icon background. I'm going to use display block. And then let's set width to 100%. We need high to be 100% as well. Then I'm going to use border. It's going to be 0.1 RAM solid and the color will be golden. So we have here I can Background. Next. We need to select elements. That's the position to absolute position relative for the parent element, which is icon wrapper. Next, I'm going to set top position to 50%. Then we need Left position to be 50 per cent as well. And in order to center the element perfectly, we need transform translate. Will the values -50 per cent and again -50 per cent. Now the I conserve perfectly centered inside the boxes. Next, I'm going to increase the font size. It's going to be rerun. Also. We need here again, a webkit text stroke with a value is point to RAM and the golden color. And also we need to set the color is transparent. So now we have nice coffee icons. Let's go ahead and select icon wrapper with the hover, followed by the icon background. On hover, I'm going to change the background color. It's going to be golden. And also we need to rotate the elements according to the Z direction. And the value is going to be 135 degrees. Also. We need transition for smooth effect. And it's going to be for the background. So once we hover over the boxes, they will rotate nicely. We need to display the icons. Let's use the index with the value 100. Actually, the icons are not still visible. Actually, the problem is that we have here the same color for the text stroke. So once we hover over the icon wrapper, we have to change the color of the I element as well. So let's grab this code and change the color is going to be to a C7. C7. Also we need here transition for the icon as well. So now the problem should fix. Okay, that's it. Everything works fine and we have here print, nice and cool effect. Okay, next, we need to select numb and its font size to three ramp. Then I'm going to change the color is going to be golden. So we have here the most right now we have zeros by default. Then I'm going to select info. It's going to be, the font size is going to be 1.8 RAM than the color will be 999. So we have here the span elements, and now we have to write some JavaScript. Let's Create Variable menu. I'm going to select it using query selector method. Let's specify here the class name. Next we need variable nums. Have to select the numbers using query selector all method. Next we need the variable called start, which will be false by default. It's going to be the Boolean value. And now we have to create a function start count. Let's insert here parameter elements. Now we have two Create variable max, which is going to be the value from the dataset. I mean the value from the data, well, attributes, which we used here in the HTML element, we need to grab those numbers and store them in the max variable. Next we need count, which is going to be the set interval function. So we need to define the text's content. And actually we have to increase it by one using increment operator. And then we need IF statement in which we have to define the following. The textContent. If the textContent equals max, then we should clear the integral. And we have to pass here the count variable. As for the interval, it's going to be 2000 divided by the nonce. Next we have to add event listener to the window object with the scroll event, and we have to pass here the callback function. We need to start count once we scroll down. So we need here IF statement in which we have to define the following window. Scroll Y is greater than or equal to Menu dot offset top. Once we reach the Menu Section, we have to start the count. Then we need if statements in which we have to pass not start, which is the Boolean value. And then we have to loop through the numbers. So now we have to call this.com function and we have to pass the parameter none. Next we have to set the Boolean value, start as true. Okay, so once we scroll down AND Counters will start. Alright, so now we have to take care of the navbar. We need to make it sticky once we scroll down. So we need to use these scroll event here. Let's Create new variable is going to be now far. I'm going to select it using querySelector method. Let's specify here the class name now four. Then we need now for dot class list. And we have to add to the navbar class Tiki using toggle method. Also, we need to pass year window dot scroll. Y is greater than zero. Next, we need to select class Tiki, followed by the navbar. And we have to change the height. It's going to be eight RAM. And also we need to change the background color. I'm going to set it to black. And also we need here transition all points 5 s. So once we scroll down, then we will get these nice and cool effect. Actually, we need to fix a tiny problem. The navbar ended up behind the Landing, so we need the index with a higher value. Okay, so now the problem is fixed. And with this section, we're done 46. Project 5 - Build Customers Section: So in the previous lecture we have created a Data Section, I mean the Animated data Counters. And now we have to move on. And so to work on the next section, which is going to be a testimonial section. Let's insert your new comments. Customers. I will call this Section Customers. Then I'm going to open Section type with the class Customers in which we need a Development, which is going to be Customers Banner. Inside the development, I'm going to open h3 heading tag with the class main heading and with the text testimony. Next we need H1 heading elements. And it's going to be Customers. Say, next we need to paragraph with a dummy text. After that, I'm going to open DIV tag, which is going to be clients. And then we need another deep, which will be client itself. Let's Institute paragraph with a dummy text. Next we need deep elements, which going to be wrapper of the image. Let's select Image client one. Then we need span element for the name of the client. Okay, I'm going to duplicate client couple of times. And then let's go ahead and change the images. And also we need to change the text, dummy text. Change the name. It's going to be Nick Brown. Next renewed decline three. And the name is going to be David Jones. Next I'm going to change the text, also the image name, the name of the client. And finally, we need client five. Name is going to be Mary Brown. Alright, so that's it. The HTML markup is ready. Let's go ahead and start to write some CSS. Let's insert new comments for the customers. Then I'm going to select Section element. Let's set width to 100%. Then the height is going to be 70 viewport height. Then we need background with linear gradient function in which I'm going to insert RGBA value. It's going to be a black color with opacity 0.9. Next we need again RGBA value with a black color with opacity 0.8. Next I'm going to select the image from the images folder. It's going to be image eight. Let's define the position. It's going to be center. And also we need no-repeat. Next I'm going to set the background size property to cover. Okay, so here we have the background image. Next we have to take care of the images because they are two bigger. Let's set width to five from. The height is going to be five from as well. Next we need object phi to be covered. Also make them around and using border-radius 50 per cent. Now we have you smaller images. Then I'm going to select Customers Banner, set its position to absolute. Then we positioned relative for the parent element, which is a Section. Let's setup position is going to be ten per cent and the left position should be 50 per cent and just center the elements horizontal using Transform Translate X with the value -50%. Also we need here text-align center. So here we have the Banner, which right now it's not quite visible. Let's go ahead and select Main heading. I'm going to set font size to six RAM than we need. Customers Banner, followed by the H1 heading element, let's say font size to six Rome as well. And also we need font weight to be 300. We need to transform text into uppercase and also change the color. It's going to be white. So now the heading is visible and it looks pretty nice. Next, let's set margin top two minus four round. Okay, So both headings look pretty nice. I'm going to sit position to relative for the main heading. And then we need the index with a higher value. Okay, so now we have better results. Next, I'm going to take care of the paragraph inside the Customers Banner. Let's add ons is to 1.6 RAM. And the color is going to be 777. Also, we need margin top to be full ran. Next, we need to set the line height to one point to here we have the Paragraph. Next, I'm going to take care of the client's position to absolute. Then we need bottom position to be zero. And also we need display flex with align items. Flex and we have to place the items at the bottom of the section. Next, I'm going to select client. Let's set with two 25%. Now we need height to be 25 RAM. Next I'm going to set the background color to Golden. I'm going to create some space using padding. Let's set it to, to run. Then change the color, make it white. So it will have the clients. Actually, I think something's wrong here. Let's check the HTML file. So we have the first clients. We need to move it and place it here as the first client in the list. So now everything looks fine. Next, let's go ahead and select clients. With F child selector, we need second client, Let's say hi to one RAM. Then I'm going to duplicate this code, change the number. It's going to be four. Let's set the height to 21 RAM. Now we have different heights for the clients. Next, I'm going to select even items. Let's set opacity 2.9. So now we have better result. I'm going to grab this code and paste it down here. And I'm going to add here margin on the right side. Let's set it to, to run in order to create some space between the image and the name. Next, I'm going to select client paragraph. Let's set font size to 1.6 RAM than margin. At the bottom is going to be to run. The paragraphs. Look nice. Next I'm going to select client give and sit position to absolute. Then we need position relative for the parent element, which is a client. Let's set put some position to RAM. Also, we need Flexbox. We need to align items in the center vertically. So now the images and the names are aligned nicely. Now I have to take care of the name. Select span elements, font size to one point for RAM. And also we need text transform to be uppercase. So that's it. This section looks pretty nice. Let's move on to the next lecture. 47. Project 5 - Create and Style Contact Section and Footer of the Website: Alright, so once we're done with the customer section, now, we have to move on and create the last part of the project. We have to create the Contact Section followed by the Footer. So let's insert new comments for the concept. And then I'm going to insert Section element with the class name Contact. I'm going to insert here DIV tag, which is going to be Contact left, the left side of this section. Then we need Contact, right? In which I'm going to insert formed elements. Formed elements will have H1 heading, tag, book a table. Then we will have input group in which I'm going to insert input element with the type text and with a placeholder attribute, which is going to be firstname. Next minute. Similar input element with lastName. Let's duplicate input-group. Change the type of the input element. It's going to be email. And we need here email address. Next, we need here phone. Then I'm going to duplicate again input-group. Let's get rid off the first input element and place your text area with placeholder attribute. We're just going to be message. Also. I'm going to get rid of the second input element and place Here button with a type button. Then we need class attribute, Contact BGN. And I'm going to place your appointment. Alright, so that's it about the HTML markup. I'm going to start right to CSS. Let's insert comments for the contact section. I'm going to select Section elements. Defined width. It's going to be 100%, the height, it's going to be 60 viewport height. Next, we need back on color. It's going to be black. So I'm going to use flexbox. We need to align elements using Flexbox. Next I'm going to select the left side and set its width to 50 per cent. And height is going to be 100 per cent. And I'm going to change background. Let's use linear gradient function. With RGBA value. It's going to be black color with opacity 0.5. Next we need the similar color. The opacity is going to be 0.4. Also, we need to select image from the images folder as the background. The image is going to be image one. Then again, we need Center. I'm in the position and now repeat. And also we need here background size to be covered. We have here the image on the left side of the Contact Section as background. Next I'm going to select Contact, right? Let's sell it to it to 50%. The height is going to be 100%. Next I'm going to use again Flexbox. You justify contents center. And also we need to align items to be centered as well. So it's can see the content is placed in the center of the right side of the Contact Section. Next I'm going to select Contact right? H1 heading element. Let's increase the font size. It's going to be full RAM. Then I'm going to set font weight to 300 and change the color. It's going to be white. Next I'm going to create space using margin would the value is 003 RAM and to RAM. So he will have the heading. After that, I'm going to select input-group. Let's use again Flexbox Next, I'm going to select input group followed by the input element. And also we need here a text area. We need some similar styles for both elements. Set width to 30 ramp, then the height is going to be five-prime. I'm going to set padding to one RAM, one RAM than to run and zero. So I'm going to create some space using margin to run. Background color will be transparent. I'm going to get rid of border and then use border at the bottom. Will the values. One RAM, solid, and the color is going to be RGBA to five to 55 to 55. And the opacity 0.1, 0.3. Actually, we have some problem here. Yeah, we need to 0.1 RAM. So now the border looks nice. Next I'm going to change the color is going to be white. After that, I'm going to select text area separately. We need to disable resizing function. So I'm going to set height to five RAM. We need to get rid of the scroll bar. For that, I'm going to use text area, then Web Kit, scroll bar. And we need here display none. So it's considered the scroll bar is hidden. Okay, next I'm going to take care of the placeholder attribute for the inputs and for the text area as well. Let's set color to white. Alright, so now the inputs look pretty nice. Let's go ahead and take care of the pattern. Select it, and first of all, set its width. It's going to be. So to run. Next we need height, which is going to be six RAM. I'm going to change the background color. Let's use golden. Next. I'm going to change the color of the text. That's 322277. Also, we need margin, one RAM to run. Next. We need border to be none. So I'm going to set cursor to pointer. So the button looks pretty nice. And actually we can move on and start to work on the Footer. Let's insert new comments than use HTML5 footer tag, in which I'm going to place paragraph for the copyright text. I'm going to use copyright sign. And then all rights reserved. 2023. Made by code and Create. Let's go ahead and Style the Footer. We need new comments for Footer. Then I'm going to select Footer element and set width to 100%. The height is going to be ten round. So we need background color to be 262626. Next we need flexbox. We need to center the elements using justify-content center and align items. Center can see the contents is centered perfectly. Let's go ahead and select Paragraph. Change the font size. It's going to be 1.6 RAM. And the color, it's going to be 999. Alright, so that's it about the Footer and the Contact Section. Both of them looks nice. Let's move on and Make the Project Responsive 48. Project 5 - Make the Project Responsive: Alright, so all these sections of the project are created. And now the only thing that have to do is to make the project responsive to different screen sizes. I'm going to inspect the page and switch to the responsive mode. We need to find the breakpoint on which we have to make the changes using CSS media queries. So I think the first breakpoint on which we have to change the project is going to be 1,500 pixels. First I'm going to insert new comments for the responsive mode. And then we have to create CSS media query as the max width. I'm going to specify here 1,500 pixels. So the first thing that I'm going to do is to decrease the font size of the HTML element. Let's make it 55%. It will make all the elements smaller. So I think everything looks nice. And now we can move on and find the next breakpoint. I think the next breakpoint is going to be 1,300 pixels. Let's copy this code and change the max-width, make it 1,300 pixels. I'm going to change the font size of the HTML element. Let's make it 50 per cent. Alright, so now I think the project looks good. Let's check it. I think everything looks fine and we can move on and find the next breakpoint. So the next breakpoint, in my opinion, should be 1,100 pixels. Let's go ahead and create new CSS media query. Set max width to 1,100 pixels. I'm going to select HTML element and again, decrease the font size, make it 45 per cent. Next, I'm going to select Menu Image wrapper and change the width is going to be 18 RAM. As for the height, I'm going to set it to 18 RAM as well. So now we have to take care of the Customers Section. Let's select Customers and set height as 120, viewport height on. So I'm going to select clients. Let's change the direction, make it column. I'm going to place the items vertically. Next we need clients. Let's set its width to 100%. As for the height is going to be 115 RAM. So I think we have to change the size of the second client. So let's set with, so let's set height to 15 RAM. Let's do the same for the fourth item. So now the Customers Section looks pretty nice. Next, we have to take care of the Contact Section. Let's go ahead and select Contact left and make it hidden. Now we have to align the elements in the center. Let's select Contact, right? I'm going to set its width to 100%. Now. The element is placed in the center. Next we need input-group, followed by the input element. And also we need to select text area. And also we need bottom. Let's set width to 40 ramp. Now I think everything looks nice. And with this break point, we're done. Let's move on and Find the next one. So the next breakpoint, I think it's going to be 900 pixels. Let's go ahead and create new CSS media query. And set max-width as 900 pixels. I'm going to select Landing Contact followed by the development. And then we need span. In this case, the second span element. Let's set display to none. Next, I'm going to select Menu right? And make it hidden. After that, I'm going to select Menu left and set its width to 100%. Also, I'm going to line texts in the center and we need to get rid of margin on the right side. We need to take care of the paragraph. So let's go ahead and select Menu left P and certain margin to run. And then oral then for rent and again ADL. So now this section looks pretty nice. Next, I'm going to take care of the Customers Section. Let's go ahead and select Customers and set height to 140 viewport height. So now I think it looks better. Next I'm going to select Customers H1 heading garments and set its width to 50 ramp. Actually, I think we need to decrease the height. Let's 321. Okay. Alright, so next we have to move on and Customize the paragraph. Let's go ahead and select Customers Banner, followed by the P selector. Let's set with 260 ram. Oh no, I think it looks better. After that. I'm going to select clients. Let's set height to 18 ramp. Actually, I'm going to copy this code and change the heights for the second and fourth items. Okay, so now I think this section looks nice. Let's add here margin auto. So I'm going to set the height back to 140. Okay, that's it. Finally, with the customer section, we're done. Let's move on and take care of the conflict section. I'm going to select input-group and set the flex direction to column. Next. We need to select input tag, followed by the text area. And also we need button. Let's set with 260 ramp. And also I'm going to select Contact Section and increase the height of 30 to 90 viewport height. So now we have nice results. Actually, with these breakpoint, we're done. Let's move on and find the next one. So I think the next breakpoint, It's going to be 600 pixels. Let's go ahead and create new CSS media query and set max width to 600 pixels. I'm going to select HTML and decrease the font size. Let's make it 35 per cent. After that, I'm going to select Landing Contact and set height to 19 ramp. Also, I'm going to change the direction. Let's make it column. I'm going to place the items vertically. Next we need a line items center. Okay. After that, I'm going to take care of the details. I mean, the development set with 220 ramp. Now I think the items are placed better. Next, we need to take care of the About section. Let's increase the height, Make it at viewport height. And also I'm going to change direction. We need to place the items vertically. Next, I'm going to select The Belmont in the About section and set its width to 60 RAM. Also, I'm going to sit margin to zero than to run on the left and right sides. Alright. After that, Let's go ahead and take care of the Customers Section. We have here big space. I'm going to the height to one viewport height. Now I think this section looks nice. And actually, with this break point, we're done. Let's move on and take care of the last breakpoints. I'm going to create new CSS media query. And then I'm going to set max-width to 450 pixels. Select Logo and make it. So next thing that I'm going to do is to select input-group, followed by the input text area and also the button. Change the width, make it 50 ramp. Okay. The only thing then I'm going to do is to create some space. And the Customers Section, Let's set height to one-twenty viewport height. Okay. I think that's it. Everything looks pretty nice. And we can say that the project is Responsive. Actually, with this project, we have finished our course. I hope you enjoyed it. Learn some new stuff. I wish you all the best. Good Luck.