Build 30 Web Projects with HTML, CSS, and JavaScript (2024)

1. Introduction: Hello and welcome to the course. I hope that this will be your right course and you will enjoy the projects that we will be building throughout this course. As you already know, we're going to create 30 different modern and creative projects. All those projects will be built based on the three core technologies of front end web development, HTML, CSS, and Javascript. I would like to mention one thing. As I said, the projects will be created based on HTML, CSS, and Javascript. You should have a strong understanding of HTML and CSS and a basic knowledge of Javascript in order to follow the lectures and not get confused. The projects will be full of different modern techniques and tricks. You will be able to learn about how to create nice and beautiful effects and animations, which you can use as inspiration to develop and customize your own portfolio. As I mentioned, we will be building 30 projects. They are independent templates so you don't have to go through them in order. You can build any of the projects you want from the list. It's absolutely up to you. Some of the projects are simple ones, but also you will meet some advanced projects as well. We included all the levels that the developer needs in the course. We will be building projects like navigation menus, slide shows, website headers, cards, web apps and other interesting and creative projects. I'm sure you will enjoy them. I think you will get a lot of practice and experience in front end web development in which HTML, CSS, and Javascript are a must. I would like to mention another thing as well. The projects are created for extra large screen size. If you are using relatively smaller screen size, then I recommend to switch to the responsive mode. Set the width and height as 1920 pixels and 1080 pixels, and follow the lectures with this resolution. Otherwise, the projects might not look good on smaller screen size. And you will have trouble to follow the lectures, please take it into account. All right, so let's move on and get started. 2. Setup: Hello and welcome to the course. We're delighted to have you here, and we're confident you'll find this course enjoyable. Before we start diving into our project, let's first prepare our working environment. If you're already set up and ready to write code, you can skip this video and jump straight into the project. However, if you are not prepared yet, that's perfectly fine. We'll guide you through setting up some essential tools throughout this course. There are two main tools you will need, A modern web browser and a text editor. For our web browser, I'll be using Google Chrome, but I also recommend Mozilla, Firefox. You likely already have these browsers, but let's quickly go over how to download them, just in case to get Google Chrome, simply visit this URL and download the browser. The installation process is straightforward, so we won't spend much time on it. For Mozilla, Firefox, you can obtain it from this URL. Both links will be included with this lecture for your convenience. All right, now let's talk about the text editor. We will be using visual studio code which is one of the best text editors available today. However, you're welcome to use your preferred text editor if you have one. It's entirely up to you still. I recommend giving Visual Studio code a. Try to download Visual Studio code, Visit this website and select the version for your operating system, Windows, Mac or Linux. The installation process for Visual studio code is also straightforward. You should not encounter any issues. Once you've installed both of these tools, you'll be all set to get started with the course. Let's dive right in. 3. Project - Spotify Music App - Part 1: Hello and welcome to our very first project in this course. In this video, we're going to start to build a Spotify music app with HTML, CSS, and Javascript. Before we jump right into building the project, I'm going to describe it. As you can see, we have here a Spotify music app, which consists of a couple of different parts. At the top side of the application, you can see some icons with the name of the application. Then we have here a cover which shows us the song name and also the artist. Down below, you can see the song details and the song name an artist. Then we have a progress bar with current time of the song and the song duration. Then you can see here the controls of the player. Down below, we have here some icons with some text. If I click the play button, then the music will start to play. As you can see, the progress bar is updating as well as the current time of the song. Then if I click again the play button, the music will stop playing. We have here next and previous buttons. If I click them, then we will switch to the next and previous songs. Everything works perfectly. All right, so if I click anywhere on the progress bar, then the music will be rewinded and also the current time will be updated. All right, so everything works perfectly. You can see here nice and cool shadow effects. It is called CSS New Morphism. Throughout this tutorial, you'll learn about how to create the CSS new morphism effects. Okay, let's get started. I've created a new folder on the desktop called Spotify Music app, in which I have another folder. Music It includes three different songs. Let's go ahead and open this folder in VS code and then create our working files for HDML. Then we need file for CSS. Also, I'm going to create file for Java script. Let's open HTML file and create the basic HTML documents. I'm going to place here an exclamation mark, then hit top or Enter. Here we go. We have here the basic HTML structure, the basic HTML elements. The first thing that I'm going to do is to change the title. It's going to be Spotify. Music Up then I'm going to link the CSS and chavs files. I'm going to open link tag. Then I'm going to specify here the path of the file. Next, I'm going to open script tag. In the source attribute, I'm going to insert the final name script JS. Then we need attribute called defer. This attribute tells the browser to execute the script after the HTML content has been passed. This means that the script will be loaded asynchronously while the HTML content is being passed, but it won't interrupt the parsing of HTML. Actually, you can link the Esk file from here. I mean, you can open script tag right above the closing body tag and then specify here the source alphibute. But in this case I'm going to use this technique. All right, after that, let's go ahead and open the project in the browser using live server, you can click either here or you can click the button. Go Live. Our project is live in the browser. I'm going to place the browser and the editor side by side, like so. Then I'm going to bring in other links as well. We're going to use phone som icons throughout this project, and also I'm going to use Google phones. Let's go ahead and search for phone awesome CDN JS. Then I'm going to click here in order to copy the URL. Next, I'm going to open link tag and then paste the copied CDM here in the H reference attribute. All right, after that, I'm going to search for Google phones. Let's visit the website. I'm going to search for phones called delicious. Hand drone. Let's click the phone. Then we need get phones. After that, I'm going to select other phones. It's going to be signica negative. We need here negative. Let's click Get Phone. Then we need to get ambit code here. We have both phones. I'm going to copy those links and place them here in the head element. All right, so now we can start to write the HTML markup. I'm going to create development which is going to be the container, it will wrap the entire content. Next, we have another development with the class name player which will include a couple of different parts. The first part is going to be player top, I mean the top side of the player in which I'm going to insert button with PTN. Also we need tight button. Then inside the button element, I'm going to insert font nosomicon. We need I elements with the classes, a solid row left. Then I'm going to insert your pane elements with the text Spotify Music app. Next we need another phone, some icon. Actually, I'm going to copy this buttoon from here. Let's paste it here. I'm going to change the icon. In this case, we need a solid ellipsis. Here we have two patterns with the text. Next I'm going to create the player body. I'm in the next part of our player. I'm going to open tag with the class name player body. In which I'm going to open another div with the class name current song. Then we need to create cover. As you remember, the cover consists of two span elements. The first one is going to be the artist. Let's sit here, King Canyon. Then I'm going to open another span and it's going to be song name Malland. Actually those are some weird random songs. I chose them because they are copyright free. And I did that in order to avoid any copyright claims. If you don't like them, that's not a problem, don't pay attention to those songs. All right, next I'm going to create song info. We need developments with the class name, song info. Then we need another, it's going to be song details. Then I'm going to insert your spinal elements with the class name. Song name. It's going to be Holand. Let's duplicate this code, change the class name. It's going to be song. Actually no details but artist. And we need here King Canyon. All right. After that, I'm going to insert your phonosomicon. It's going to be a solid heart. Then I'm going to take care of the progress of the song. I mean, I'm going to create development. It's going to be song duration in which I'm going to insert another. It's going to be song time. Then we have song progress. Then I'm going to Odio. We need folder name Music In which I'm going to select the first song, this one. Then I'm going to add here class name Odio. Okay. After that, I'm going to take of the current time and the duration of the song. I'm going to insert here developments with the class name time in which I'm going to insert two span elements. For now, I'm going to insert zero. Then again zero. Let's duplicate these elements. After that, we need to take care of the controls. I'm going to insert your development with the class name controls. Then I'm going to insert your button with the class, actually we can grab the button from here. I'm going to change the class names for the phone, as icon, nada shuffle. Let's duplicate this button five times. Actually four times, because overall we need five different buttons. The second one is going to be button for previous song. I'm going to add here a new class pre PTN. As for the elements, we need solid backward. Then we have button. Let's add here class name, play. Polls also change the elements. It's going to be a solid FA. Play. Next we have boson for the next song we need here. Next, PTN. As for the element, it's going to be a solid FA forward. Finally, I'm going to change here the element, it's going to be a solid FA. Repeat. All right, so as you can see, all five icons are displayed here. Next I'm going to take here of the bottom side of the application. I mean we need to create those two icons with the text. Let's go ahead and ins here development with the class player. Surely we need player in which I'm going to insert I elements. It's going to be a solid A. Music Then I'm going to insert your Span elements with the text. Listen to Spotify. Music Finally, we need another element with the classes, a solid A list. All right, let's sit about the HTML markup. We have here lots of different elements. Hopefully everything is correct. We will see that throughout the project. All right, that's sit about the HTML markup. All the elements are created, and now we have to start to style the project for that. Let's move on to the next lecture. 4. Project - Spotify Music App - Part 2: All right, in the last lecture we have created the HTML markup for the player, and now we have to write some CSS. The first thing that I'm going to do is to create some default styles for every element. I'm going to select every element using an asterisk. Then I'm going to define margin and padding. Let's set both of them to zero. Next, I'm going to define box sizing property. And it's going to be equal to border box. It means that every elements within height will include the padding and border. After that, I'm going to set out line to none. Also, let's define phone family. It's going to be the phones that we selected from Google phones. It is sinica negative sensory. All right. So as you can see, all the default tiles are applied to the elements. Next, I'm going to define the phone size of the HTML element. Throughout this project, I'm going to use Ram as a measurement unit. Right now, one M is equal to 16 pixels, because by default, the phone size of the HTML element is equal to 16 pixels. I want to convert one Ram to ten pixels. Therefore, we have to decrease the phone size of the HTML element. Let's set it to 62.5% In this case, one M will be equal to ten pixels. As you can see, the size of the elements became smaller. After that, I'm going to take of the container which wraps the entire content of our project. First of all, let's define with and height. The width is going to be 100% As for the height, I'm going to set it to 100 viewport height. It means that it will take up 100% of the height of the viewpoint. Next, I'm going to change the background color. I'm going to use linear gradient. Therefore, we need here back round and not background color, or you can use background image. Let's use linear gradient. The first color is going to be 313131. As for the second color, I'm going to use 151515. Okay. So as you can see we have here the gradient effect. Next, I'm going to place the contents in the center of the page. I'm going to do that using CSS Flex box. Let's set display to flex. Then we need Justify content center and also a line item center. As you can see, the content is placed in the center. After that, let's go ahead and select Player that's defined within height. The width is going to be 35 Ram. Then I'm going to set height to 700 Ram. Also change actually not 700 but 70 m. Then I'm going to change the background. Let's use again linear gradient function. The direction of the color transition is going to be to right. Then I'm going to specify the colors. The first one is going to be 313234. As for the second color, I'm going to set it 223031. Okay, so here we have the player. I'm going to create some shadow effect. Let's use box shadow. The values will be zero. It specifies the horizontal offset of the shadow. In this case, it's zero, meaning there is no horizontal offset. The shadow will be directly behind the element. Next, I'm going to pass one Ram. This value specifies the vertical off set of the shadow. It is set to one Ram, which means that shadow will be shifted downward by a distance equal to the elements font size multiplied by one. The next value is going to be five Ram. This value defines the blur radius of the shadow. A larger value will create a more blurred shadow effect. And finally, we need the color. It's going to be black color with the opacity 0.4 Okay, So here we have the shadow effect, which I think looks pretty nice. Next I'm going to make the player rounded using border radius. Let's set it to the Ram. Then I'm going to align the content using flex box. I'm going to place the elements vertically. First of all, we need Display flex. Then we have to change the direction it's going to be. Column next set, putting to three Ram on all four sides. Okay, that's it for the player right now. Next I'm going to take care of the top side of the player, therefore I'm going to select the player top. Let's set width to 100% Then I'm going to align the elements using flex book. We need display. Then I'm going to create some space between the flex items using justify content. Space between. Finally, we need to align items in the center vertically. Okay, so the elements are aligned. Next, I'm going to take care of the buttons. Let's go ahead and select Player BTN. It is a common class name for every button the project. First of all, let's define within height. I'm going to set with 24 Rams, it's going to be form as well. Then I'm going to set border 2.2 solid. And the color is going to be RGBA. We need here white color, 25053 times, and then the opacity is going to be 0.1 After that, I'm going to make the button surrounded using border radius. Let's set it to 50% Then I'm going to change the background color. Let's set it to two, B to C to E. After that I'm going to change the color. Let's set color to a 89b that we need to create the shadow effect. As I said in the beginning of the tutorial, we're going to use CSS, new morphism effects, and we're going to create it using box shadow. I'm going to insert here a couple of different values and then I will explain what they do. I'm going to pass here 0.5 Ram, then again 0.5 Ram, then we need two Ram, then -0.1 Ram. Then we need color. It's going to be RGB, a black color with the opacity 0.5 This is the first shadow. Next we need the second one. It's going to be -0.4 Ram. Then again -0.4 Ram. Then we will have two Ram, -0.1 Ram as the color. I'm going to use white color. The opacity is going to be 0.2 Okay, As you can see, we have here this nice and cool shadow effect. Let me explain what those values do. This is the first part of the shadow. 0.5 Ram is the horizontal offset of the shadow. It means that the shadow will be shifted to the right by 0.5 times the elements font size. Next we have again 0.5. It is a vertical offset of the shadow. It means that the shadow will be shifted downwards by 0.5 times the element's font size. Next we have two Ram, and it is a blur radius of the shadow. It indicates a relatively large blur effect -0.1 Ram. It is a spread radius of the shadow. A negative value will cause the shadow to contract. And then we have the color. We have the second part of the shadow again, the first value -0.4 Ram. It is a horizontal offset of the shadow. It is a negative value, and it means that the shadow will be shifted to the left by 0.4 times the elements font size. Next we have the vertical offset of the shadow. It is again a negative value. Then we have blur radius and then spread radius. It is set to -0.1 Ram. It's a negative value and it causes the shadow to contract. All right, so at the end of the day, we have this nice and cool effect. This kind of effect in CSS is called CSS New Morphism. It is implemented using box shadows and light dark background colors to create the illusion of elements being slightly extruded from the background. Finally, I'm going to add cursor pointer. All right. After that I'm going to create the click effect for the buttons. I'm going to select Player PTN, followed by the Actives with the class. I'm going to use transform translate Y with the value 0.2 Ram. Once we click the button, then we'll get this nice and cool clicking effect. After that, I'm going to take care of this panelment in the top side of the player. Let's go ahead and select Player Top, followed by the panelment. Let's go ahead and increase the phone size. It's going to be 1.3 and then change the color. I'm going to use this color here. 89b. All right, that sits about the top side. Let's move on to the player body. So let's go ahead and select player body. First of all, I'm going to define within heights. The width is going to be 100% As for the height, I'm going to set 250, 5% Then I'm going to align elements using Flex box. We need Display Flex. Then I'm going to place the content in the center. We need Justify Content Center and Align items center. All right, in the center, we have here the song name and also the artist of the song. We're going to create here the cover. I mean this part. Let's go ahead and select current song. Let's define within height. I'm going to set both of them to 18 Ram. Then I'm going to change border. It's going to be 0.5 Ram solid. And the color is going to be RGP, a white color with the opacity 0.15 Then I'm going to make the element rounded. I'm going to set border radius to 50% Finally, we're going to create the same new morphis effect using box shadow. Actually I'm going to grab box shadow from here and then just change the values we need here. 0.6 Ram, then four Ram, then we need here -0.1 Ram as the color. It's going to be RGB, a black color with the opacity 0.9 As for the second part we need here, -0.6 Ram, then four Ram. Then we need point -0.2 As for the color, we need white color with the opacity 0.4 As you can see, we have here this nice and cool shadow effect. After that, I'm going to select cover. I'm in the inner part of this element. Let's set within height to 100% Then I'm going to change the background color. It's going to be 101112. And also we need to border radius 50% All right, after that, I'm going to take care of the span elements. Let's go ahead and select color with span. Let's change phone family. In this case, I'm going to use the second phone, which is Delicious hand, it's going to be cursive. Then I'm going to define the position for both span elements. It's going to be absolute. And also we need to change the display property. It's going to be block. All right, after that, I'm going to customize each spin element separately. So let's go ahead and select the first one. We need cover followed by the spin element. I'm going to use child selector. We need the first spin element. Let's change the color. It's going to be D. Then I'm going to change the phone size. Let's 30 to 1.6 Also, I'm going to change the position. The top position is going to be 20% As for the left position, I'm going to set to 30% Actually, we need position relative for the parent element because we need to align the elements according to the parent elements. Let's set position relative to current song. Now as you can see, the element is placed correctly. Let's go ahead and duplicate this code. Change the child select, we need here two, then the color is going to be white. The phone size will be 2.5 Ram. Then we need to position with the value of 35%. As for the left position, I'm going to set it to 20% Besides that I'm going to add with, it's going to be ten Ram. Finally, we need texture line to be center. All right, the cover looks pretty nice. The only thing that I'm going to do is to rotate slightly. This element I'm going to add here, transform rotate Z with the value -15 degrees. All right, let's it about the cover next, we have to take here of the song in fall. Let's select song in Fall. First of all, define width. It's going to be 100% Then we need to align elements using flex book. I'm going to set display to, then I'm going to create some space between the flex items, justify content space between. Also we need align items center, it will center the element vertically. And then I'm going to create some space at the bottom using margin. Bottom three. All right, After that, I'm going to select song details. Let's change the direction of the alignment of the elements using flex books. We need flex direction to be column. As you can see now the song details are placed vertically on top of each other. Next, I'm going to select Song name. Let's set the phone size to two. Run then we need color. It's going to be white. Also, I'm going to make the phone lighter. Let's set phone weight to 300. Okay. After that, I'm going to take you of the song artist. And actually let's duplicate this code. We need your song artist. I'm going to set font size to 1.2 Ram. Then the color is going to be this color here. As for the font weight, I'm going to get rid of it. All right, let's it about the song details. Next we're going to take care of the heart, this phone also here. So let's go ahead and select Song Info, followed by the elements. We need. Font size to be two M. Then I'm going to change the background. Let's use background with linear gradient. If we take a look at the finished project, you will see that we have here linear gradient background. I'm going to change the direction of the color. Transition is going to be two rights. Then we need colors. The first one will be 37. For the second one, I'm going to use 62 BC 68. Right now, the background of the phontosomicon is changed, and actually we need to change the color of the phonosomicon itself. For that, I'm going to use the following properties. We need web ket background clip, it's going to be text. Besides that, I'm going to use web ket text color with value, transparent. Okay. Now the background of the phones icon is changed and it looks pretty nice. After that, I'm going to take care of the time. Let's go ahead and select some time. Let's set with to 100% Then I'm going to set height to 0.5. The background color is going to be 000d. Next I'm going to set border radius 2.5 Ram. Also, we need to create some space at the bottom using margin, bottom one Ram. Then we need to create some shadow effects. Let's set shadow 2.2 Ram, then 0.2 Ram, then again 0.2 Ram. The color is going to be RGBA white color with the Opco 0.1 Finally change the coursked pointer. All right, so as you can see, the progress bar is created. Next we have to take care of the sunk progress. Let's select this element. First of all, I'm going to change the position. It's going to be absolute. Then we need to position relative for the parent elements. Then we need top and left properties, both of them equal to zero. Change the width, it's going to be 30% Then we need height which is going to be 100% Then we need to change the background. Let's use again linear gradient function. Actually, we need the same values from this function. Let's grab them and paste them here. As you can see, we have here the progress of the song. The only thing that I have to do is to make it rounded using border radius. Let's set it 2.5 run. All right, let's it about this, some progress. Next we have to take care of the time. Let's select this element. I'm going to set width to 100% Then I'm going to align the elements using flex books. We need to display flex and we have to create some space between the flex items using justify content. Space between also. Let's create some space at the bottom using margin. Bottom three, run okay, the time and the song duration are aligned. Next we have to take care of those pan elements. Select time followed by the pan. I'm going to increase the phone size. Let's say 21 point Ram. As for the color, I'm going to use the gray color. This one here. As you can see, the song time and the song duration are customized. After that, I'm going to take care of the controls, those patterns here. Let's go ahead and select controls. I'm going to set with 100% Then we need to align them using flex box. Let's set this play to flex, create some space using justify content space between. Also, we need to align items in the center. As you can see, the buttons are aligned. After that, I'm going to customize the Play Pose button. As you can see, it is different. Let's go ahead and select Play Pose. I'm going to set Witten height to five fram because it's going to be slightly bigger than the other buttons. Let's set height to five fram. Then I'm going to change the background. Actually we need the same values. Let's grab the linear grading function. As you can see, the button looks nice. I'm going to change the color of the icon. It's going to be white. Finally, we need to change the box Show. Actually, I'm going to grab the box shadow from here. Let's change the values we need 0.5 Ram, then I'm going to set this value to two Ram, 0.1 Ram. The opacity of the color is going to be 0.8 Next we will have here 0.82 I'm going to change this value, it's going to be 0.1 Ram. Actually we need here box shadow and not the box sizing. Okay, for the play button, we have different shadow because the button is slightly bigger. Next I'm going to take care of the footer of the player. So let's go ahead and select Player Footer set with to 100% Next I'm going to align items using Flex book. We need to display flex then we need to justify content space between because we need to create space between the items. Then I'm going to set align items center. And finally we need margin top O. Okay? In order to see clearly why do we need this property, let's comment this out. As you can see, we need to place the footer down. That's why I use here margin top, auto. We need this element because we aligned the contents of the entire player using Flexbox. We need margin top to place the footer down below. Okay, after that, I'm going to take care of the icons in the foot. Let's select elements, increase the phone size. It's going to be 1.8 Ram and also change the color. Let's use here this gray color. The icons look good. After that, I'm going to take care of this panelement. Let's duplicate this code, change the selector we need here pan elements. The font size will be 1.2 e. As for the color, we need here, the same color. All right, that sits the player is customized, it looks pretty nice. And now we have to make it work. For that, let's move on to the next lecture. 5. Project - Spotify Music App - Part 3: All right, once the player is customized and styled, now we have to add some Javascript to our project. The first thing that I'm going to do is to create an array where we will store the data of the songs. I'm going to create the variable and call it song data. It's going to be an array. I'm going to insert here three different objects. Each object will include the name of the song, the artist, and also the source of the audio file. I'm going to insert an object in which I'm going to create three different properties. The first one is going to be name, I'm going to add here Holland. Then we will have Artist, it's going to be King Canyon. Then we will have the source property in which I'm going to insert the source of the audiophile we need here, Mahu Land, then King Canyon. Actually it is the name of the song. If we check the music folder, you will see that we have here this name. I'm going to adhere the extension of the song. It's going to be MP three. Okay, let's see about the first object. We'll have three of them. Let's duplicate it twice. The name of the second song is going to be something like per sale. Then the artist is going to be silent partner. Again, those are some weird songs. Next we need source, and it's going to be para or Psi silent partner. As for the third song, it's going to be the truth, it's the name. Then we will have the artist and it's going to be Domini. Finally, we need source artist Domini. All right, so let's sit about our song data. Next I'm going to create a couple of different variables. We have to select lots of different elements. I'm going to create the first variable, it's going to be container. Let's go ahead and select container using document query select method. Let's specify here the class name, container. Overall, we will have here 12 different variables and elements. I'm going to duplicate this line of code 11 times. Okay, so let's go ahead and change the names of the variables and also the class names. The second one is going to be song name. We need your class name name. Then we'll have song artist change. We need the song artist Next we will have cover, change the class name cover. Then the next variable is going to be play pulse bottom. Let's call the variable play pulse BTN. Then in said here, class name, play poet. Variable is going to be previous bottom. Let's call it pre BTN. And select the variable, I mean the elements with the class name. Pre BTN, next, next, PTM. Let's change the class name. After that, I'm going to select Odio. It has class name Odio. Then the next variable is going to be song time. Let's change the C. We need her son time. Then we will have song progress. Change the class song progress. Then we'll have cover artist and cover name. Let's change the name of the variable we need name and it's going to be cover. Then we need to select span elements. And I'm going to use here select, let's select actually cover name is the second span element we need here two. Let's actually duplicate this code and get rid of this line. Change the name, I mean the name of the variable, it's going to be cover artist. And then we need here first span. Let's check the index of the HTM of file and make sure that we are correct here. We have cover, the first one is actually, the first one is artist and then we have the name. Let's go to the script, the GS file. We have cover name. It is the second one. Okay, it's correct. Let's go ahead and create one more variable, and it's going to be song index. Let's the cleared variable using let keyword song index. And I'm going to set it to zero. All right, after that, I'm going to create a function. This function will take an index as an argument. It will retrieve the song data from song data array Based on the index, it will update various elements in the UI with information about the currently loaded song. It will also set the source attribute of the audio element to the corresponding song file. Let's go ahead and create function. I'm going to call it load song. As I said, we need here parameter, let's call it index. We have to update the UI. We have to define the name and artist of the cover and also the name and artist of the song. And also we have to define the source of the audio file. I'm going to insert here, cover name, text content. I'm going to retrieve the data from the song data array we need here, song data. Then we have to specify index. Then we need name, which is the first property in the object. Let's duplicate this code three times here. Cover artist. I'm going to change name property into artist. Then we have to define song name. Finally, we need song artist. Okay, again, actually we need here artist. We have defined cover name, cover artist, song name, and song artist. Now we have to define the source of the audio file. I'm going to add here audio RC. It will be equal to template literal. We need folder called music. Then we have to specify here the source from the objects that we have here. I'm going to insert song data. Then we need to specify index. Then we need RC property. And finally the extension of the audio file P three. Okay, that's it about this function, we have to call this function once the window will be loaded. I'm going to attach an event listener to the window object with the event called load. Let's insert here a callback function. Then call function load song as the arguments I'm going to interfere. Song index, which we have created here. All right, again, this function takes an index as an argument. Retrieves the song data from the song data array based on that index. And updates various elements in the UI with information about the currently loaded song. The information, I mean the name of the song, the artist of the song, and also the source of the audio file. All right, after that, I'm going to create another function in order to play the song. Let's go ahead and create variable and call it play song. Because I said it's going to be a function. This function will control the playback of the audio element. It will add a class to the container element to indicate that the song is playing. Also, it will change the play post button icon and start playback of the audio. We need here container class list. I'm going to add here class name pose. Then we need to access to the play on this icon here. It is a child of the button elements. This one as you can see, we have here button elements and then inside the button element, you can see the element. We have to access that element. Therefore, we need Play Button First Element Child. Then we need to change the class name. It's going to be a solid FA post. Finally, in order to play this song, we have to use one of the built in functions in Javascript called play. We need audio play again, this function I mean play Song function controls the playback of the audio element. It adds a class to the container element to indicate that the song is playing. And also it changes the phone icon of the play pose button. Finally, it plays the song. All right, In the same way we have to manage the song, I'm going to duplicate this code. We need pose song function. Then I'm going to change d method into remove. Also, we need to change the phone atomic. In this case we need play instead of pose. Finally, we need to post the audio using pose method. All right, in order to make those functions work, we have to add an event listener to the play button. And we have to call those two functions. I'm going to elect play post BTN with add event listener. And we had specified here the event click. Then we need callback function which will be executed once we click the button. Once we click the button, we have to check if the container has the pose class. If it does, it means the song is currently playing. We need to call **** function. Otherwise, we need to call play song to start playing the song. All right, we need if statement in which we have to check if the container contains class. If it does, then we have to pose the song. We have to call this function. If this condition is false, then we need L statement and we have to song function. All right, let's go ahead and check the results. If we click the play put button, then the icon will be changed, but as you can hear, the song is not playing. Actually, let's check the console. We have here an error saying that the element has no supported sources. Script JS 49 line. We have problem with the source. Actually, the source looks correct. We have the problem here. Well, as you see, we have here the extension MP three in the source property. And therefore, we no longer need here this extension because it will double. Let's get rid of it. Now I think the song will play. Let's click the button. As you can see, the song is playing and also the icon is changed. All right, so everything works fine so far. After that, I'm going to take you off the cover. I'm going to rotate it while the music is playing. I'm going to add here cover class list. I'm going to add a new class to the cover. Let's call it rotate. We need to remove this class. Once we pose the song, we need to adhere the same line with remove method. Then I'm going to go to the styled CSS file and find cover here. I'm going to create an animation. I'm going to use CSS key frames with the name cover rotate. I'm going to define the rotation of the element at 0% I'm going to set transform rotate to zero. Then at 100% we need transform rotate Z with a value 360 degrees. Then I'm going to select class rotate, which we added to the cover. I'm going to define animation. The name is going to be cover rotate. Then we need the duration. It's going to be 10 seconds as animation is going to be linear and we need to play it infinitely. Okay, Let's play the song. So as you can see, the cover rotates once we pose the song, then it will stop. All right, so everything works perfectly. Next, I'm going to take care of the previous, and forward. Next buttons, we have to make them work. I'm going to start with the previous song. I'm going to create new function. Let's call it pre song play. We need to decrease the value of the song index. For that, I'm going to use decrement operator minus minus next. If the song index is less than zero. If it is, then we have to set song index to the index of the last song in the song data array. We need here if statement in which I'm going to check if song index is less than zero. If it is, then we have to set song index to song data to length minus one. If the song index is less than zero, then we set song index to the index of the last song in the song data array. Next, we have to load song function with song index. Then we have to play song function as well. All right, this function is ready. Next we have to take care of the next song, BTN. I mean, we have to create the similar function for the next song button. Let's duplicate this code, Change The name of the function is going to be next song play. Instead of decrement operator, we need increment operator. Then we need to change the condition of the if statement. Because we have to check if song index is greater than the index of the last song in the song data array. If it is, we need to set song index to zero. I'm going to change the condition here. We need song index to be greater than song data to length minus one. If it is true, then we have to set song index to zero. Then we need those two functions in order to make those functions work. We have to call them once we click the buttons we need here to select pre BTN with event listener, the event is going to be click. And also we need here a book function. But instead of book function, I'm going to insert the function name itself. Song play. Let's duplicate this code and change pre into next. We need here next, Song play. All right, so now both buttons should work. Let's play the song. Then click the previous button. As you can see, the music is switched to the previous song. Both buttons work perfectly. All right. Once the controls work fine. Next we have to take care of the time update of the song. I mean, we have to update the current time, the music duration. Also we have to update the progress bar and so on. All right, the next thing that I'm going to do is to add an event listener to the audio. The event is going to be time update. This event fires continuously as the audio playback position changes. Let's add here callback function. We need to insert here an event object. The next thing that I'm going to do is to extract current time and duration. Let's go ahead and create variable and call it current time. It should be equal to target current time. We are grabbing the current time from the event object, and the event object contains information about the event. In the same way, we have to grab the duration. Let's duplicate this code. The second variable is going to be duration. We have to select duration. Current time retrieves the current playback position of the audio element and it retrieves the value in seconds. The duration retrieves the total duration of the audio file, again in seconds. All right. After that, we have to calculate the width of the progress. I'm going to create a new variable, let's call it current time. With it should be equal to current time divided by duration. And we have to multiply this value by 100. Okay, This line of code calculates the percentage of the total duration that has elapsed based on the current playback position. Now we have to update the width of the progress bar. We need song progress do style width. Then I'm going to use template literals. Let's insert here, current time with. We have to adhere percentage sign. All right, with those two lines, we update the UI. We update the width of the song progress element to reflect the current playback position. This line dynamically says the width of the progress bar element based on the percentage of the audio file that has been played so far as the audio plays. This width is continuously updated, providing a visual indication of the progress of the audio playback. Right now, the width of the progress is set to 30% Let's go ahead and make it zero. Then I'm going to play the song. As you can see, the progress bar I'm in, the width of the progress bar is increasing as the Odio place. All right, so everything works fine. Now we have to update the current time of the song and also the video. Not the video but audio duration. Let's go ahead and create new variables. We need song current time. I'm going to select this Panelementlet's use query selector method. Select time followed by this panelment, we have to use ampchild selector. I'm going to select the first spin element. Then let's duplicate this code. The second variable is going to be some duration. I'm going to change the selector is going to be child two. All right, after that we need to attach a new event listener to the audio we need here audio event listener. The event is going to be loaded data. Let's adhere a covic function. Event listener listens for the loaded data event, which indicates that the browser has loaded the odio data for the odio element. Next, I'm going to create in variable, and it's going to be odio duration. It should be equal to odio duration. Now we are extracting the odio duration. This line of code retrieves the total duration of the audio file loaded in the Odio element, and it gives us the value in seconds. Okay, Next I'm going to create another variable, and it's going to be total minutes. We need to calculate total minutes and seconds. It should be equal to math floor. I'm going to insert here Odio duration divided by 60. That duplicates this line of code. We need total seconds. In this case, we need audio duration modulus 60. All right. The first line calculates the total number of minutes by dividing the total duration by 60 and rounding to the nearest integer. That's why we used here tht floor. As for the second line, it calculates the remaining seconds by taking the remainder when dividing the total duration by 60 and rounding down to the nearest integer. All right, after that, we have to format seconds and we have to use if statement in which we have to check if total seconds is less than ten, then we have to add zero in front of the digit we need here, total seconds. Then I'm going to use template literal, we need zero and then I'm going to insert here total seconds. Again, we check if the total seconds are less than ten. If it is true, then we prefix a zero to the seconds to ensure that the time display format is in minutes and seconds. All right, finally we have to change the text content of the song duration we need here song duration followed by the text content. I'm going to insert here template literals followed by total minutes and total seconds. We need total minutes. Actually we need minutes. Then we need column we have two in total seconds. All right, as you can see, we have here the duration of the song. If we move to other songs, then the song duration will update accordingly. All right, everything works fine. Next we have to take care of the current time of the song. I'm going to create new variables. The first one is going to be current minutes. It should be equal to mouth floor current time divided by 16. Let's duplicate this code. We need current seconds. We have to change division by modulus. The first line calculates the total number of minutes elapsed by dividing the current playback time by 60 and rounding down to the nearest integer. As for the second line, it calculates the remaining seconds by taking the remainder when dividing the current playback time by 60 and rounding down to the nearest integer. This operation ensures that the current seconds variable represents the second portion of the time. Now we have to check again if current seconds is less than ten, we have to do the same thing that we did here. We need to prefix zero to the digit we need current seconds equal to template literal zero, and then again, current seconds. Okay, now we have to format the seconds. I mean, we have to do the similar thing that we did here. Let's add here song, current time text content we have to in current minutes, colon, current seconds. Okay, again, we are updating the UI. We update the text content of the some current time element with the calculated current minutes and current seconds in the format minutes and seconds. This line dynamically says the text content of an element to display the current playback time of the audio file in minutes and seconds. All right, let's go ahead and play the song. As you can see, the current time is not updating. We have a problem somewhere here. Let's check the code. Actually, this code, I mean the code for current minutes and seconds should be outside of this event. Let's place the code here and then check the results. As you can see, the current time is updating for all songs perfectly. All right, so now we have to move on to the last part of our project. I mean, we have to update the progress bar once we click anywhere here, like we have it in the finished project. If we click anywhere on the progress bar, then the music will be rewinded accordingly. All right, so we have to seek to a specific playback position. I'm going to add event listener to the song time. With click event, we need listener click event. And with a callback function, I'm going to insert here event object. Okay, now we have to define the progress with, let's create a new variable. It's going to be progress with. It should be equal to song time client. With, with this line of code, we retrieve the width of the song time element, which represents the total width of the progress bar. Next we have to create another variable, and it's going to be col offset X. I'm going to make it equal to offset X. This line retrieves the horizontal distance from the left edge of the song time element to the point where the user clicked, indicating the position where the user wants to seek. Again, this line of code retrieves horizontal distance from the left edge of the song time element to the point where the user clicked. All right, after that, I'm going to define song duration. Let's create another variable. Actually we need here space. The new variable is going to be song duration. It should be equal to odio duration. After that, we have to define the current time of the Odio. I'm going to add here odio current time. Which should be equal to click offset x divided by progress width. We have to multiply this value to the sun duration. All right, this line of code calculates the desired playback position in the audio file based on the ratio of the clicked off set position within the progress barwidth to the total progress bar width. Then we multiply it by the total duration of the audio. It will set the current time property of the audio element effectively seeking to the desired playback position. Now we have to call the play song function. It will initiate playback of the audio from the newly set playback position. All right, let's go ahead and check the result. If I click, then nothing will happen because we have a mistake. Let's check the console. Fail to set the current time property script JS 1204124 current time. Actually, everything seems to be correct. Let's check other lines we have here. What is that we need here? Dots of set X, so it is a TypoleI'm. Sorry for that. Now I think that everything is correct. Let's check the results. Okay, so everything works perfectly. All right. We are almost done with our project. The only thing that I'm going to do is to handle end of audio playback. Once the song ends, then we have to move to the next song. I'm going to add here emo listener to the audio. The event is going to be ended. Once the music ends, then we have to call next song play function. Let's insert here, next song play. Okay, When the ended event occurs, then we trigger the next song play function, which will load and play the next song in the playlist. Let's check the results. I'm going to rewind the song here. Let's wait for the end. As you can see when the song ended, then it switched to the next song. All right, so everything works fine. And actually we can say that with the project we are done. I hope that you enjoy the project and learn some new stuff. Now it's time to move on in to create our next project. Let's move on to the next lecture. 6. Project - CSS Product Card: All right, so it's time to start to build the project, which is going to be a nicely designed and cool product card. The project will be created based on HTML and CSS. It will be a simple one, but you will learn about how to design the product card in a modern and cool way. The card is placed in the center of the page, which has a nice background. On the left side of the card, we have an image of the headphones. As for the right side, it includes a couple of different elements like headings, paragraphs, the price of the product, and the button to purchase it. Okay, let's sit about the project. Let's go ahead and start to create it. I have created a new folder in which we have images folder. Let's go ahead and open the folder in VS code. Then I'm going to create our working files for HTML which is going to be index HTML and for CSS style Ss. Then I'm going to open index HM file and create the basic HD structure. Let's change the title. It's going to be product card, then I'm going to link the CSS file. Okay, let's go ahead and open the project and the browser. Then I'm going to place the browser and the editor side by side, like so, in order to make our working process simple and more convenient. All right, after that, I'm going to go to the Google Phones website, because we're going to use one of the Google phones throughout the project. Let's visit the website and then search for Google Phone called, can it? I'm going to select a couple of different styles from light to bold phone weights. Then I'm going to copy the link and paste it in the head element. All right, we're ready to start to write the Html mark up. I'm going to open div tag, which is going to be the container inside that element. I'm going to open another dip which will be background. We need two elements here. Next I'm going to open the card in which we will have background wrapper. And then inside the wrapper we need another dip which will be card background. After that, I'm going to open he heading. Elements with the class card heading. Let's play here. Beats. Then we need development, which is going to be car. Now I'm going to open image tag. Let's go ahead and select Image from the images folder. It's going to be headphone. All right. After that, I'm tag which is going to be the shadow. First shadow. We need three shadows. Let's change the class names. Next I'm going to insert here another deep tag. It's going to be card content. We will have here H three heading element with the class small heading. That's insert bits. Next we need H one heading tag with the class main heading. We need headphones. Then I'm going to open H five heading tag with the class subheading. I'm going to insert here Product overview. Next we need the paragraph with some dummy text. It's going to be the overview of the product. Next comes the price part. Let's open H one heading tag with the price background we need here, $99 Then I'm going to open H three heading element with the class name price mean. Let's insert here the same value. Finally, we need the button with the class called BTN. The type is going to be bottom. Then I'm going to intere purchase. All right, actually with the HTML markup, we are done. Now we can move on ser to write the CSS. I'm going to select every element using an asterisk. And then set margin and padding both of them to zero. Next, I'm going to set box sizing to border box. Also we need fun family to be candid, sans. Then I'm going to select Html element and set font size to 62.5% Because we're going to use M as the measurement unit. We need one m to be equal to ten pixels, so that's why we set the font size. Next we need container, the width is going to be 100% Then we need height is going to be 100 viewpoint height. Then I'm going to change the background color. Let's use here 57567. Then I'm going to select background, set its width as 180 Ram. Then the height is going to be the same. Next I'm going to set border radius to 50% it's going to be the circle. Also change the background color. I'm going to use 334. Next I'm going to change the position. Let's make it absolute. And also we need position relative for the parent element. Here we have the background, the circle. Let's fix, let's go ahead and select back round one and set the left position to -45% As for the two position is going to be -10% Then I'm going to select background two, set right position to -15% As for the two position is going to be 35% Okay, now the background is ready. Let's hide parts outside of the container. Now the backgrounds are finally ready. Next I'm going to select car. Let's define width and height. The width is going to be 120 Ram. As for the height, I'm going to set it to 70 Ram. Also change the background color. I'm going to use 5566, we need to display the card. Let's set the position to absolute, then top position is going to be 50% left position is going to be 50% And then in order to center the element, we need to transform, translate with values -50% and again -50% Here we have the car. Let's set the border radius to one Ram in order to make the corners rounded. Next we need box shadow with the values 01 Ram, six Ram, and the RGBA color in the black color, with a lower opacity, 0.4 We have here nice shadow effect. All right, after that, I'm going to take care of the card background at first, we need wrapper, Let's set width to 100% The height is going to be 100% Then I'm going to select the card background itself. Let's set the width to 100% Then the height is going to be 200% As for the background color, I'm going to use caller 52555. All right, next we need position to be absolute. Then we need position relative for the parent element. Let's set left position. It's going to be -55% As for the top position, I'm going to set it to -50% Then we need to transform rotate Z function. Let's rotate the element by -40 degree. Also, I'm going to support the radius to zero, 50% then again 50% and zero. Okay, here we have the background. We need to use overflow hidden in order to hide the part of the background. All right, so the background is ready. Next I'm going to take care of the card heading. Let's set position to absolute. Then the top position is going to be 2% As for the left position, I'm going to set it to 50% And again, we need to transform, translate x in order to center the element. Then I'm going to set the phone size to 25 frame. Here we have the heading. Next I'm going to create space between the letters. Let's 3025 Fram. Also, we need to transform text into upper case and then change the color. It's going to be 777970. Here we have the heading, which looks much better. Next I'm going to decrease the opacity. Let's 32.3 All right, the heading looks pretty nice. Next I'm going to take care of the image of the headphones. Let's set its position to Absolute. Then the two position is going to be -5% As for the left position, I'm going to set it to -2% As you can see, the image is positioned. Next, I'm going to take care of the shadow effects. Let's select the first shadow. I'm going to set its width to 20 Ram. Then the height is going to be 60% Next, I'm going to set the position to absolute. The top position is going to be 15% As for the left position, I'm going to set to 30% Next we need background to be linear gradient. I'm going to set the direction to right. And then let's set the first color as transparent. Next one is going to be RGBA black color with opacity 0.7 As for the third color, it's going to be transparent as well. Here we have the elements. Next I'm going to use border radius. It's going to be zero. 50% 50% and zero. Then I'm going to use filter with the blur function. The value is going to be three Ram. Also, I'm going to decrease the opacity. Let's set it 2.5 here we have nice shadow effect. Let's add here transform rotate y with the value 45 degrees. Okay, so now we have a patter result. Let's move on and copy this code. For the second shadow, we need width to be 25 Ram. Then I'm going to set the height to 25 Ram as well. Let's change the position we need here. Bottom to be -2% As for the left position is going to be 28% Then we need here border radius to be 50% Also, get rid of rotate function Here we have the second shadow, now we have to take you of the third one. Let's set with 255 Ram, and the height is going to be 15 Ram. Next we need background color. Let's grab this function from here, I'm going to change the opacity. Next, we need to transform with rotate x function. We need to rotate the element according to x direction, and the value is going to be 70 degrees. And also we need rotate function with the value -30 degrees. Then I'm going to move the element with the value five fram. Then we need filter with the Blar function. The value is going to be five fram. Okay, so let's sit about the shadows next. I'm going to take care of the content of the card. Let's go ahead and set the position to absolute. Then the top position is going to be zero, right position will be zero as well. Then we need to set width to 50% and the height is going to be 100% Let's use padding and set it to five Ram. Okay, after that, I'm going to take care of the small heading, set margin top to six Ram. Next we need to phone size to be five. Also change the text transform. Let's make it upper case. Next we need to background with a linear gradient function. The direction is going to be to right. Let's use the first color, 9954. Then the next one is going to be 4622 with the 13% value. Next we need Webket background clip with value texts. We need web text color with value transparent. As you can see, we have here text with a linear gradient effect. Next, let's use some shadow effect with values 0.5 Ram, one Ram, And the color is going to be RGBA, black color with opacity 0.2 All right, that's it, about the first heading. Next I'm going to take here of the main heading, define the font size. It's going to be seven Ram. Then we need text to be upper case. Also change the color, let's use white color. Next, I'm going to use some schedule effect with the values from the previous tech shuttle property. Next I'm going to set margin to 005 Ram and three Ram. Here we have the second heading. Next I'm going to take care of the subheading, I mean, the product overview. Let's grab this code from here and make some changes. The phone size is going to be 1.6 Ram. Then we need phone weight to be 300. Let's get rid of marching. The heading looks nice. Next I'm going to take care of the paragraph. Let's go ahead and set the phone size to 1.4 Ram. Then the color is going to be A. Also change the line height, let's set it to 1.2 Next we need to be 300. Set the weight for two, then we need to be one Ram, 05 Ram, and then three Ram. The paragraph looks nice, let's move on. And price background, set the position to absolute. Then the bottom position is going to be five Fram. Then we need font size to be 12 Ram. Next, I'm going to change the color. Let's use color 77797 and decrease the opacity. Let's set it 2.5 Here we have the background for the price. Next I'm going to select the price itself. Let's set the position to absolute. Then Boson position is going to be eight m. Next we need left position, which is going to be 17 Ram. Change the phone size, let's set it to four Ram. Change the color, make it white. Also we need some shadow effect. Let's set it to 01 Ram, two m, And the RGBA with the opacity 0.2 Next I take care of the pots. Let's set position to absolute. Then the bottom position is going to be 11 Rams. For the right position, I'm going to set it to ten Ram. Next it width, which is going to be 20 Ram. Also, let's set the height to five Ram. Here we have the bottom placed nicely. Next I'm going to take care of the border radius. Let's set it 2.7 Ram. Also change the border, make it none. Next I'm going to set the background to linear gradient. I'm going to grab this value from here. We have here, nice effect. Let's get rid of this value from here. Next, I'm going to set the phone size to 1.6 Rams. Make the text uppercase change the color, it's going to be white. We need some space between the letters button, looks pretty nice. Next we need some shadow effect. Set box shadow to 01 Ram, three Ram. And the RGBA black color. Also change the cursor, make it pointer. Okay. The last thing that I'm going to do is to make the button clickable. We need active do class. Next, we need to transform, translate Y. Let's set it two -0.2 Ram. Once we click the button, it will move nicely. All right, let's sit about this project. I hope you enjoyed it. Let's move on answer to building next one. 7. Project - CSS Navigation Menu with Hover: All right, so it's time to move on and create our next project. In this section, we're going to build a CSS navigation menu with nice and cool hover effect. As you can see, we have here a couple of different navigation items. Once we hover over the items, then we'll get this nice and cool effect. Each navigation item has a different background color, and additionally, the item appears itself in the background nicely. Okay, that's all about the project. Now it's time to build it. I have a new folder on the desktop. Let's go ahead and open it in VS code. Let's go ahead and create our working files for HTML and CSS. We will have just two files. Let's open indexed HTML file and then create the basic HTML document. Let's go ahead and change the title. It's going to be CSS menu. Then I'm going to link the CSS file and specify here the name of the file. Okay, let's go ahead and open the project and the browser. And then place the browser and the editor side by side. So throughout the project, I'm going to use Google Phones. For that, we have to visit the Google Phones website. Let's search for the Google phone called Writs. I'm going to select the style. Then I'm going to select another phone called Josephine Slap. Let's different styles then. Copy the link from here and paste it in the head element. Okay, Okay, so we are ready to start to build the project. I'm going to create the HTM and mark up we need a container in which I'm going to div tag with the class navigation. It will consist of a couple of different links. The first one is going to be, let's insert here attribute called data text. I'm going to place your home. Let's duplicate the link and change the content and also the data text attributes we need about. Then the next one is going to be projects. Then we will have gallery. The next one is going to be block. The last item will be conflict. All right, so let's sit about the HTML. Next we have to start to write the CSS. First of all, I'm going to select every element using an asterisk and set margin, and putting both of them to zero. Then I'm going to set box sizing to border box. Also we need text decoration to be none. Then I'm going to set the phone size of the H human element to 62.5% because we're going to use Ram as a measurement unit one Ram should be equal to ten peakels, the elements became smaller. Let's go ahead and select the container. I'm going to set width to 100% then the height is going to be 100 viewpot height. Next, I'm going to use Flex book in order to center the content using Justified Content Center and Align Items Center. As you can see, the links are placed in the center of the page. Next I'm going to select the navigation. Let's set the height to 60 Ram. Then I'm going to use flex box. We need to change the direction, Let's set it to column. Also, I'm going to align items in the center. As for the justified content property, I'm going to set it to space evenly. Here we have the navigation items placed nicely. Next, I'm going to select the link elements. Let's set the phone family. It's going to be rights. Cursive, the phone is changed. Then I'm going to increase the phone size. It's going to be six Ram, A. Change the color. I'm going to use 5255. Then we need space between the letters. Let's set it 2.2 also change the width, Let's make it 100% And the height is going to be 100% as well. Then we need technique text line to be center. We have here the navigation items. They look pretty nice. Next I'm going to select navigation with a hover effect. I mean hover pseudoclass, followed by the link element. Let's change the color. It's going to be 888. Next I'm going to select navigation, followed by the link. And then the hover. I'm going to change the color. Let's set it to white. Let's set box shadow for the link element to 0.5 Ram, one Ram. And the RGBA black color with opacity 0.1 Next we need transition for smooth effect. Actually we need here tech shadow and not the box shadow on hover. The color of the link is changing. Next I'm going to select Navigation Link. And then before element, let's set content to attribute. And then we need data text, which we used in the HTML file. Next, I'm going to set position to absolute. And we need position relative for the navigation. After that, I'm going to set top position to 50% Then the position is going to be 50% as well. I'm going to censor the element using transform translate -50% and again -50% Then I'm going to set the width to 180 m and the height is going to be 180 m as well. We need background color to be red, that's a temporary color. And also decrety opacity. All right, let's make the element rounded using border radius 50% Then we need z index property to be minus one in order to make the links visible. Okay, that's a temporary result. We need Display Flex. Then Justify. Content will be center. And also we need a line items center as well. Next, I'm going to increase the phone size. It's going to be 30 Ram. The phone family will be the second phone, Joseph, in slap serif. Then the phone weight is going to be pulled. Also, I'm going to change the color. Let's use 777. As you can see, we have here the items, I mean the bigger items in the background of the navigation we need to display them once we hover over the items. Next I'm going to select the navigation. A with a with hover, followed by the before pseudo element. Actually, by default, I'm going to make the content empty. Then the content with attribute date text should be on hover. Let's get rid of within height and place them here as we need left position to be 50% Get rid of the background color and also make the opacity zero. Here we need opacity 0.7 And also I'm going to set letter spacing to 50 Ram by default. As for the hover effect, the letter spacing is going to be one Ram. Finally, we need transition for smoother effect. Once we hover over the items, then we will get the proper items in the background. Next, I'm going to make the overflow hidden in order to get rid of those scroll bars on hover. Also, we need overflow hidden for the container as well. Know everything works fine. The only thing that we have to do is to change the background colors. Once we hover over the items, we need navigation followed by the link with chart selector. And then we need before the element. The background color for the first item is going to be Bf94 144. We have here the background color for the first item. We need the same for all the items. Actually, let's change the left position and make it 40% Now we have better result. Let's duplicate this code and change the background colors for the rest of the items. The second one is going to be F3722. Then we'll have 8961, then we'll have 974. Then the next one is going to be nine oh six. For the last item we need 43 A, A. Actually we need to change the child selectors as well. We had here one everywhere. We need numbers from one through six. All right, so now we have here nice and cool effect. Actually, almost everything works fine. We just need to make a tiny change in the transition property. Let's scroll up and the transition instead of all I'm going to insure separately letter spacing and then left position. Now we have much better result. Okay, that's it, the project is finished. I hope you enjoyed it. Let's move on. 8. Project - Success / Fail Modal Box: All right, it's time to start to create our next project. In this section, we'll build a success fail module box. I mean the pop up message which shows us the success or fail. You will come across this message in almost every website. Very frequently we have here two different buttons. One of them is green and the other one is red. If I click the green button, then we'll get this nice success pop message. Then if I click Go Ahead button, it will close as for the red button. If I click it, then we'll get a failed message, which will close once I click the Try again button. Okay, that's it about this project. It's going to be a simple one, but I think it will be very useful and you will enjoy it. Let's get started. I have created a new folder on the desktop. Let's go ahead and open it in VS code. Then create our working files for HTML, CSS, and Gale script. The first one is going to be indexed HTML. Then we will have styles and also we need scripts. Then I'm going to open the index HMO file and create the basic HTML document. Let's go ahead and change the title. It's going to be model box, and then we need to link the CSS and the Jovscopt files. Okay, Next I'm going to run the project to the browser. And also I'm going to place the editor and the browser side by side. Okay, Next I'm going to grab the phone CDN link, because we're going to use some phone so icons throughout the project. Let's go ahead and copy the link from here. Then I'm going to open the link tag and paste the CDN link here. Okay, next I'm going to visit the Google Phones website, because we're going to use one of the Google phones. Let's go ahead and search for Google Phone, which is called Weeks Made for Display. I'm going to select those different styles, then copy the link from here and paste it in the head Elon. All right, we're ready to start to write the HT mail markup. I'm going to create development which is going to be the container inside the development. I'm going to open another deep, it's going to be content in which we will have success. Then I'm going to insert Patson with the classes PTN, then Success BTN. The text is going to be Submit. Next we need a model box. I'm going to create development with the class Success, model and model. That's Insert here another P which is going to be model icon. And also we need another class Success on that's insert here a phone icon which is going to be FA solid FA check After the icon we need model top in which we have H one heading element, the text success. The model top is going to be followed by model patson. We will have here another class as well, Pots, success. Let's insert a pots with a class model BTN. I'm going to set the type attribute to pots. Let's insert the text. Go ahead. All right, now we need the same for the fail. Let's duplicate this code and make some changes. We need to change success into fail. Actually, let's do it for every success. Next we need to fail. Also change the text of the button. It's going to be T again. Also we need to change the icon. Okay, I think that seeks about the Html mark up. Let's go ahead and start to write the CSS. I'm going to select every element, and then set margin, and padding both of them to zero. Next, I'm going to set the box sizing to border box. I'm going to change the phone family. It's going to be the phone that we selected the weeks made for display. It's going to be sansoriflws. Can see the default styles are applied to the elements. Next, I'm going to select models and hide them using display none. All right, let's take care of the container. I'm going to set its width to 100% and the height is going to be 100 view pot height. Also change the background color. Let's use here color 264653. It's green color. Then we need flax book. And in order to center the items we need, Justify content sensor and a line item center. Okay, after that I'm going to select PTN. Let's set margin to three Ram, then. Width is going to be 15 Ram. I'm going to set the height to four Ram. The patterns became bigger. Let's set the border radius to three Ram. Then get rid of default Porter, make it none, we need some shadow effect. Let's set box shadow 201 Ram, three Ram. And use here R to be a black color with lower opacity. All right, next I'm going to set the font size to one Rame. Font weight to Polde transform to be upper case. Let's spacing 2.1 Ram. Then change the color. It's going to be white. And also set the cursor to pointer. Now we need to change the backgrounds for the button separately. The first one is going to be the color 298. As for the second button, I'm going to use a red color, which is going to be Fd575. Okay, the buttons are ready. Next I'm going to create, click the fact using transform translate y. Let's set it 2.2 Ram. Once I click the button then it will move. We did that using active pseudo class. Next, I'm going to hide the buttons and take care of the models. Let's set with to 25 Ram, then the height is going to be 30 Ram. Next I'm going to change the background color. Let's set it to E. I'm going to set position to absolute. Then we need position relative for the parent element, which is going to be container. Let's set both models in the center. We need top and left properties to be 50% and also we need transform translate with the values -50% and -50% Both models are placed in the center of the page. Next I'm going to use flex box. Let's change the direction it's going to be column. We need to align items vertically. So let's set a line items to center. Also, I'm going to make the element rounded using border radius. We need then box shadow with the values 01 Ram, three Ram. And the RGBA black color with lower opacity. Okay, after that, I'm going to select model icon. Let's set width to six Ram, then the height is going to be six Ram as well. We need position to be absolute. Then I'm going to set to position two minus three Ram. As I'm going to use port the radius, let's make the element rounded. Next, I'm going to select the icon itself. Let's increase the phone size. I'm going to set it to 2.5 Ram. The color is going to be white. Here we have the icons select Fail icon, set its background color to red. Also, I'm going to use shadow with the values 0.5 Ram, two Ram, and the color is going to be 240-96-5608, and the Opacity 0.3 Then we need flex box in order to center the icon. Let's justify content center And a line items center. Okay, the icon is ready and it looks pretty nice. Next. Next I'm going to take care of the model top. Let's say it's width to 100% the height is going to be 20 Ram. Then I'm going to use Display Flex with justify content center and a line items center. Let's go ahead and select Modal Top H, one heading element. I'm going to increase the phone size, it's going to be 2.5 Ram. Then change the color. I'm going to make it 264653. Then I'm going to take you off the bottom side. Let's set the width to 100% Height is going to be ten Ram as we need. Again, flex box with Justify Content Center and Align Items center. Next I'm going to select model, Bottom, fail and change the background color. You see a red color. Actually we need border radius down. Let's set border radius to 00. Then one Ram, and again one Ram. Okay? The problem is fixed. Next I'm going to select the Batson. Let's set with to ten Ram, then height is going to be three Ram, border radius will be two Ram. Next, I'm going to get rid of default border, make it none, change the background color. Use here, white color. Next, we need to transform the text into upper case. Also, font weight is going to be bold. Then I'm going to use some shadow effect with values 012 and the RGB color. We'll set the courser to pointer. Okay, After that, I'm going to change the color of the bottom. Let's set it to red. Next we need to create a click effect. Let's transform translate y 0.2 m. Okay, so now we have here click effect. All right, after that I'm going to select Fail Model and hide it for a while. In order to customize the Success model, let's select Success Icon, set its background color to green. Then we need box shadow 0.5 m, two Ram. And the RGBA 421-57-1403 and the Opacity 0.3 All right, Next I'm going to select Model Bottom Success, and change the background color. It's going to be green. Actually, both models are looking good. Next I'm going to change the color of the Boom, it's going to be green. All right. That's it, Everything is ready. Now I'm going to get rid of this display. None from here. I'm going to hide models using scale. And also we need opacity and visibility properties. Next, we need to get back the buttons. Now it's time to use. Let's create the variable buttons and select buttons using curry select all method. We need her class name, BTN. Next we need the second variable. It's going to be models. We need here model, also model BTN. Let's insert here model PTN. We can see all the elements already. Let's look through the buttons. Using forage method, we need to add event listening to the button. We click event, I'm going to insert here a callback function. Once we click the button, we need to look through the models using again forage method. Actually we need here model the parameter we need here if statement in which we have to define if model class list and the first item in the class list. Then we need to split it to and select the first item if it is equal to class from the BTN class list. I mean the second item again, we need to split it to dash and then select the first item. If this condition is true, then we need to show the model box. We need here add method, and instead here class open, which will be used in the CSS file. We need to select open, followed by the model, and we have to make it visible. Let's select this code. Also, we need here opacity and visibility. We need scale to be one and opacity one, and visibility visible. Also, I'm going to transition all 0.5 seconds. As you can see, the buttons work fine and the models appear once we click them. Next we need to hide them. Once we click the buttons of the models, we need to look through the model BTN's. Next I'm going to add event listener to model BTN. With click event, we have to remove class open from the model. Now if I click the button, the model boxes will okay, everything works fine. And with this project we're done. Let's move on. 9. Project - Sign In / Sign Up Form with Illustrations: All right, so it's time to move on and start to build our next project, which is going to be a sign in sign up form with animated defects and illustrations. When you build the website, almost every page needs this kind of template. I think that this project will be very useful for you. Let's go ahead and describe the project. We have here a sign in form template. On the left side, you can see the illustrations. As for the right side, we have here impo fields with a pattern. Down below you can find a link for sign up. If I click it, then the sign in form will switch to the sign of form, nicely with some animated defects. So we can switch to the different forms like so. All right, let's sit about this project, Let's get started. I have created a new folder on the desktop in which I have folder with illustration images. Let's go ahead and open the folder in VS code and then create our working files for HTML. Then we need CSS files, we need here file for Javascript. Then open index HTML file and create basic HTML document. I'm going to change the title. It's going to be sign up, sign in forms. Then I'm going to link the files. The first one is going to be CSS file. Also we need here Javascript file. Let's specify the name of the file in the source attribute. Let's go ahead and run the project to the browser using live server. Then I'm going to place the editor and the browser side by side like so. In order to make our working process more convenient and simpler, I'm going to visit the fonts CDN, JS website in order to grab the link, because we're going to use some font lom icons. Let's open link tag and paste the CDN here. Besides that, I'm going to use Google phones. Let's visit the Google Phones website. I'm going to search for phone called signa negative. I don't know if I pronounce correctly, let's select different styles, then paste the link in the head element. Okay, I'm going to start to create the H mal mark up. We need here a container in which I'm going to insert de tag, which is going to be form wrapper. Then we form wrapper left and also right. Let's insert here H one heading elements with the text sign up. Form with the class form sign up. Let's get rid of action attribute. I'm insert here input group in which we will have input tag with the type text. And we need placeholder attribute in which I'm going to insert user name. Next, I'm going to insert your phonosomicon, which is going to be FA, solid FA. Then I'm going to duplicate the input group twice. And let's change the type here. It's going to be e mail. We need here email. And also change the icon. It's going to be envelope. Then we need here type password. The placeholder is going to be password. And also change the icon. It's going to be lock. Okay, so here we have the input fields and the icons. Let's insert here a bottom with the class form BTM we need here type, it's going to be button. As for the text, I'm going to insert here. Sign up. Okay, after that we need a link with the class sign in link. Let's institute the text sign in. Okay, let's go ahead and copy this code and paste it down below in the form wrapper. Right, I'm going to make here some changes. We need sign in. As for the link element, it's going to be sign up. And also change the class name. Okay, I think that's it. Everything is ready. I'm going to start to write the CSS. Let's select every element using an asterisk. First of all, I'm going to set margin and putting both of them to zero. Next we'll have box sizing, which is going to be border box. I'm going to set outline to none. Next we need text decoration to be none. I'm going to change the phone family. It's going to be signica negative or as you can see, the default styles are applied to the elements. Next, I'm going to select Html element and decrease the fault size because we are going to use M as the measurement unit. In this case, one m will be equal to ten pixels. Okay, let's go ahead and start to customize the container. I'm going to set width to 100% The height is going to be 100 port height. Next we need background color. It's going to be EC two. Next, I'm going to select foam wrapper. Let's set its position to absolute. Then we need position relative for the parent element which is a container. Let's set top position to 50% Then we need left position to be 50% And we need to center the element using transform translate with the values -50% and again -50% Now the content is placed in the center of the page. Next I'm going to set the width. It's going to be 100 Ram. As for the height, I'm going to set it to 65 Ram. Also change the background color, it's going to be white. Here we have the form wrapper, let's use flex books. I'm going to make the cons rounded using border radius. Let's say two Ram. Also create some shadow effect. Let's intero 0.3 Ram, three Ram, and then the color is going to be RGBA, 326-01-1207 with a Opacity 0.3 All right, now the form wrapper looks much better. Let's go ahead and select form wrapper left. And also we need here wrapper, right, because those elements will have some similar styles. Let's set with two 50% the height is going to be 100% Next we need flex books. We have to change the direction, it's going to be column I'm going to set justify content to center and elon items to center as well. Also, let's align text in the center. Okay, the forms are placed in the center of the wrappers. Next I'm going to select H heading elements. Let's increase the phone size. It's going to be six. Then we need Col 47f, it's a blue color. Let's set margin to minus five Ram. Zero, then six Ram and zero. The headings look pretty nice. Next I'm going to select Input group. Input set with 225 Ram. Then the height is going to be five Ram. Let's set margin to one Ram, zero. Next, I'm going to get rid of border and then define border at the bottom. It's going to be 0.2 Ram solid with a RGBA color, 641-23-2505 and the Opacity 0.5 Okay, After that I'm going to set color to blue. Let's change the font size. It's going to be 1.4 Ram. Also, we need padding on the right side. Let's set 22 Ram. Then I'm going to change the background color. It's going to be transparent, the input fields look better. Next I'm going to select input with placeholder attribute. Let's change the color. It's going to be blue also creates some space between the letters. And change the font size, 3,021.2 Ram. Also we need font weight to be 500. Finally, let's transform text. To upper case. All right, next I'm going to select input group input with a focus to the class on focus, I'm going to change the border color. Let's set it to blue. Once we focus the input fields, then the border at the bottom will change its color. All right, after that, I take of the input group element. I'm in the phone of icons, position absolute. Then we need position relative. For the parent element, which is input group, let's define top position. It's going to be 50% then we need the right position. I'm going to set it 2.5 Ram. And also we need transform translate Y with -50% in order to center the element. Next I'm going to change the phone size. It's going to be 1.3 Rams. Let's change the color, let's set it to blue. Here we have the phone automatics placed nicely. Next let's go ahead and select button, set width to 20 Ram. Then the height is going to be 4.5 Ram. I'm going to set margin at the top to two Ram. Next, we need border to be none. I'm going to use border radius to make the button rounded, 3025. Change the background color. Blue color, the buttons look nice. Next color to be white. Set text transform to upper case change. The font size is going to be 1.4 Ram. Then we need font weight to be bold and also use some space between the letters. Next, I'm going to create some shadow effect. Let's say box shadow, 20.5 Ram, one Ram. And the RTP a color, I mean this one blue color with opacity 0.4 the buttons look pretty nice. I'm going to set cursor to pointer. All right. After that I'm going to create, click the fact using transform translate Y. Let's set it 2.2 Ram. Once we click the button, we will have here click effect. Okay, let's go ahead and select the link element. I'm going to set position to absolute, the set bottom position, it's going to be. As for the phone size, I'm going to set it to 1.6 Ram. Let's transform text into upper case. Also, set the phone way to bold. Next, we need font size. It's going to be 1.6 Ram. Change the color, I'm going to use blue color. Next, let's go ahead and select sign up link. I'm going to set right position to four m. As for the sine in link, we need left position four. Okay, actually both forms I sign in and sign up forms are done. They look pretty nice. Next I'm going to select form wrapper left, and hide it using opacity zero and visibility hetum. The sign up form is hedum. Now I'm going to place here for wrapper background. Let's select this element. Let's define this position. It's going to be absolute minate width to be 100 m. The height is going to be 100 m as well. Next we need background color, it's going to be blue. Also, I'm going to use border radius 15 m. We have here the blue background. Let's go ahead and set the left position to -40% As for the top position is going to be 90% Next we need to change the origin of the transformation is going to be right bottom. To rotate the element according to Z direction, the value is going to be -40 degree. Actually we need to position to be -90% Okay, now we have to hide the part of the background using overflow heatum. We have here nice background. Next I'm going to insert your image which is going to be an illustration. Select image one. Let's adhere class name, it's going to be image left and get rid of the all attribute. Let's go ahead and select image. Let's settle with 235 fram, then position is going to be absolute. Right now the image is not visible. Let's set z index to 100. Here we have the image. I'm going to select image left, top position is going to be 25% then we need left position is going to be 8% All right, so the image is placed nicely. Now we have to take care of the Javascript. Let's create variable, it's going to be container. I'm going to select this element is inquiry selector method. We need to specify here the class name container. Let's duplicate it twice. The second variable is going to be sine up link. Let's insert the class name. Also we need here sine in link, change the class name. Now we need sign up link with event listener. Let's place here, click Event and also the callback function. We need container followed by the class list property and we have to add to the class list navigate. This will happen on click. Now we have to use this class to add some styles to the elements. I mean the form wrapper background. Let's transform rotate Z function with the value 130 degrees. Also, we need to translate in order to move the element. The value is going to be 15 Ram and then again 15 Ram on both directions, I, x and y. Once I click, then the background will move. We have to add here the transition to make the effect smoother. Now if we click, we'll get the nice and cool movement of the background. Next, we have to take care of the form wrapper left with again navigate class. Right now element is hidden and we have to make it visible. Let's use again transition with some delay time. We need again transition by default without delay time. If I click, then the sign up form will appear nicely. Now we have to take gear of the image. Let's use again class navigate followed by the image left. Class name. Let's set opacity to zero and visibility hidden. We need here transform translate y function. We have to move the image slightly and also use transition with all the duration 0.5 second. We need transition for the image left element by default with a delay time. Once I click, then the image will hide nicely. The form will appear. All right, everything works fine. Next we need to take care of the signing link. To remove class, navigate from the container. Now if I click Sign up and then sign in the background will get back to its default position. Now we have to take care of the form rapper, right? We need to set opacity to zero, then visibility hidden to hide the sign in form. That is transition. Next, I'm going to add transition by default to the element. With a delayed time, it's going to be 1 second. If I click the link, then the sign in form will hide nicely, and then it will appear once we click again the link. Okay, the only thing that I have to do is to use the second image for the sign in form. Here we have the second image. Let's select image right, set its top position to 17% then the right position is going to be 7% So we need to transform translate Y with a value minus five the image. I'm going to set opacity to zero and visibility to hidden. We have to display the image. Once we click the link we need here, class navigate, followed by the image, right? Class name. Let's set opacity to one and visibility to visible. Next, we need to transform translate Y function. The value is going to be fives. We need transition for a smooth effect. Also, we need delay time. Next, we have to add here transition by default. Now if I click the links, everything will work fine. Actually, we need to get rid of delay time from here. Ok? Everything works fine. And we have here cool signing and sign of form template. Let's move on. 10. Project - Website Header: Okay, so it's time to create our next project. In this section, we're going to build a nice and modern header of the website. Today, every modern website needs to have a cool header. So in this section, you will learn about how to create and customize the header of the landing page. Let's go ahead and describe the project. The header consists of a couple of different parts. At the top left corner, we have a logo code and create. Then at the top, right corner, we have a simple navigation. We have only three navigation items with a hover effect. As for the center of the page, here we have the most important part. You can see here the lamp which actually is created with pure HTML and CSS. We don't have here any images. The lamp has lighting, and also you can see here down below the shadow. Besides that, we have here a couple of different textual elements, and also you can see here a textual background, which I think looks really nice and cool. Okay, so that's it about this project, let's go ahead and start to build it. I have created a new folder on the desktop. Let's go ahead and open it in VS code. And then I'm going to create our working files for HTML and for CSS. We're going to use those two technologies only. Let's open Idextt HTML file and create the basic HTML document. I'm going to change the title. Let's insert your landing page. And then I'm going to link the CSS file. Let's go ahead and open the project and the browser and then place the editor on the browser side by side, like so. Okay. I'm going to visit Google Fonts website because we're going to use the Google Pont throughout this project. So let's go to the website and then search for the phone called sold. I'm going to select a couple of different styles from here. I'm going to search for another p, which is going to be PT Sans Narrow. Let's select those styles. Next, I'm going to search for passion one, grab those tiles. Then I'm going to copy the link from here, and we have to paste it and we have to paste it in the head element. All right. Now we can start to write the HTML markup. We need container in which I'm going to create landing. Let's insert here n elements with the class noFbar in which I'm going to insert a logo. It's going to be span element, CAC, code and create. Next, I'm going to create navigation. Let's insert here link elements. It's going to be home. The second item is going to be tutorials. As for the third item, I'm going to insert your courses. Okay. After that, we need banner in which I'm going to insert development, it's going to be lamp. Then we need here shade. Those are the parts of the lamp. Next one is going to be bulb. Then we will have light. The next one is going to be shadow. All right. After that, we need H one heading elements with the class banner heading. The text is going to be learned. Next, we need banner heading. Actually, the first one was the main heading. This is just the heading with the text code and create. Actually, we need here H two heading element and not the t. Then we'll have paragraph with the class banner paragraph. Let's insert here web development and web design. So actually, that's it. The HTML markup is ready, and we have to start to write the CSS. Let's create some default styles. We need every element. Let's set margin and padding to zero. Next, we need box sizing to be border box. Also, we need to get rid of decoration from the text. Then let's set the phone family. It's going to be the phone called PT Sans Narrow Sansif Next, I'm going to change the front size of the H tal element because we're going to use RM as the measurement unit. In this case, one M will equal to ten pixels. After that, let's take care of the container. I'm going to set with 100%, the height is going to be 100 pot height. Then I'm going to change the background. It's going to be linear gradient. The first color is going to be two C two, three one. Then the next one is going to be 2b2c3 one. So here we have the background. After that, I'm going to take care of the landing. Let's set width to 95%. The height is going to be 90%. Then I'm going to change the background color. It's going to be 2425 to nine. And then we need shadow. Let's say it two zero, one M four RM and the RGBA color. The color is going to be black with opacity 0.3. So here we have the header. We need to place it in the center. Let's use display grid, and then place items center. So the element is placed in the center of the page. Next, I'm going to take care of the noth bar. Let's set with to 100%. Then the height is going to be 15 mls we need pudding. Let's set it to zero and ten ram on the left and right sides. Next, I'm going to use flax books. Let's align items in the center, and so we need to justify content with the values space between. So here we have the logo and the navigation items. Next, I'm going to take care of the logo. I'm in this panelment Let's change the phone family. It's going to be passion one, cursive. Then I'm going to the phone size to eight ram. Also, we need color to be white. Then I'm going to increase the space between the letters. Let's say it 2.2 ram. Also we need text shadow. It's going to be 0.51 ram with RTB a black color, and the opacity is going to be 0.1. So here we have the logo. After that, I'm going to select the span followed by the after element. Let's set content to empty. We need the line on the logo, and set position to absolute, and also we need position relative for the pound element. Let's set width to 9.5, The height is going to be 0.5. Also, we need background color, let's say it 2444. Next, I'm going to set to position to 50%. Left position is going to be zero, and we need centering using transform. Translate Y -50%. Okay. Let's it about the logo. Let's take care of the navigation items. Let's select navigation followed by the link element. I'm going to set the phone size to two ram, then we need margin on the right side. Let's set it to five M. Also, we need color. I'm going to make it five two, five four, five, here we have the navigation items. Next, I'm going to increase the space between the letters. Next, we need link element with chart selector. I'm going to select the first link element. Let's set color to d d d. So the first item by default has a different color. After that, I'm going to create a hover effect. I'm going to change the color on hover, let's say 2444 and then use transition for smooer effect. Actually, we need to change the color, we need here d d d. All right, so, that's it about the navigation. Now we have to take care of the center of the page. I'm in the lamp. Let's set the position to absolute. Next, we need position relative for the parent element. Let's set top position to zero, then the left position is going to be 50%, and we need to center the element using transform, translate x -50%. Next, we need width to be 20 M I'm going to set the height to 30. And use here temporary background color. So here we have the lamp. Right now, it doesn't look any lamp, but we will fix that. Let's select wire. I'm going to set width 2.4 M. Then we need height, it's going to be ten ram. Next, we need background color to be 1224. Next, I'm going to set the position to absolute. Then we need top position to be zero. Left position is going to be 50%, and also we need to center the element using transform, translate x -50%. After that, I'm going to use some shadow effect. Let's set it to 0.51 ram and the RGBA color with lower opacity. Actually, the wire is not visible because we are missing this element at all. Actually, we need to place those elements inside the lamp and also we need to add here wire. Okay. So here we have the wire. It looks pretty nice. Next, I'm going to take care of the shade. Let's go ahead and select this element. I'm going to set width to 100%. The height is going to be ten. Then we need background color. It's going to be black for a while. Let's set position to absolute. Next, we need to position is going to be ten ram. So here we have the shade. Let's go ahead and set the border radius to 50%, 50%, then zero and zero. As you can see, now the shade has better shape. Let's set the background to linear gradient. I'm going to use here as the first color to d16. Then the next one is going to be 2425 to nine. Here we have the shade which looks much better. Let's use some shadow effect. I'm going to set it to 0.5 ram one RM and the color is going to be RGPA black with lower opacity. Now the shade looks pretty nice. Next, I'm going to select shade with after pdlement. Let's set content to empty then we need width to be 100%. The height is going to be Two ram. Then I'm going to set the position to absolute. Also, let's define bottom position. It's going to be minus one ram. Next, we need left position, it's going to be zero. Also we need border radius. It's going to be 50%. As for the background color, I'm going to set it to two D, three, two, three seven. All right, so as you can see. Now, the element looks like 100% of the shade. Next I'm going to take care of the bulb. Let's say it's with two three ram. Then the height is going to be 2.5 ram. Also, we need here background color, it's going to be white. Then I'm going to set the position to absolute. The bottom position is going to be 8.5 ram, As for the left position, it's going to be 50%, and we need to center the element using transform, translate x -50%. So here we have the bulb. We need to make it rounded. Let's do that using border radius with values zero, zero, 50%, and 50%. Okay. So here we have the bulb. Next, I'm going to add here, box shadow with the values 0.5 R two ram then the RGBA color, 2505, 2505, three times. It's a white color and the opposite 2.3. Okay. So we have here nice effect. Let's it about the bub. Let's move on and take care of the light. Let's say it's width to 100%. Then the height is going to be 50 RM. Next, I'm going to change the background. Let's use again linear gradient. The first color, is going to be RGBA, 2505, 2505, 55, and the opacity 0.3. Then I'm going to use transparent color, and as the third one, let's use again transparent. All right. Now we need to change the position of the element. Let's set it to absolute. Then the two position is going to be 19 M. Then we need left position, it's going to be 50%. Again, we need to center the element using transform, translate x -50%. Now the element is positioned nicely. Next, we need border radius with the values, 30%, 30%, zero and zero. Next, we need to use filter with blur function, and the value is going to be one RM. So here we have the light. Let's decrease the opacity, make it 0.3. Now we have here this nice and cool light effect. After that, I'm going to select shadow, let's set the width to 40 ram, then the height is going to be eight ram, next, we need background. Let's use again linear gradient. We need here direction to be to right, then the first color is going to be transparent. Then we'll have black color, and again, transparent. So here we have the shadow. We need to position it. Let's set position to absolute. Then bottom position is going to be -45 ram. As for the left position, I'm going to set it to 50%. Again, we need to center the element using transform, translate X -50%. All right. After that, I'm going to rotate the element according to x axis. The value is going to be -70 degrees. So as you can see the element is rotated. Now, I'm going to use border radius with a value 50%, and also we need filter with blur function and the value is going to be two. All right, so as you can see, we have here cool shadow effect. Again, let's decrease the opacity, make it 0.3. Okay, that's it. The lamp with its shadow is ready. It looks cool. Now we have to take of the main heading. Let's set the position to absolute. Then when you took position to be 25%, the left position is going to be 26%. Let's change the phone family. I'm going to use Oswald, San Serif. The phone size is going to be 20 RM. So here we have the main heading. Next, I'm going to make the text uppercase. Then we need color. Let's use here 4142, seven. So the color is changed. Next, we need letter spacing. It's going to be ten RM. After that, I'm going to decrease the opacity. Let's make it 0.5. Then I'm going to change the background. Let's use linear gradient. The first color is going to be 41427. Then we need transparent with 70%. Next, I'm going to use property called webkit background clip is going to be text. And then I'm going to use webkit, text field color, which is going to be transparent. So as you can see, we have here really nice and cool fact. Next, I'm going to take care of the banner heading. Let's set this position to absolute. The bottom position is going to be 35, then we need right position. I'm going to set it to 23%. Let's set for family to passion one, Cursive. Also, I'm going to increase the phone size. It's going to be eight RM. So here we have the heading. Let's transform text into upper case, then change the color. It's going to be BBB. Then we need letter spacing. It's going to be two ram. Also use some shadow effect. Let's say text shadow to 0.5 ram one ram and the RGBA black color with opacity 0.3, actually 0.4. The heading looks pretty nice. Next, I'm going to take here. Of the paragraph. Let's change the class name and make some changes here. The pots position is going to be 30 RM, then the right position is going to be 24%. I'm going to change the phone family. Let's use here Oswald Sarif Then we need to change the phone size, it's going to be the R Also, change here phone weight. I'm going to set it to 300. Next, get rid of Tax transform property, also, change the color. It's going to be six C, six D seven. And then get rid of tax shadow, also decrease the, let's spacing, make it 0.1 RM. All right. So that's it. The header of the website looks pretty nice. I hope you enjoyed this project. Let's move on. 11. Project - Blog Card: All right, it's time to move on and start to create our next project. In this section, we're going to be building a nice looking and modern block card. Let's go ahead and describe the project. As you can see, the card consists of a couple of different elements. We have here an image on the left side of the card, then some textual elements. And also we have here the button which tells us read more. If I click the button, then the card will expand. And we'll get here three other different cards about some tours. If I hover over the cards, then we'll get this nice and cool effect. As you can see, the content of the button is changed. Now it tells us that read less. If I click the button, then the card will minimize. All right, so let's sit about this project. Let's get started. I have created a new folder on the desktop. Let's go ahead and open it in VS code, then create our working files. We need three different files, for HTML, for CSS, and for Java script. Then I'm going to open indexed HML file and we have to create basic HTML document. Let's go ahead and change the title. It's going to be block car. Then I'm going to link the CSS and a script files. Let's open script tag and specify here the name of the jars file. Okay, let's go ahead and open the project to the browser using live server. And then I'm going to place the editor and the browser side by side. So next I'm going to grab the CDN link for phone, so icons, because we're going to use those icons throughout this project. Let's copy the link, open link tag in the head element and paste the CDN here. Next, I'm going to visit the Google Phones website. In order to grab some phones from the Google Phones, let's go ahead and search for a phone called Roboto Condensed. I'm going to select a couple of different styles, then I'm going to search for another phone, which is going to be End. Let's select again different styles, then I'm going to copy the link from here and paste it in the head alone. All right, we are ready to start to write the HTML markup. We need to create a container open tag which is going to be block. We need block image in which I'm going to open image tag. Let's go ahead and select the image from the images folder. It's going to be image one. Then after the image, we need to create block card content. This element will include H three heading elements. It's going to be the date 27 January 2023. Next we need H one heading element. It's going to be explore new to. Also we need a paragraph with some dummy text. Next I'm going to create a button with the class name card BTN. The type is going to be button. Also I'm going to place here read then span element more. Next I'm going to create in which we have blocks, we'll have three different items. Since your image, I'm going to select the image from the. Images folder. It's going to be to one. Then we need span element with the text explore to one. And also we need phonic. It's going to be FA, solid magnifying co, location. I'm going to duplicate this item twice because we're going to have three different items. Let's go ahead and make some changes. We need tore two. We need here to change the names of the images. Okay, actually that's it. The HTML markup is created. And now we have to take here of the CSS. First of all, I'm going to select every element using an asterisk. Let's set margin and padding both of them to zero. Then we need box sizing to be border box. Also, I'm going to decrease the phone size of the H Timal element because we're going to use M as a measurement unit. In this case, one m will be equal to ten pixels. Let's go ahead and select container. I'm going to set width to 100% then the height is going to be 100 view foot height. Let's change the background. I'm going to use linear gradient function. The direction is going to be 145 degrees, then the color is going to be 6193. Then we need here 0% The second color is going to be 814. We need here the percentage value, 75. Okay, so we have here nice and cool background. Let's use flex box. In order to center the content, we need to justify content center and a line items center, the content is centered. Actually, I'm going to decrease the size of the images that set width to 25 frame. Then the height is going to be 35 frame. Then I'm going to select image itself that set width to 100% and the height is going to be 100% And also we need object feed cover. Now we have better results. Let's go ahead and select Block Tours and use Flex Books. Images are placed horizontally, side by side. Let's go ahead and select Block Card Image. I'm going to set to 30 Ram, then the height is going to be 32 Ram as well. Next we need to select the card image itself. I mean the image element. Let's set with 100% and the height is going to be 100% Also we need again object feet cover. Next I'm going to select Block card and set its width to 55% Then the height is going to be 80% Let's change the background color. I'm going to use RGB, 40, 40, 40. Then I'm going to use border radius in order to make the corners round it. 3,022.5 Ram. We have here the card with a dark background. After that I'm going to use some padding. 3,022.5 Rams create some shadow effect. Let's set shadow, 201.4 Ram, eight Ram, and the color is going to be RGB, 40, 40, 40. As for the opacity, I'm going to say 2.8 and also we need here RGB eight. Okay, Now we have much better result. Now I'm going to use background with this linear grading function for the image. Also, I'm going to make it rounded using border radius. Next let's set the position to absolute. Also we need position relative for the parent element. Let's set position to 15% then the left position is going to be minus ten Ram. We need to transform translate Y -50% Also I'm going to set the scale of the image. 2.6 We have here the image next. Let's take of the border radius for the image itself. And also we need to decrease opacity. Let's make it a 0.5 Now the image looks quite nice. Let's go ahead and take care of the block tours. I'm going to set weight to 100% then I'm going to use justify content with value space even. We need even space between the items. Here we have the items placed nicely. Then I'm going to set the position absolute. The bottom position is going to be six Ram For the position, I'm going to set it to zero. The tours are placed down below. Let's go ahead and select Block Card Content. I'm going to set its position to absolute. Then I'm going to set the two position to 1% position is going to be 15% Then we need transform with a scale function. I'm going to set the value to 0.8 Next I'm going to take care of the headings. I mean the first heading, H three. Let's set phone family to Roboto condensed san Serif. Then the phone size is going to be two Ram. Also we need color, it's going to be 999. Then I'm going to set some space at the bottom here we have the first heading. Next, I'm going to duplicate this code and change here phone family as we need to change the phone size, It's going to be 3.5 Ram. Then we need phone weight to be 300 and also change the color, it's going to be white. Let's sit about the second heading elements. Next I'm going to take year of the paragraph. Let's copy this code, change the selector. It's going to be, I'm going to set the phone size to 1.6 Ram and also change the color. Is going to be 777. Next we need width to be 35 Ram. Also change the margin at the bottom, make it three Ram. That's about the paragraph. Next I'm going to take of the paton. Let's set with 216 Ram. Then the height is going to be four Ram. Actually we need to grab this background with linear gradient function. We need the same background color here. Next I'm going to set the border to non. Also change the color, make it white. Then I'm going to change the phone family. It's going to be, can it sansorif? The button looks pretty nice. I'm set the phone size to 1.4 Ram. Also transform text into upper case. Then I'm going to create some space between the letters, make it 0.1 Ram. Also, I'm going to make the button rounded using border radius with the value two Ram. Okay, the button looks pretty nice. I'm going to use some shadow effect. Let's set box shadow to 01 M1m. And the RGBA color, I mean the black color with opacity 0.1 Also, I'm going to change the cursor, make it point. The button looks pretty nice. Now I'm going to take care of the block tours item. I mean, the cars down below. Let's set border radius to one Ram. Then I'm going to use some shadow effect. Let's set block shadow to 01 Ram, five Ram. And again, RGB, a black color with opacity 0.3 Next I'm going to set the cursor to pointer. Next I'm going to take care of the images. Let's set back round with linear gradient function. The direction is going to be 135 degrees and the color will be 6193. Then the next one is going to be 1356 to seven, the border radius to one Ram. We need the same border radius for the image itself. Also, I'm going to decrease the opacity. Let's make it 0.5 Now the images look pretty cool. After that, I'm going to take care of the span elements in the item. Let's set position to absolute. We need position relative for the parent element. Then the top position is going to be 50% the left position is going to be -35% We need to center the element using transform translate Y -50% Then I'm going to change the phone family. Let's use Candi. Here we have the panelementslet's increase the phone size. It's going to be 1.8 Ram. Change the phone weight, let's set it to 500. Also, we need to transform text into upper case. Then I'm going to create some space between the letters and change the color. Make it white. Actually, something's wrong here. We missed my. Now everything looks good. We have to rotate the text by Z direction with the value -90 degrees. Now everything looks pretty nice. All right, let's copy this selector and use your element. Let's set with 26 Ram, then the height is going to be six Ram as well. I'm going to change the background color. It's going to be 1683d. I need here the tach sign. Next we need to take care of the position. We need to place the icon in the center. So we need to position to be 50% left position 50% And transform translate with the values -50% and again -50% The icons are placed in the center of the item. I'm going to make the elements rounded using border radius 50% Then we need to place the icon in the center using Flexbox. When you justify content center and a line items. Also, let's increase the phone size, make it 2.5 Ram. Change the color It. We. All right, here we have the icons. Let's use some shadow effect with values 01 Ram, three Ram, and the color is going to be black with opacity 0.1 All right, now I'm going to create the hover effect on hover. We will decrease the opacity. Let's set opacity to zero and visibility hidden. Once we hover over the items, then the icon should display. Let's hover effects followed by the to image. Actually, we need to grab this selector from here and paste it. Up after the image. On how We're going to change the opacity? It's going to be 0.05 Also we need here transition. Let's grab this selector. Now take care of the puntos icon. Let's change the opacity, make it one. And also we need visibility visible. Then transition 0.3 seconds, and also we need delay time point 1 second. Now as you can see, we have here really cool and nice hover effect. All right, after that, we need here capacity to be zero and visibility hidden. We need to hide the items. As we need to change, the size of the card is going to be 45% As for the height is going to be 40% Next, we need to get rid of scale function from here and also change the position of the image. It's going to be 50% the top position. As for the left position, it's going to be minus five Ram. The image is positioned nicely. Next we have to take care of the content change. The top position is going to be 15% As for the left position, I'm going to make it 40% We need to get rid of scale, everything looks fine. Let's take care of the Batson. We need your position relative. And then the index 100, because the button was disabled, Now it's enabled again. Okay, I think everything is ready. And now we can start to write Javascript. Let's create variable button and select this element using query selector method. We need to specify here the class name of the bottom. Then we need to select block car. Let's specify here the class name. Now we need to add event listener to the button with a click event. Also, we need here callback function. Once we click the button, we have to add new class to the block card. We need here class leased property, then the togl method, the new class is going to be change. All right, now we have to select block card with class change. We have to add here new styles. We need to change the width, it's going to be 55% Also need to change the height, it's going to be 80% Let's use transition for smoother effect. Once we collect the button, then the card will expand nicely. Next I'm going to take care of the image. Use again Cl change. We need to move the element using transform translate y function with the value -50% And also we need scale to 0.6 Next we have to change the position is going to be 15% The two position as for the left position is going to be minus ten Ram. Also, we need here transition. Once we click, then the image will move up, the size will be changed. Next we have to take care of the content. Let's change the top position. It's going to be 1% that's for the left position. I'm going to set it to 15% Then use transform with the scale function it's going to be 0.8 Also we need transition for smoother effect, the content is ready. Next, I'm going to take care of the tors items. Let's select Block Tours item and make it visible using opacity one and visibility visible. Next, we need transition. Once we click, then the items will appear. But as you can see, we need here some delay time. I'm going to add delay time to each tour item separately. Let's select the first one and set transition to all 0.3 seconds and the delay time 0.3 seconds. Let's duplicate this code for the second item. The delay time is going to be 0.5 seconds. As for the last item, it's going to be 0.7 seconds. Now as you can see we have here really nen cool effect. The only thing that we have to do is to change the content of the button. We need to use a ternary operator. It condition is true. Then we need to select the span elements and change the text content. It's going to be less. Otherwise, it more. We need the statement with the value more. Now if I click, then the content will change. Now everything works fine with this project. We're done. I hope you enjoyed it. It was interesting and useful. Let's move on Answer to build the next one. 12. Project - Navigation Menu with Circles: All right, so it's time to move on and to create our next project. In this section, we are going to be building a navigation menu with HTML, CSS, and Javascript. As you can see, we have here a button in the center of the page. If I click this button, then a couple of different navigation items will display with a nice and cool effect. As you can see, the content of the button is changed. Now it says close. If I click the button again, then the navigation items will hide. I think the project is going to be interesting and useful. Let's go ahead and get started. I have created a new folder on the desktop, which right now is empty. Let's go ahead and open this folder in VS code. Then our working files, the first one is going to be index HTML. Then we will have style CSS. Also, we need file for Javcript, it's going to be scripts. Let's go ahead and open index Html file and create the basic Html document. I'm going to change the title. Let's insert your CSS menu. Then I'm going to link CSS and Charles Grit files were script tag and we have to specify here the name of the Chiles file. Okay, let's go ahead and open the project to the browser using live server. And then I'm going to place the editor in the browser side by side. Okay, now I'm going to grab a Google font. Let's visit the Google Fonts website and then search for a font called Mukta. I'm going to grab different styles from here. Let's copy the link and then paste it in the head element. All right, we are ready to start to write the HDMl mark up. We need here a container in which I'm going to insert menu. We need here button with a type button, and then we need here class. It's going to be menu BTM. Also we need two place here, Span, element, menu, and also in another span. For a close, we have here the bottom. Next we need the navigation items. I'm going to open up element with a class navigation. Let's insert here link elements. The first one is going to be home, then I'm going to duplicate it a couple of times. The second one is going to be about. Then we will have projects. The next one is going to be block, and the last one will be gallery. Okay, so I think everything is ready and now we can start to write the CSS. Let's select every element and set margin, and putting both of them to zero. Next, we need text decoration to be none. We need box sizing to be border box. I'm going to set the phone family for every element to muta. All right, next I'm going to set the phone size of the HTML element to 62.5% in order to make one m equal to ten pixels. Because we're going to use m as a measurement units the width for the container to 100% Also we need height, it's going to be 100 view pot height. Then I'm going to change the background color. Let's use F 1f1f1. Next we need menu. I'm going to set width to 70 Ram. The height is going to be 70 m as well. I'm going to set the position to absolute. Then we need position relative for the parent element, which is a container. In order to center the element, we need top position to be 50% that position 50% And we need the transform translate width -50% and again -50% Now the menu is centered. Next we need menu button span element. I mean the second one, we need to hide it for a while. Then let's go ahead and select menu PTN. The width is going to be 15 Ram. Then the height is going to be 15 Ram as well. Next, background color, it's going to be green I. I mean 238. Let's go ahead and set the position to absolute And then we need to position to be 50% that position is going to be 50% Again, we need to center the element using transform translate. -50% again -50% Also I'm going to get rid of the border. So as you can see the button is centered, let's make it rounded using border radius. Then I'm going to set the phone size to 2.5 fram. Change the pond's going to be bold. Also, we need to transform text into upper case, then change the color is going to be white. I'm going to use a flex box. Let's use Justify content center and a line items center. Besides that, I'm going to use a little shadow effect. Let's set it to 0.5 Ram. Then we need two Ram. Color is going to be 351-90-2140, And the opacity, 0.4 Also we need crouser pointed. All right, after that, we need to select link elements. Let's set position to absolute. Then the width is going to be 12. The height is going to be 12 as well. Next we need background color to rein, which we used. Color is going to be white. We're going to make the items rounded, then set the phone size to 1.8 Ram and use Flex box. We need to center the content using justify content center and line items center. All right, next I'm going to use Shadow. I'm going to grab this value from here and paste it for the link element. All right, after that, I'm going to select the first link elements using child selector. Let's set top position to 15% then the left position is going to be 75% Also, we need to transform translate -50% again -50% Let's copy this code a couple of times, change the numbers of the selects. Overall we have five different items. The second items position is going to be 20% and 20% Next, we will have here 60% For the left position is going to be 20% Then the fourth item, we'll have 85.65% As for the last item, we have here, 45% then 85% As you can see, the items are aligned nicely. Now we have to write some Javascript. Let's create variable menu BTN. I'm going to select this element using query selector method. Let's specify here the class name, menu BTN. Then I'm going to create another variable, which is going to be menu. We need to add an event listener to the menu BTN With a click event, we have to create the click event. That's place here. Back function. Once we click the menu BTN, we have to add a new class to the menu using togal method. This class is going to be changed and we have to use this class in CSS file that's copy the selector we need here. The first span element, we need to use display none for the first item and we have to pass here the close change. As for the second item, we have to display it, we need display flex. Once we click the menu, then the content will switch from menu to close. Next, we need here to position to be 50% and left position to be 50% as well. We need to censor the elements. They will end up behind the menu button. Then we will display them using change class name. We have to add change to all five items. Actually, the items are not placed quite good because we have to get rid of this text from here. All right, now we need to display the menu bottom using the index property. At 30 to 100, we have here the bottom as you can see, once we click the menu button, then the navigation items are placed to their positions. Now we need to use transition to make the effect smoother. We need here all. Then the duration is going to be 0.2 second. Also, I'm going to use cubic Si function to make the effect nicer. Once we click the menu icon, then the items will display nicely. Actually, I'm going to add different delay times for the items in order to make the effect cooler. Now if I click, then we'll get this nice and cool. The fact actually I'm going to add transition by default as well. Now everything works perfectly, and with this project we're done. Let's move on. 13. Project - Website Header with Gradients: All right, it's time to move on and start to create our next project. In this section, we are going to be building a header of the landing page with CSS gradients. As you can see, we have here a website header with nice and cool CSS gradient colors. On the left side, you can find different layers with gradients. You can see also the heading followed by the button. As for the right side, you can see here a simple navigation bar with three navigation items which is followed by the banner. You can see here the heading elements. One of the headings does have these nice and cool CSS gradients. Down below, you can find three phonosomicons. They represent the social media links. Okay, let's sit about this project. Let's go ahead and start to build it. I have created a new folder on the desktop. Let's go ahead and open it in VS code. I'm going to create our working files. The first one is going to be index HTML and then we'll have file for CSS style CSS. Let's open index Html file and create the basic HTML structure. I'm going to change the title. It's going to be landing page, and then I'm going to link the ESS file here. Let's go ahead and open the project in the browser using live server. And then I'm going to place the browser and the editor side by side in order to make our working process more convenient and simple. Next, I'm going to grab the phono CDN link, because we're going to use the phono icons. Let's copy the link from here. Then open link tag in the head element and paste the link here. Next, I'm going to visit the Google phones website. Because we're going to use the Google phone throughout the project. Let's go ahead and search for Tilt, Warp the style. Copy the link and paste it in the head alone. All right, we are ready to start to write the H demon mark up. I'm going to open deep tag which is going to be the container in which I'm going to insert landing. Then, well here the layers, layer one, layer two, and layer three. Inside the layer three, we will have inner layer. Next, I'm going to create the navigation using no elements. Let's insert here No Items. We will have three different link elements. Let's open link element and Paste here home. Then the second one is going to be Explore. As for the third one, it's going to be Contact. All right, after the navigation, we need banner in which I'm going to open H one, heading element gradients with. Then we need button. The type is going to be button. Next we need span element with the text Explore. Then I'm going to place with the class FA solid FA arrow. Right? Actually we need here I element and not the deep. Here we have the left side of the page. Next we need to create header in which I'm going to place H one heading elements with the text landing page. Then we need here span element CSS gradients. Okay, after that we need to create the social media links we need development with the class social media in which I'm going to place I element with the classes FA brands, Facebook. Let's duplicate it twice. Change the class names. The second one is going to be FA Instagram. As for the third link element, it's going to be FA Twitter. All right, so that's it. All the elements are created and now we have to start to write the CSS. I'm going to select every element. And use some default styles. Let's set margin and putting both of them to zero. Next we need box sizing to be border box as I'm going to set text decoration to none. Then we need phone family. It's going to be tilt Warp, the Google phone that we selected. As you can see, the default tiles are applied. Next, I'm going to set the phone size of the HTML element to 62.5% In order to make one m equal to ten pixels, We are going to use M as a measurement unit. Next, I'm going to select the container that's set width to 100% Then the height is going to be 100 foot height. Let's use background color. It's going to be OF 162. We have here the blue color. Next I'm going to select the landing. Let's set width to 95% then the height is going to be 90% I'm going to use background with linear gradient function. The direction is going to be to right bottom. We need here the first color which is going to be a D24. Then the next one is going to be 2d48. 99, 70% We have here nice and co es gradient. Next we need box shadow with the values 01 Ram, five Ram. And the color is going to be black with lower opacity, 0.2 okay? Now we need here for the radius, it's going to be one Ram, so as you can see the corners around it. Next, I'm going to center the element using flax book. We need justify content center and then a line items center. As you can see, the header is centered on the page. Next, I'm going to select the first layer. Let's set its width to 70% Then the height is going to be 120% going to set the position to absolute. Then we need position relative for the parent element, which is a landing. Let's define top. Position is going to be -10% then the left position is going to be -5% I'm going to use a linear gradient function. The first color is going to be C558. Then the next one is going to be 4538. We have here the first layer. Next I'm going to use border radius with the values zero, 50% 50% and then zero. Also, we need opacity to 0.5 Next, I'm going to use some shadow with values 01 Ram, five Ram. And the RGBA black color with a opacity 0.5 As you can see, we have here the first layer. Actually we need to hide the parts of the first layer using overflow He. Okay, that's it. The first layer is ready. I'm going to duplicate this code change height, it's going to be one 40% then the left position is going to be 15% -50% Then the first color is going to be 338. As for the second color, I'm going to use 452. Also here, percentage value 40% Actually something's wrong here. Yeah, we need to change the class name. It's going to be layer two. Here we have the layer two. Let's duplicate this code, change the class name. It's going to be layer three. We need height to be one 30% then the lead position is going to be -25% And we have to change the colors in the linear grading function, the first one is going to be 95, actually we need here the direction of the transition to, right. Then the next color is going to be 5584. Let's get rid of the percentage value. Here we have the third layer. They look pretty nice. Let's get rid of opacity. We don't need here opacity. So now we have much better results. All right, let's go ahead and select inner layer. Let's set with 100% then the height is going to be 100% Let's grab this linear graded function, change the direction to top right as we need. First color to be 245. The next color is going to be b1666. Next we need to transform with a translate function values. We're going to be 30 Ram, and then 15 Ram. We have to move the element with both directions. Let's use border radius to make the element rounded 50% Now we have to hide the parts of the element using overflow Heiden. Okay, so I think it looks pretty nice. Now we have to of the no bar. Let's set position to absolute. The top position is going to be zero, left position is going to be zero. With is going to be 100% then the height is going to be ten ml. I'm going to use flex books. Let's set the elements in the center vertically. And also we need to justify content with Flex because we're going to place the items on the right side. Let's set putting to 010 Ram. Now we can customize the links. Let's select items A. I'm going to set font size to 1.4 Ram. The color is going to be white. We need text transform to be upper case, then Ponight is going to be 300. And also we need the space using margin, 02 Ram on the left and right sides, and then creates some space between the letters. Let's set it 2.1 Ram. Also, we need some shadow effect at 3,020.5 Ram, one Ram with RGBA black color, and the opposity 0.2 Okay, that's it. The navigation items look pretty nice. Next I'm going to select the banner. Let's set position to absolute then top position is going to be 35% left position, it's going to be 10% Here we have the banner, the heading on the bottom. Let's go ahead and customize the heading elements, Increase the phone size. It's going to be ten Ram, then the color will be white. Also, we need space between the letters. Let's set it 2.3 Ram. Next we need margin pots. Let's set it to five Ram. Also, we need text shadow with the values 0.5 Ram, two Ram, and the RGBA color. The heading looks pretty nice. Next I'm going to take care of the bottom. Let's select it. I'm going to set width to 20 Ram. The height is going to be five Ram. Then we need background color to be white. Let's set border 2.2 Ram, solid, a white color. Next I'm going to set border radius 2.7 Ram. Here we have the bottom. I'm going to use flex books, that's a line items in the center. As for the justify content property, I'm going to set it to space around the text and the arrow are aligned nicely. Actually, we need space between and not the round. That's it. Now we need padding left to be one Ram. Next, I'm going to increase the phone size, it's going to be 1.8 Ram. Then we need to tax transform to be upper case. Also use some space between the letters. Let's 32.2 Ram and change the color. I'm going to use here color nine, F five, the text looks pretty nice. Next I'm going to use some Shadow effect. Let's 3,020.5 Ram. The Need 0.5 fram again. And the color, 230-31-7590 And the opacity 0.3 All right. Next I'm going to use box shadow 3,020.5 Fram, two Ram. And the RGBA color, I mean the black color with opacity 0.2 Finally, use cos point. All right, now we have to move on and take of the icon, I mean the arrow on the right side. Let's set with 30% and the height is going to be 100% Let's change the background color. I'm going to use here E C 245. Now we need to display the arrow. Let's set for the radius to 0.7 Ram, 0.7 Ram, and zero. Now we're going to use Flex box in order to place the arrow in the center using justify content center and a line item center. And also change the color, make it white. Let's increase the phone size. It's going to be 1.8 tram. Here we have the arrow. Now we're going to take care of the header, the heading element on the right side. Let's set position to absolute. The top position is going to be 30% As for the right position, I'm going to make it ten Ram. Let's increase the phone size, It's going to be five Ram. Here we have the heading on the right side. Let's set the width, 243 Ram. Then a line text on the right side. Also change the color, make it white. Then use some shadow effect. We need 0.5 Ram, one Ram, and the RGBA color with pasty 0.2 The heading looks much better. Now we have to select the span element. Let's use display block. Next, we need font size to be six Ram. Then we need text transform upper case as we need here. Linear gradient, the first color is going to be 815. Then the next one is going to be 447 with 90% In order to apply the linear gradient, we need Property Webkit background clip, it's going to be text. And also we need webkit text, feel color. It's going to be transparent. As you can see, we have here nice and cool gradient effect for the heading element. Okay, now we have to take care of the social media. Let's set position to absolute. The bottom position is going to be five Ram. As for the right position, I'm going to set it to ten Ram. Next we need flex books. Here we have the icons. I'm going to select social media element. Let's increase the phone size, it's going to be two Ram. Then we need color to be white. Also we need margin, 01.5 Ram. Let's use some shadow effect with the values 0.5 Ram, one Ram. The RGBA black color. Also change the cursor, make it point. Okay, that's it. Everything looks pretty nice. With this project, we're done. Hopefully it was interesting and you enjoyed it. Let's move on. 14. Project - Contact Form with Light / Dark Mode: Okay, it's time to move on and start to create our next project. In the section, we are going to be building a contact form with light and dark mode. As you can see, by default, the project is in light mode. You can see here a couple of different input fields with a bottom. Here we have two different bottoms, light and dark. Also we have here something like Sun. If I click dark, then the project will switch to dark mode and the sun will transform into Moon. Then if I click light, then the project will switch back to light mode. I think this project will be interesting and useful for you because nowadays websites use light and dark mode. So you will learn something new in this project, Okay? Now it's time to move on and start to build it. I have created a new folder on the desktop, which right now is empty. Let's go ahead and open it in VS code. Then we need to create our working files for HTML. Then for CSS, also we need file for Javascript. Let's open index, load HTML file, and create the basic HTML document. I'm going to change the title. It's going to be light dark, switch Togo. Then I'm going to link the CSS and jouse the files. Let's open script tag and specify the name of the file in the source attribute. Then we need to open the project to the browser using live server. Also, let's place the editor and the browser side by side, like so. Now I'm going to use some Google Fonts. Let's visit the website and search for Google Phone called Ubuntu. I'm going to select a couple of different styles here, then I'm going to copy the link and paste it in the head element, we are ready to start to write the code. I'm going to start with the H L markup. Let's open tag with the class container in which I'm going to open form wrapper. Inside the form wrapper, we will have foam wrapper left and form wrapper right. Let's open left side create Sun Moon. Then we need baton with a span element. It has class BG, we need three span elements. The second one is going to be light, he light dark as the text button will have type attribute, it's going to be button. After we need to take here of the right side of the form. Let's open H one heading element which is going to be Contact us. Let's insert your input with the class field. The type is going to be text. Also, we need a placeholder attribute with your name. Let's duplicate it and change the placeholder. It's going to be e mail. Also, I'm going to change the type attribute. It's going to be e mail as well. Next we need text area. I'm going to add here class, it's going to be field and then message also, I'm going to use placeholder attribute with the text your message. Okay, next we need bottom. The type is going to be bottom. So I'm going to institute text send message. All right, so I think everything is ready. Let's go ahead and start to write the CSS. I'm going to use some default styles. Let's select every element and set margin and putting to zero. Then we need box sizing to be border box. I'm going to set outline to none. Let's set phone family to, to which we have just grabbed from the Google phones website. Okay, so the default styles are applied. Next, I'm going to set the font size of the H tmul element to 62.5% because we're going to use m as the measurement unit. In this case, one m will be equal to ten pixels. Next, we need to select container. Let's define width. It's going to be 100% then the height will be 100 view height. Let's change the background color. It's going to be white. Next, I'm going to use Flex books. We need to center the element using justify content center and the line item center. As you can see, the content is centered perfectly in the page. Let's use foam wrapper and set its width, 280 Ram. Then we need height, it's going to be 60 Ram. Next we need background color to be white. I'm going to use flax books. Set border radius to three Ram, make the corners rounded. Also, I'm going to use some shadow effect. Let's set box shadow to zero, to Ram, six Ram. And the color is going to be RGBA 61215 and the Opacity 0.2 Okay, here we have the form with a shadow effect. Next I'm going to select form wrapper left. Let's set its width to 40% Then I'm going to duplicate this code. Change the class we need here, right? And the width is going to be 60% All right, next to use flex box for the left side, let's change the direction. It's going to be column also, we need you to justify content to space between, we need some space between the items. As for the Elin items, it's going to be center. Next. I'm going to create space using padding. Let's say it to 100, then 20.0 After that, I'm going to select the Sun Moon. Let's the width to 12, then the height is going to be 12 Ram as well. I'm going to change the background. Let's use linear gradient. We need direction to be 225 degrees. As for the first color is going to be F nine, then the next color is going to be 55. Then I'm going to make the element rounded using border radius. Here we have the sun. Next I'm going to take here of the bottom, on the left side, Let's set its width to 20 Ram. Then the height is going to be four Ram. I'm going to change the background color. It's going to be 888. Then let's get rid of border, make it none. And also we need border radius, three Ram. Here we have the bottom. Next I'm going to set the phone size to 1.4 Ram. Also change the color. It's going to be 777. Then I'm going to set the cursor to pointer. All right, after that, I'm going to select bottom with a spin element. Let's set position to absolute. We need position relative for the parent element, which is the bottom in this case. Then we need two position to be zero. Next, I'm going to set the width to 50% Also change the height, make it 100% Next I'm going to select background. Let's change the background color. It's going to be white. Also we need border radius with the value of three Ram. Let's set left position to zero. We need some shadow. Let's set it to 0.5 Ram, one Ram. And the RGBA color black color with opacity 0.1 Here we have the background, which will move from light to dark. Next, I'm going to select light and dark. Let's set display to flex. We need to center the content using Justify content center and a line items center. After that, I'm going to select light separately, left position to zero. As for the dark, I'm going to set it right position to zero. Okay, that's it, the button is customized. Next I'm going to take care of the right side. We need flex books. Then I'm going to change the direction, make it column. Also, I'm going to elin items in the center. As for the justified content, I'm going to set it to space between. In order to create the space between the items, let's set putting to eight Ram, then zero. As you can see, the elements are aligned. Now it's time to customize the heading elements. Let's set the font size to five Ram. Then the color is going to be 777. Here we have the heading. Next I'm going to select Field, set the width to 50 Ram. Then the height is going to be five Rams. I'm going to get rid of border and then create border at the bottom. Let's set it to 0.2 Ram, solid. The color is going to be BBB. Here we have the input fields with border at the bottom. Actually, let's decrease the width, make it 30 Ram because they are too large. Now we have a much better results. Next, I'm going to set the phone size to 1.4 Ram. Then the color is going to be 555. Also, change the back aune color, make it transparent. Next I'm going to select Field, followed by the placeholder attribute. Let's change the text transform, make it upper case, so we need phone size to be 1.4 Ram. Then change the color, make it BBB. Also, we need letter spacing with the value 0.1 Ram. As you can see, the placeholder attribute looks pretty nice. Next, I'm going to select text area with the class message. Let's set height to ten Ram. And also I'm going to disable resizing function. Let's set it to none. Okay, that's it about the input fields. Now we have to take ear of the bottom. Let's define with, it's going to be the two Ram, then the height is going to be 4.5 Ram. Then I'm going to change the background color. Let's use here color 262431. Also, I'm going to set border to none, then make the button rounded using border radius. Let's set it to three Ram here, bottom. Let's change the font size. It's going to be 1.4 Ram. Then I'm going to change the color. Let's make it BB, transform text into upper case. Then create some space between the letters, make it 0.1 Change the course, it pointer. And also we need some shadow effect. Let's say 2012. And the color is going to be black with the opacity 0.1 Okay, that's the button, pretty nice. I'm going to create click effect using active stock class. We need to transform. Translate Y with value 0.2 Ram. Once I click, then we'll get this nice click effect. All right, now I have to add here circle background. Let's Customize this elements selected. Set the width to 120 Ram. Then the height is going to be 120 Ram as well. I'm going to use border radius. Let's set it to 50% Make the element rounded. I'm going to grab this background with its linear gradient function. Here we have the circle. We need to change its position. Let's set it to absolute. Then we need position relative for the container. The top position is going to be -70% As for the let position, it's going to be 50% And we need to center the element horizontally using transform translate x -50% Okay, So now the only thing I have to do is to create the shadow with the values 01 Ram, five Ram. The color is going to be 248-10-6509, With the opacity 0.2 we have to place the circle behind the wrapper. Let's set position to relative. And then use the index property of the value 100. Okay, now everything looks pretty nice. We can start to write the Govscript. Let's go ahead and create a new variable which is going to be a container. I'm going to select it using query selector method. We have to specify here the class name. Next we need to select button. Let's place here class name form wrapper left, followed by the tag name button. Okay, now we have to add an event listener to the button with click event. Also we need here the Cope function. Once we click the button, we have to add new class to the container using to method. Let's call the class name switch. Now we have to use this class name in the Css file to create new styles for the dark mode. I'm going to start with the background that's selected using switch class. We need here transform, we translate x function and the value is going to be 100% Also use transition transform, the duration is going to be 0.4 second. Once we click, then the element will move nicely from light to dark and from dark to light. Okay, let's go ahead and select Switch with container. I'm going to change the background color. It's going to be 262431 and then use transition. Once I click, then the background of the container will change from light to dark. Next we need to take care of the circle background. Let's select it using switch change the background. I'm going to use linear gradient. The direction is going to be 225 degrees. Then I'm going to use the first color, 93 DFF. As for the second color, it's going to be 3374. Also we need box shadow 015 with RTB calor 60508115 and the opacity 0.5 Now, as you can see, the circle, the background color of the circle is changing nicely. Cain, let's move on and select switch with form wrapper. I'm going to change the background color we need here. This color again, 262431 and then use transition. Once I click, then the background of the contact form will change nicely. Next we have to change the Sun. So let's select these elements. Change the background we need here, linear gradient. The direction is going to be 225. As for the colors I'm going to use actually that's copied the entire code and pasted here. After that, I'm going to change the box shadow. Let's make it none. Now the sun is changing. But we need here an additional effect. We need to transform Sun into Moon. Let's select Sun Moon, followed by the after sea element. I'm going to set content to empty. Then we need position to be absolute. Let's use position relative for the parent element, which in this case is sun moon. Let's define right. Position is going to be zero. For the top position, I'm going to make it zero as well. Then the width is going to be 9.5 Ram. The height is going to be 9.5 fram as well. Let's change for the radius, it's going to be 50% We need a circle. Also change the background color. I'm going to use here, this dark color. Okay, Now we have, but we need to add here some effect. Actually, let's change the background color and then use transform scale. Make it zero. We need to increase the scale. Once I click the button, let's use Class switch followed by the Sun Moon. With after do elements, I'm going to change the background color back to dark. Also we need to increase the scale 0-1 Also we need here transition for smoother effect. Now we have much better result. But we need here transform origin to be right top instead of center. Now as you can see, the element is increasing from the right side. And we have here much better and cool results. All right, next I'm going to take care of the paton itself. Let's select button with the switch, I'm going to change the back color. Let's use here color 1128. Also need her transition for a smooth effect. As you can see, the bottom changes its background color. We need to change the color of the span element as well. Let's select switch Background and change the background color. Use here, 34323. Again, transition, I mean we need to add here background color with a duration point 1 second. As you can see, button looks pretty nice. Once we change the mode, now we have to take the text of the input. Let's select field with switch and change the color. Make it light with BBB is light. And finally we have to of the bottom, I mean the Submit button. Let's select it and change the background color. It's going to be BBB, and also we need to change the color. Let's make it dark, all right, So that's it, everything works perfectly. And we have here this nice and cool switch from light to dark. 15. Project - Search Bar: All right, so let's move on and start to create our next project. In this section, we're going to be creating a nice and cool search bar. As you can see, we have here a circle in the center of the page, a search icon. If I click this element, then the search bar will expand. You're able to type here. Think also the search icon is changed with X closing button. If I click this button, then the search bar will close. And also we'll get back here, the search icon. All right, let's sit about this project. It's simple one, but I'm sure that you will enjoy it and it will be interesting and useful. Let's go ahead and start to build it. I have created a new folder on the desktop search bar, which right now is empty. Let's go ahead and open this folder in Us code, and then create working files for HTML. Then we need file for CSS, also for Java script. Then I'm going to open the indexed HTM file and create the basic HTML structure. Let's go ahead and change the title. It's going to be search bar, then I'm going to link the files CSS and Js files. Let's open script tag and specify the name of the file in the source attribute. Okay, next I'm going to open the project to the browser. And then place the editor and the browser side by side. Next I'm going to grab the phone CDN link, because we're going to use the phone some icons throughout this project. Let's copy the link, then open link tag and paste it in the H reference attribute. Besides that, we need Google phones. Let's go ahead and visit the website. I'm going to search for phone called signica negative. Let's grab the styles and then copy the link and paste it in the head element. All right, so we're ready to start to write the HTML markup. I'm going to open Deep Type, which is going to be the container. Let's insert here search bar, in which I'm going to insert input element with the type text and with a placeholder attribute type. Besides that, we will have here a phontosomicon with the classes FA solid, FA magnifying glass. Also, we need here another phonosomicon, the classes FA solid X mark. We have here all the elements. And now we can start to write the CSS. I'm going to select every element and then set margin and putting both of them to zero. Next we need box sizing to be border box. I'm going to get rid of default outline and then change the phone family. It's going to be the phone that we selected, Signia negative Sensori. Besides that, I'm going to set the phone size of the H tim element to 62.5% in order to use the Ram as a measurement unit. Okay, let's go ahead and take care of the container I'm going to set with to 100% then the height is going to be 100 viewpoint height. Also, we need here background color. I'm going to use here color 1611. It's dark color. Also, we need Flexbox to center the content. Let's justify content center and a line items center. As you can see, the content is centered on the page. Next, I'm going to select Search Bar. Let's set the width to 45 Ram. Then the height is going to be eight Ram. Also, we need background color to be white. Next, I'm going to use border radius to make the corners rounded. Let's set it to ten Ram. Also let's use some shadow effect. It's going to be 01 Ram, six Ram. And the color is going to be RGBA, black with lower opacity, 0.6 Okay, after that, I'm going to align text to the right side. Next I'm going to select the input elements. Let's set with two 100% then the height is going to be 100% as well. Let's get rid of default border then use border radius with the value ten Ram. Next, I'm going to set the background color to non. Also we need padding one Ram, 7.5 Ram, then one Ram, and then two Ram. We have space inside the input. Next I'm going to increase the phone size, it's going to be two Ram. Next, I'm going to select search bar I element, I mean Fmoc. Let's set position to absolute. Then we need position relative for the parent element, which is wrapper search bar. The two position is going to be 50% Then the right position is going to be 0.5 Then we need translate x -50% Actually we need here y instead of x so the icons are centered vertically. Let's set with seven Ram. And the height is going to be seven Ram as well. Next we need background color to be ED 3758 red color. Let's set border radius to 50% in order to make the element rounded. Also use flex box in order to center the elements using justify content center and line items center. As you can see, the icons are centered. Let's increase the phone size, Make it 2.5 fram. Then change the color, make it white. Also change the coursor type, make it pointer. Okay, now it's time to write some Javascript. Let's create variable, which is going to be the container. I'm going to select this element using query selector method. We have to specify here the class name container. Next, we need another variable which is going to be such icons. Let's select both elements using query selector. All method we need here to pass search bar. Next, I'm going to look through the icons using forage method, you need here search icon but without the quotes. Next, I'm going to pass here the arrow function. I'm going to add event listener to search icon with a click event with a callback function. Now we have to add a class to the container on click using togal method. The class name is going to be, let's say change. So now we have to use this class in the CSS file. First of all, let's change The width of the search part, is going to be eight Ram. Then I'm going to select search part with change. Let's set with 245 fram. Also use transition for smoother effect. We need here width and the duration, 0.5 second. Also, I'm going to use cubic Si function to make the effect nicer. That's in those values inside the function. Once I click the icon, then the search part will expand. I'm going to set opacity to zero for the input element. Then I'm going to select it with change and set opacity to one. I'm going to use transition with opacity and with the duration 0.5 second. Also, we need delay time 0.3 second. We need the same transition for the input element by default, but without the delay time. Now everything works fine. Now we have to take care of the icons. Let's select elements with chart selector three. Set opacity 20. Then we need to select the elements with class change. We need here opacity to be one. Also, we need change with chart selector two and the opacity zero. Finally, we need transition to make the effects smoother. As you can see, by default, we have here search icon. Once we click, then it will transform into X closing button. Everything works perfectly. And we have here cool, modern search bar. Let's move on to the next project. 16. Project - Calculator: All right, so it's time to move on and start to create our next project. In this section, we are going to be building an application which is going to be a Javascript calculator. As you can see, the calculator has nice and modern and also funny look. If we make here any of the calculations, then we'll get the proper answers. As you can see, the calculator works fine. We have here a screen followed by the buttons. Two of them are different. The first one, I mean the red one is for deleting. As for the green one, it's an equal button. All right, so let's sit about this project. Let's get started. I have created a new folder on the desktop which is empty right now. Let's go ahead and open it in VS code. Then I'm going to create the working files for HTML index HTML. Then for CSS which is going to be style CSS and also we need file for Javascript script JS. Then I'm going to open index HTML file and create the basic HTML structure. First of all, I'm going to change the title. It's going to be a calculator. Then I'm going to link the CSS and also the Javas files. We need to open script Tac and specified the name of the file in the source attribute. Then I'm going to open the project to the browser using live server. Also, let's place the editor and the browser side by side to make the working process more convenient and simpler. I'm going to visit the Google phone website, because we're going to use a Google phone throughout this project. Let's go ahead and search for phone called No to Suns. Let's select a couple of different styles, then copy the link and paste it in the head element. Okay, we are ready to start to write the code. Let's start with the Html markup. I'm going to create the container in which I'm going to insert tag, which is going to be calculator. We need here input elements which is going to be the screen. Let's add class name screen. Next, I'm going to create patm with type patm. Then we need here BTN. Also, I'm going to use attribute called data num. Let's insert your C. I'm going to duplicate this patm a couple of times because we are going to have many different buttons. Let's add here class, then I'm going to insert divide sine. Then we need 789. Next, we need here asterisk. I mean the multiplication sine 456. Then we will have minus followed by 12.3 Then we will have plus sine. The next one is going to be zero. Then again zero, we'll have dots and lastly equal sign. Also, I'm going to change the class name. It's going to be equal. All right, so we have here HTML markup. Let's go ahead and start to write the CSS. Select every element and set margin, and putting both of them to zero. Next, I'm going to set the box sizing to border box. We need outline to be none. Then change the phone family for every element, it's going to be the phone that have selected not sons. San Serif. All right, after that, I'm going to set the front side of the H mile element to 62.5% because we're going to use m as the measurement unit. And in this case one m will be equal to ten pexels. Let's select container set width to 100% Then the height is going to be 100 view pot height. Also change the background color. It's going to be 12224, it's a dark color. Next I'm going to use Flex Box because we're going to center the content using Justified Content Center And the line items center. As you can see, the content is placed in the center of the page. Let's go ahead and select calculator. I'm going to set with 240 Ram, then the height is going to be 60 Ram. Let's change the background color. I'm going to use 223. We have the calculator, let's set some spaces in padding three Ram, two Ram. Then we need border radius 32 Ram. Also we need some shadow effect. Let's set box shadow to 01 Ram, then three Ram, and the color is going to be RGBA color with opacity 0.4 We have here nice and cool shadow effect. After that, I'm going to select Screen, which is the input element. Let's set width to 34 Ram. The height is going to be eight Ram. Then I'm going to change the background color. Let's use 888d, then I'm going to use margin at the bottom. Let's set it to 1.5 Ram. Next we need border radius, it's going to be one Ram. Gets rid of default border, let's set it to none. I'm going to disable pointer events, let's set it to none. And also I'm going to align the text on the right side. We no longer can focus on the input element. Let's set phone size to two Ram. Also increase pace between the letters. Let's make one Ram, change the color. It's going to be white. Then we need putting, let's say 22 Ram. After that, I'm going to select BTN, followed by the equal sine. Let's set with 27 Ram. The height is going to be seven Ram as well. Here we have the buttons. Let's use margin, make it one Ram. Then I'm going to get rid of default border. I'm going to change the background. Let's use linear gradient. The direction is going to be 180 degrees. As for the first color, I'm going to use 222. Then the second color is going to be 333. As you can see, the color is changed. Let's use some shadow effects we need here. Inset zero -0.8 Ram, the eight Ram. And the color is going to be black color with opacity 0.25 The next value is going to be 000.2 m. Here we have the result. The color is going to be black with opacity 0.75 Then we need another value. One m Ram, 2.5 Ram, and the RGBA color with opacity 0.4 Next I'm going to set border radius to one Ram. Also change the coursor, make it pointer. The next thing that I'm going to do is to use flex box for the calculator. Let's set fp2p. Also, we need justify content center. And line items center, the patterns are aligned. Nicely. Next let's select clear, so it's width 225 Ram. Actually, with the layout we are done, the patterns are aligned perfectly. Next, I'm going to select BTN with before do element. Also, we need equal with before do elements. Let's set content to attribute data num, which we used in the HTML file. Here we have the numbers and the signs on the buttons. Let's set position to absolute. We need position relative for the parent element. I'm going to set top position to 0.3 Ram. The left position is going to be 0.4 Ram. Also we need bottom position 0.7 Ram. And right position is going to be 1.2 Ram. Next I'm going to change the color, it's going to be white. Let's set, Display the flags use Justify Content Center and Eline Items Center as well the numbers and the signs are centered. Next, I'm going to increase the phone size. It's going to be 2.2 Ram. Change the background, I'm going to use, again, linear gradients. The direction is going to be 90 degrees and the first color it's going to be 2d2d2 D. Then the next one will be 40, 40, 40. Now the buttons look nicer. Let's use box shadow we need here. -0.5 Ram, then -0.5 Ram, 1.5 Ram. And the RGBA color black color with Opacity 0.1 Then we need to add here another value, one Ram, 0.5 Ram, then one Ram, and the RGB with the Opacity 0.15 Then we need border on the left side, it's going to be 0.1 Ram solid. The color is going to be 0004. Then let's change here. We need border bottom. Border top, Now we need to use border radius, it's going to be one Ram. The buttons look pretty nice. Let's add here background to, it's going to be 62929. Also we need to select clear with before pseudo element and we have to change the background. It's going to be the same color. We need to place the code down below. The code will overwritten. We have here nice clear bottom. Let's add those borders to the element and change the color. It's going to be F four. We need the same thing for the equal button. Let's change the background. Use color 37925 as we need here. Equal with before element change the background. Use this code here. Also, we need those borders as well. Now, everything perfectly and with the styling, we're done. The only thing that have to do is to make click effect using PT and active. And also when it equal active. Let's set filter to brightness with value 1.5 We have here nice click effect. All right, now it's time to make the calculator work with Javascript. I'm going to create a function. Let's call it calculated here, an arrow function. We need to create a couple of different variables. The first one is going to be screen. Let's select it using query selector method. We need here class name, screen. Then the next element is going to be buttons. We need to select them using query select all method. Let's here PTN. Finally, we need here equal. All right, After that, I'm going to look through the buttons using forage method. Next, we need to add an event listener to the button using click event. And also we have to pass here a callback function. Let's add here parameter. Then we need to create variable value which will be equal to target dataset. We're grabbing here the numbers that we passed in the data num attribute. Let's check it in the console. I'm going to run the function. If I inspect the page and let's separate those windows, then switch to the console tab. If I click the numbers then we'll get m string map object in which we'll have the numbers. If I add here num property, then we will get numbers without any object in the console. Okay, let's get rid of this line of code. Next, I'm going to define the value of screen with plus equals sign. It will be equal to value. The numbers are added on the screen, I mean the values are added on the screen. After that, we need to take care of the equal sign. Let's add event listener to the equal sign with click event. And also we need callback function. Let's create variable answer. And I'm going to use built in function evil, which evaluates the expression. Next, we need screen that value to be equal to answer. If I make here the calculation that will get the proper answer. Now we have to take care of the clear function. Let's add even listener to the clear function with click event. Once we click the clear function, we need to make the screen empty. We need to add here empty string. Now everything works perfectly. The calculator works fine. We're done with this project. Hopefully it was interesting and you learned some new stuff. Let's move on. 17. Project - Website Header with Navigation Menu: All right, so it's time to move on and start to create our next project. In this section, we're going to be building a website header with a hamburger menu. The website is going to be about something like food or recipes. It consists of a couple of different parts. We have here a menu icon. If I click it, then the navigation items will display nicely, with some effects. If I hover over the items, then we'll get this nice hover effect. If I click again the menu icon, then the navigation items will close. Besides that, we have here a couple of different textual elements with an image which is placed nicely. Also on the right side, you can see here the image of the food, which creates really nice and cool sign. All right, that's it about this project. Let's go ahead and get started. I have created a new folder on the desktop in which we have an images folder. Let's go ahead and open this folder in VS code. Then create our working files for HTML, for CSS, four Ylscript as well. Then I'm going to open index, load HTML file and create the pac HTML structure. Let's change the title. I'm going to inside here landing page. Then let's go ahead and link CSS and al script files we need here styled CSS. Then let's open script tag and specify the name of the file in the source attribute. Let's open the project to the browser using live server. And then I'm going to place the editor and the browser side by side, like so. Let's go ahead and start to write the H mal mark up. We need deep tag which is going to be the container. Then I'm going to insert here another deep. It's going to be landing. Then inside the landing, I'm going to open navigation, in which we will have two parts. The first one is going to be the menu. I'm going to insert here, Lines, we will have three different lines. We need two classes, line on line one. Also, we need to change here the numbers. Besides the lines, we'll have here Span element. It's going to be the text menu. That's it, about the menu icon. Next, we need to create navigation items. I'm going to insert link element with the class. No item inside the link element. Well, span tag with the item name. It's going to be home. I'm going to insert an image tag. Let's select Image from the images folder. It's going to be image three. Then duplicate this element five times. Change the items, the second one is going to be about. Also we need to change the image names. Next we'll have recipes as image five. Then we'll have delivery image six. And finally we'll have contact. As for the image, it's going to be image seven. Okay, so here we have the images and the navigation items. Next I'm going to create the banner. Inside the banner, we'll have an image. Let's select image two from the image folder. Also, we need her class name. It's going to be image left. Then I'm going to open header. It will include H, one heading element. It's going to be best foot ever. Then we'll have paragraph recipes for healthy food. Let's duplicate it twice. The second paragraph is going to be the same day delivery as for the third paragraph. We will have here fresh and delicious products. All right, after that, I'm going to take care of the right side. We need, let's select image one from the image folder we need here, class name, image. Right? Also we need here which is going to be the plate. Okay. I think everything is created and with the HTM markup, we are done. Let's go ahead and take care of the CSS. I'm going to visit the Google Phones website, because we're going to use Google phones throughout this project. Let's go ahead and search for phone called Tilt. Now let's select this style. Also, we need another phone called Ctilium Web. Let's select a couple of different styles, then copy the link and paste it in the head elements. Next, I'm going to create some default styles. I'm going to select every element and then set margin and putting both of them to zero. We need box sizing to be border box. Also, I'm going to get rid of default text decoration. Let's set it to non, then set phone family to tilt cursive. Besides that, I'm going to set the phone size of the H tim element to 62.5% because we're going to use the Ram as a measurement unit. In this case, one Ram will be equal to ten pixels. Next, I'm going to select no items. I'm going to hide them for a while, using display non. Then I'm going to select banner, and I'm going to hide it as well. Let's select Container, Set its width 200% then the height is going to be 100 pot height. I'm going to change the backe color. Let's use yellow color which is going to be FD 861. Here we have the yellow color. Then I'm going to select Lending and define its width and height. The width is going to be 90% As for the height, I'm going to set 280, 5% Also change the background color. I'm going to use here color FFT, 868, f863. Let's change the border radius, make it two Ram. Also we need some shadow effect. Let's set pop shadow 201 Ram, six Ram. And the RGBA black color with opacity 0.3 Here we have the landing. I'm going to place it in the center using flax book. We need justify content center and a line items center for the parent element which is a container. Now the element is placed perfectly in the center. Next I'm going to select navigation that's define its position is going to be absolute dominate position relative for the parent element. Let's set two positions to zero and left position to zero as well. Then we need width to be five Ram. As for the height, I'm going to, then I'm going to change the background color. It's going to be white. Also, I'm going to set the heights to 100% Then we need for the radius 2m00 and two m, we need rounded corners on the left side of the element. Next, let's go ahead and select Menu Icon. I'm going to set its width to four Ram, then the height is going to be 16 Ram. Let's set the background color to CC for a while. Here we have the menu icon. Let's set position to absolute. Then the two position is going to be 50% the position is going to be 50% We need to center perfectly the element and for that we need to transform. Translate. -50% again -50% The element is centered, let's use flex books. I'm going to set flex direction to column. Then when you justify content space between and the line items center. Also I'm going to set the cursor to pointer. All right. After that I'm going to take care of the lines. Let's set width to 80% then the height is going to be two Ram. Also change the background color, red color for a while. Next I'm going to select line and set its width to 100% Then the height is going to be 0.3 Ram. Also change the background color. Use 555. Then we need border radius, it's going to be 0.5 Ram. Let's get rid of red color from here. Here we have the lines. Now we need to create some space between the lines. For that, I'm going to use display Flex. Flex direction is going to be column and we need to justify content with value space between here we have the lines separated. Also, I'm going to get rid of this background color from here. Now we need to take care of the span elements. I mean the menu text that's set text orientation to upright. We need to place the letters vertically. Then we need writing mode Vertical L, R. Increase the phone size. It's going to be 2.5 Ram. Here we have the text placed vertically. Then let's transform text into upper case change. The color is going to be 555. The menu icon looks pretty nice. Let's get rid of it is playing out from here. Set width to 25 Ram. We need height to be 100% change the position, it's going to be absolute. Actually we need to decrease the size of the image because they are too bigger. Right now let's set with 211 Ram. The height is going to be 11. Also we need object feet cover. Now the images become smaller and the working process will be more convenient. Let's set left position to five Ram. Then we need display flex. Flex direction is going to be column. Then I'm going to select now item and set flax to one. Now each item has even width. Let's change the background color. Is going to be 888. Then I'm set position of the image to absolute and I'm going to set two position to 50% Then we need transform translate Y with -50% in order to center the image horizontally, vertically. Next we need the right position to be minus three Ram. Also, I'm going to set position relative for the op item, which is the parent element. The images are placed nicely. We need to hide the parts of the images using overflow hidden. Now they look pretty nice and cool. All right, after that, I'm going to take care of the text elements. This pan element, let's set position two absolute. Then we need to position to be 50% Also we need to center them particularly using transform translate y -50% then the left position is going to be three Ram. Let's set the phone family to till Web Serif. Next I'm going to increase the phone size. It's going to be 2.5% two point, then increase the phone size, it's going to be 2.5 Fram also creates some space between the letters, then change the color. It's going to be 33. So as you can see, the spinel must look pretty nice. Next I'm going to select nova item with hover. I'm going to change the background color on hot 26. Also use transition for smoother effect. Here we have the wer effect. Next, I'm going to use Javascript to make the menu work. Let's create variable called menu icon and select this element using query selector method. I'm going to specify here the class name is going to be menu icon. Besides that, I'm going to create two other variables. The second one is going to be lines. Let's select lines. Then we need container. Let's specify here the name. Okay, now we have to add event listener to the menu icon with a click event. Let's add here callback function on click. We have to add new class to the container using togal method. The class name is going to be, let's say change. Now we have to use this class name in the Css file to create new rules. On click, we need change followed by the lines on click. I'm going to rotate the icon. Using rotate C function, the value is going to be 90 degrees. Let's use transition. If I click, then the menu icon will rotate. Next I'm height span element and the image using opacity zero and visibility hidden. Also, I'm no item using scale x function. Let's add it to zero, then I'm going to use change with item. Once we click the icon, we have to make the scale to one, back to its default value. Let's add here transition with transfer 0.5 second. Also I'm going to set the origin of the transformation to left. Let's, once we click then the items will display. If we get rid of transform origin, then you will see the results which we actually don't need. Next, I'm going to select span Elements with class change. Let's set opacity to one and visibility to visible. Also, I'm going to use transition with little delay time. We need the same thing for the image. Let's change the selector. We need image here. Let's increase the delay time, make it 0.7 seconds. Now, once I click, then we'll get this nice and cool effect. Items, or displaying on click, we can make this effect even better. Let's select item. I'm in the first element using Chad selector, followed by spun. Let's grab transition. Then I'm going to duplicate this element five times, change the Mph chart selectors, and also increase the delay times slightly. Now if I click, then the enough items time of the panelments will appear in order nicely. We need the same thing for the images as well. I'm going to change the selectors instead of span. I'm going to insert Image. Let's increase the delay time slightly because by default the delay time is different for image for this panelment. Now let's check. As you can see we have here cool and nice result. Let's get rid of transition from here. Now we need the similar thing for the nova item itself. Let's select the first nova item using chart selector corp, the transition property, then duplicate this code five times, change the numbers of the child selectors, and also we need to add delay time for each nova item with a different amount of time. Change the delay time for every item. Now if I click, then we'll get this nice and cool, perfect actually, With the navigation, we are done. Let's move on and take care of the rest of the parts of the project. Let's select the image left, set width to T m, then position is going to be absolute. Here we have the images. I'm going to set position for the image right to absolute. Also, I'm going to set right position to -10% Then let's go ahead and select header. Let's set display to none in order to hide the header for a while. Let's go ahead and position image on the left side, the position is going to be -15% As for the left position, I'm going to set it to -10% Then we need to transform rotate, the value is going to be 70 degrees. Then I'm going to set Opacity 2.5 The image is positioned nicely. We need overflow hidden for the landing in order to hide the part of the image. Also, I'm going to add in this property to the navigation because it ended up behind the image. All right, next I'm going to take care of the plate. I'm going to set its width to 70% and the height is going to be 100% Then I'm going to change the background color, it's going to be white. I'm going to set position to absolute. Then the right position is going to be -20% Here we have the plate which right now doesn't look like any plate. Let's set with 50% for the image. And also we need the index to be 100, then opacity, it's going to be 0.9 Here we have the image. Let's set border radius for the plate to 50% then 00.50% we need rounded corners to the right side. Let's set transform to rotate Z function. The value is going to be -30 degrees. Now we have here plate which looks pretty nice. Let's take care of the header. I'm going to set position to absolute, then to position is going to be 20% the left position is going to be 10% Here we have the header. Let's customize each of the elements. I'm going to select header. Each one. Heading element, let's set phone size to ten Ram. The phone weight is going to be 300. Next I'm going to select paragraphs. In the header element, the phone size is going to be 1.8 Ram. Then we need margin. It's going to be two Ram and zero. Also, I'm going to set text transform to capitalize. Next, I'm going to select header, followed by the four element. Let's set content to empty. Then we need position to be absolute. I'm going to set to position to 50% Then we need to center element vertically using transform translate Y -50% that position is going to be one Ram. Then we need width to be three Ram. As for the height, I'm going to set it 2.3 Ram. Then change the background color, is going to be 333. Here we have the elements. Let's set position to relative for the parent element. Now in order to fix the tiny issue, we need padding left five ram. Now the header looks pretty nice and we have to make the project responsive to different screen sizes. It's created for extra large screen size. If I check here the final version of the project for different screen sizes, then you will find out that the project is responsive. As you can see, it looks pretty nice on smaller screen sizes. Now if I check it for ipod or for phones, you will find that it looks pretty nice and responsive. Okay, I'm going to make the project responsive using CSS media queries. Let's create it and specify here the max width as 1,600 pixels. I'm going to select header H, one heading element. Let's set font size two m. Then I'm going to check the project on different breakpoint, it looks nice. Then I'm going to check it on smaller screen size. We have to make here some changes. Let's create new CSS media query. I'm going to set max width to 1,208 pixels. Let's select Html element and decrease the phone size 50% it will make all the elements smaller. Next, I'm going to select header H one. Let's decrease the phone size, make it seven. Actually, everything looks pretty nice. Let's set the screen to the ipad and create CSS media query. Set the mux width to 820 pixels. I'm going to select image left. Let's set the position to -10% Then I'm going to select plate and change its width. It's going to be 90% then the height is going to be 50% Also change the bottom position, it's going to be zero. Then I'm going to set the right position to minus two Ram. I'm going to move the image down below. Let's select image right, set its putting position to 15 Ram. Now we have here March, better result. Next I'm going to select header. Set its left position to 50% Also, we need to transform translate x in order to center the Elm horizontally. The header is placed in the center. Actually, with this breakpoint, we're done. Let's create a new CSS media query for slightly smaller screen size. The max width is going to be 768 pixels. I'm going to select header one and set its width to 50 Ram. Also, let's select image right and set weight to 45% Then the bottom position is going to be 12 Ram. Now I think everything looks pretty nice. And let's change the screen size. Then I'm going to create new CS media query. The max width is going to be 480 vehicles. I'm going to select image Left and set its width to 60 Ram. Next, I'm going to select header. Set left position to 65% Also, I'm going to select header H one and set the phone size to six Ram. We need to make a header smaller. Next, I'm going to select image right. Let's set width to 50% Then the bottom position is going to be ten Ram. Then we have to take care of the plate. Let's set height to 40% As for the right position, it's going to be -15 Ram. Now, it looks pretty nice. We need to create the last break point. Let's create CS media query and set x with 2,400.14 pixels. I'm going to select Html element. Let's set font size 240, 2% Everything looks pretty nice. And with the project we're done, It's responsive. Hopefully it was interesting and you enjoyed it. Let's move on and take care of the next project. 18. Project - Product Card: All right, so instead move on and start to create our next project. In this section, we're going to be building this cool and modern product card. The project will be created based on HTML and CSS. Let's go ahead and quickly describe it. As you can see, the card is placed in the center of the page. Behind the card, we have this nice and cool background. The card is about something like Raincde. In the center of the card, we have here a product which moves on, hover down below, you can see this nice and cool shadow on the left side of the card. We have two different headings for the right side. You can see here the details of the card. You can select color from here or size also the length chest and so on. Down below we have a bottom which on click moves, it creates nice click effect. Okay, that's it about this project. Let's go ahead and start to create it. I have created a new folder on the desktop in which we have a folder for images. Let's go ahead and open the folder in VS code. Then I'm going to create our working files for HTML and for CSS, we will have these two different files. Let's open indexed HTML file and create the basic HTMl document. Then I'm going to change the title. It's going to be product card. Then I'm going to link the CSS file. After that, I'm going to open the project to the browser using live server. Let's place the editor and the browser side by side. As usual throughout the project, I'm going to use Google phones. So let's go ahead and visit the website and search for phone called Josephine Sans. I'm going to grab different styles. Besides that, I'm going to search for another phone called Tilt Warp. Let's select the style, then copy the link and paste it in the head element. We are ready to start to create the project. We're going to start with the HD mal markup. Let's open tag, which is going to be the container inside the container I'm going to create card. Then we'll have here, I mean, the left side and also we'll have the right side, the left side. To insert H three heading elements with the text in code here, second heading which is going to be H one with the text spring sale offer insert here div tag which is going to be card left image. Let's select Image from the images folder. It's going to be code. All right, that's it, about the left side. Let's go ahead and create the right side. I'm going to open tag, which is going to be product info. Let's open another dip, which is going to be color. We need paragraph color followed by the development, which is going to be colors. We'll have here panelements, I mean four span elements. Next I'm going to create size we need here, paragraph with the text ties. Then I'm going to insert your deep tag with the class sizes in which we'll have elements, four span elements with different sizes like L x L and so. All right, after the sizes I'm going to create details in which we'll have, I'm going to create paragraph with the text sleeve length. Then we'll have here another paragraph with the text 66 M. Then we'll have sleeve counter also. We'll have here class counter. Next I'm going to create chest in place paragraph with the text chest. So we'll have here another paragraph with the text 102 M Santi meters. Then we'll have chest counter. We need again another class counter. All right, finally I'm going to insitu your bottom with the class card BTN, let's set the type two bottom and I'm going to institute your text. Proceed. Okay. The HD mal markup is created and now we can start to write the CSS. First of all, I'm going to create some default styles. Let's select every element using an asterisk. Set margin and padding to zero. Then I'm going to set the box sizing to border box. Also we need a phone family to be Josephine Sans Santerif. Next, I'm going to set the phone size of the atuml element to 62.5% because we're going to use M as a measurement unit. In this case, one M will be equal to ten pixels. After that, I'm going to take care of the card left image because it's too big. Right now, let's set with 235 frame. Next, I'm going to select image itself and set width to 100% No, the image became smaller and we can start to customize the container 100% Then the height is going to be 100 viewpot height. I'm going to set the background. Let's use linear gradient. I'm going to use the first color, white with lower opacity 0.2 As for the second color, it's going to be white again with the opacity 0.2 Next, I'm going to set the image as the background, but selected from the images folder. Then they find the position is going to be center. Also, we need no repeat. Next I'm going to set the background size to cover. We have here this nice and cool background image. I'm going to use Flex book in order to center the card using Justify Content Center and a line items center. The card is placed in the center. Now it's time to customize the card itself. Let's select it and set to 100 Ram. Then the height is going to be 65 Ram. I'm going to set the shadow to 01 Ram, six Ram. And the color is going to be black with opacity 0.5 We have here card with a shadow. Let's use flax books. I'm make the corners of the card, round it using border radius. Then I'm going to set the courser to pointer. All right, let's go ahead and take care of the left side. I'm going to set its width to 65% then the height is going to be 100% Also, I'm going to change the background color. Let's use RGBA 120-31-2106 the opacity 0.7 Then I set the border radius to 1m00 and one Ram. We need rounded corners on the left side. Here we have the background. After that I'm going to take care of the right side. Let's set with 230, 5% then the height is going to be 100% Also change the background color. I'm going to use here RGBA 903-80-6606, and the opacity 0.7 all cells at the border radius to 01m1 Ram and zero, okay? So the left and right sides are separated with the backgrounds. Next I'm going to set the position of the image wrapper to absolute. We need position relative for the parent element which is left. Let's set the position to 12% As for the right position, it's going to be -8% As you can see, the image is placed nicely. Next I'm. Set the pack drop filter to polar with the value 0.5 Ram for the right side, so as you can see the background is polar. Now let's display the image using Z index property with the value 100. Actually I'm going to select card left image with the after pseudo element. Let's set content to empty. Then the position is going to be absolute. Then I'm going to set bottom position, two minus seven Ram. The left position is going to be 50% And we need to send to the element using transform translate x -50% Actually we're creating the shadow down below. Let's set with 232 Ram. Then the height is going to be ten Ram. Change the background color. I'm going to use RGB, a black color with opacity 0.4 Also use border radius. Let's set it to ten Ram. As you can see, have here the elements. Let's use filter with a blur function. We'll evalue 3.5 Ram. As you can see, we have here a shadow. Actually I'm going to create the hover effect on hover. I'm going to move the image up. Let's set to position to 8% and also use transition for a smoother effect. Next, we need to change after. So the element I'm in the shadow on hover. Let's use bottom position, make it minus ten Ram. And also use filter. I'm going to increase the value of the blur function and then use transition for smoother effect. Let's check. Now as you can see we have here really nice and cool hover effect. Okay, now let's go ahead and customize the headings. I'm going to start with the H three heading element. Let's set position to absolute then the top position is going to be 15% As for the left position, I'm going to set to 10% then I'm going to increase. Let's change the phone family. It's going to be to Tarp Cursive. Increase the phone size, it's going to be three. Ram also creates some space between the letters. Change color. It's 31227. So we have here the first heading element. Let's duplicate this code, change the selector. We need H one heading element. Change the two position is going to be 22% Then I'm going to increase the phone size. Let's say 4.5% 4.5 Ram. Also use text transform, make the upper case, then we need line height to be one. And also we need to change the color. Going to use nine, B, D, seven. We have here the second heading. Let's set with 22 Ram. Now it looks much better with the left side. We're done. Let's move on and take care of the right side. I'm going to use Flex books. Let's use Justify Content Center and Align Items Center. As you can see, the content is placed in the center of the right side. Next, I'm going to select Product Info. Let's set width to 24 Ram. Then I'm going to select Product Info. Follow the paragraph. Let's set font size to 1.2 Ram. Then the font eight is going to be 300. Change the text transform property, make the upper case. Then I'm going to set the color to RGBA, 255-25-5255 I mean the white color with opacity 0.7 The paragraphs look nice. Let's go ahead and select colors. Set display flex. Then we need margin. It's going to be two Ram and zero, then four Ram and again zero. After that, I'm going to select color span. We have four span elements for different colors. Let's set width to six Ram, then the height is going to be 0.5 Ram. Change the background color in order to see the span elements for a while. Let's get rid of it now. I'm going to select the first spin element using nth child selector. Let's change the background color. I'm going to use color CDD C seven. Here we have the first color. Let's duplicate this code three times. We have overall four spin elements. Let's change the nth child selectors. Then I'm going to change the background colors. The second one is going to be 986, then we'll 55542. And also we need here 383123. We have here four different colors. All right, next I'm going to take care of the sizes. Let's set margin to two, then 04.0 Next I'm going to use flex books. Let's set justify content two. Space between. So as you can see, we have space between the sizes nicely. Let's select span element. Set the phone size to 1.6 Ram. Then the phone weight is going to be 300. Also change the color, make it nine B, D seven. Then I'm going to set the width to three Ram. The height is going to be three as well. Next I'm going to select the second spin element using child selector. Let's set border radius to 50% we need circle. And then set border 2.1 Ram solid. And the color is going to be nine, B, D seven. We have here circle, but we need to place the size inside the circle. Let's use flex book using justify content center and the line items center. Now the size is centered inside the circle. Next I'm going to take care of the sleeve. Let's select chest as well. I'm going to set with 100% Then we need flex books, followed by justify content space between. Next, I'm going to select counter. Let's set with 22 Ram, then the height is going to be two Ram. Let's use border radius to make the circle, set it to 50% Next I'm going to set border 2.1 Ram solid and use this color. Next we need margin two Ram and 04 Ram zero. We have here circles for both elements. Next I'm going to select sleeve counter transform. Translate x function 30 to 16 Ram. Next we need chest counter. Let's change the value. It's going to be five Ram. We have just moved the circles by different amounts. Let's select sleeve counter followed by the before pseudo element. Let's set content to empty. We need to create lines. Let's set position to absolute. Then we need position relative. For the counter, which is the parent element, we need to position to be 50% then right position is going to be two Ram. Then we need to transform, translate y function in order to center vertically the element. Next, I'm going to set the width to 16 Ram. As for the height, it's going to be 0.1 Ram. I'm going to change the background color. Let's use the same color. Here we have the line for the sleeve length. We need the similar line on the right side as well. Let's use after sugar element, we just need to change the right position, is going to be minus six Ram. And also change the width. We need six Ram. We have here nice and cool counter. Let's do the same for the chest counter as well. Let's change the class names as we need to change the width for the before element, it's going to be five Ram. After element we need right position to be -17 Ram. And also the width is going to be 17 Ram. All right, both counters look pretty nice and now we have to customize the bottom. Let's go ahead and select this element. I'm going to set with 12 Ram. And the height, it's going to be five Ram. Let's change the background color. Use again, the same color. I'm going to set display to block, then margin A O in order to center the element. Now the bottom is centered. Next, let's set the border radius to five rams. I'm going to get rid of default border. Next, I'm going to add font size, make it 1.4 Ram. The font weight is going to be bold, then the text transform is going to be upper case. Also, we need some shadow effect. Let's set it to 0.1 Ram, 0.2 M, one Ram. That's the color I'm going to use black with the opacity 0.4 The button looks pretty nice. Finally, I'm going to set the cursor to pointer. Okay, we're almost done. The only thing that we have to do is to create click effect using active do class. We need transform. Translate y function with value -0.2 Ram. If I click the button, then we'll have this nice and cool click fact. All right, so we're done with this project. I hope you enjoyed it. Let's move on and take care of the next one. 19. Project - Animated Contact Form: All right, let's move on. And so to create our next project, in this section, we're going to be building an animated contact form with HTML and CSS. This project is going to be simple one, but I think it will be interesting and a little bit funny. As you can see, we have here some funny animations and effects. Everything that you see here is created with pure HTML and CSS. We don't use here any images. At the top of the page, we have a heading, then it is followed by the waves, I mean the sea. In the sea, you can see two groups of fish. They're moving from left and right sides. Besides that, we have here a couple of different input fields and a Submit button. All right, so let's sit about this project. Let's go ahead and get started. I have created a new folder on the desktop. Let's go ahead and open it in VS code and then create our working files. We're going to use only HTML and CSS we need here index HTML and styles. Then I'm going to open index HTML file and create the basic HTML document. Let's go ahead and change the title. Is going to be contact form, then I'm going to link the CSS file. Then let's go ahead and run the project to the browser using live server. Let's place the editor and the browser side by side. All right, throughout the project, we're going to use Google phones. So let's go ahead and visit the website. I'm going to search for Google phones called rubic bubbles. Let's select the style and then grab the link we need to paste the link in the head element. All right, that's it. Let's go ahead and to create the H mal markup, we need a container. I'm in the deep tag in which I'm going to insert water. Then we'll have waves in which I'm going to create ten waves, I ten deep elements. I'm going to open deep tag, which is going to be fish group also. We will have here another class fish group. One. Next we need, which will consist of fish Tidy. Let's duplicate this code five times. We'll have six fish in each group. Then I'm going to duplicate the entire group and change the class name. All right, Right now nothing is visible because we have just the empty developments. Let's go ahead and start to write the CSS. I'm going to select every element and then set margin and putting both of them to zero. Next we need box sizing to be border box. Also set the outline to non change phone family. It's going to be rubic bubbles. Next, I'm going to set the phone size of the HTml element to 62.5% in order to use the Ram as the measurement unit. In this case, one Ram will be equal to ten pixels. Let's go ahead and take care of the container. I'm going to set width to 100% then the height is going to be 100 pot height. Next, I'm going to select water. Set the width to 100% The height is going to be 85% Set the position to absolute. We need position relative for the parent element, the container. Next we need bottom position to be also left. Position is going to be zero as well. The background color is going to be 60 PTE six. Here we have the water. Next I'm going to select waves. Let's set width to 100% Then the height is going to be ten m. Next we need to change the background color. Let's use color EE. Set the position to absolute. Then position is going to be 15% that position is going to be zero. We have here the waves. Next I'm going to select wave itself. Set width to 10% then the height is going to be ten Ram. Change the background color, I'm going to use white color. Here we have the waves. Let's use flex box in order to place the items horizontally in a row. I'm going to get rid of this temporary background color. Then I'm going to set the border radius for the wave to 00, 50% and 50% Also we need 50% As you can see, we have here the waves. Okay, After that, I'm going to select Fish Group. Let's set width to 40 Ram. Then the height is going to be 15 Ram. I'm going to change the background color, Let's make it C. Then change the position, it's going to be absolute. Also set the top position to 50% Left position is going to be 40% Here we have the first group. Let's select Fish body. I'm going to set with to six Ram, then the height is going to be three Ram. Change the background color, I'm going to use 26388. Next I'm going to set the border radius to 65% then 40% 40% and 65% 50% Now we have fish bodies. Next I'm going to select fish tail. That's set with zero. Height is going to be zero. We need border. We need border to be two Ram solid. The color is going to be transparent. Next, we need border top with the value zero. Then I'm going to use border bottom with values 1.8 Ram solid, and the color is going to be 26388. As you can see, we have here triangles created by the borders. We need to rotate them. Let's use transform the rotate Z function. The value is going to be 90 degrees. Tails are rotated, but we need to move them and place them behind the next to fish bodies. Let's select Fish Set Display Flex. Now we have better results, but we need to move the tails close to the bodies. Let's use margin, right, With value -1.2 Now we have to move the tails. Let's use line items center. Now everything looks pretty nice. Let's set border radius to one ram in order to make the tail slightly rounded. Let's set the position to absolute. Now all the fish ended up on top of each other. Let's select fish with the selector, it's going to be the first fish. Let's set top position to 40% then the right position is going to be. Two Ram. Here we have the first fish. Let's decrease the opacity. Make it 0.3 Then I'm going to duplicate this code. Change the, we need to position to be zero. As for the right position is going to be ten Ram. Here we have the second fish. Let's duplicate the code, change the number. The two position is going to be 30% As for the right position, I'm going to make it 15 Ram. Then we need fourth fish. Let's set bottom position to zero. Right position is going to be eight ram. Next we need fifth item. I'm going to change the top position, it's going to be zero. As for the left position, I'm going to make it eight Ram. Then we need sixth item, let's set the position to 40% As for the left position, I'm going to set it to two Ram. Next we need seventh. The bottom position is going to be zero, is for the left position. I'm going to make it ten. We have here all the fish aligned. Let's get rid of the temporary background. So as you can see, we have here the group of fish. They look pretty nice. Next I'm going to select fish group one. The two position is going to be 35% left position is going to be -25% Let's duplicate this code, change the class name. We need Phish group two set two position to 70% As for the right position, I'm going to make it -25% And also we need to transform translate y18 degrees. As you can see, the fish group is placed down below. Actually, if I remove these two lines, then the fish group will end up on the right side. Actually, they should be rotated. We need here rotate Y function and not the translate. The fish group is rotated. Next we need to create the animation. We need CSS key frames. The name is going to be phish group one at 0% we need left position to be -25% As for the transform rotate y function, it's going to be zero. Then the next step is going to be 47% on that step. Going to set the left position to 100% as the rotate function is going to be the same. Then the next up is going to be 53% The left position is going to be 100% As for the rotate function, I'm going to set to 18 degrees. Then the next step is going to be 100% This is the end of the animation. I'm going to grab those two lines. Let's set the rotate function to 18 degrees. Now we need to apply those rules using animation property that's institute fish group one, the name of the animation. Then we need duration 30 seconds infinite. And the linear function. As you can see, the fish group is moving nicely from left to right. Once they are hidden, then they should rotate and go back to the left side. All right, everything works fine. Now we need the same animation for the second fish group. Let's change. The name is going to be fish group two, then here, right, position, Rotate function is going to be 180 degrees. Then change here again, the position we need, right 180 degrees. We need the same thing on that step as well. Let's insert here zero. We need here zero. Again. Let's set animation for the second group we need here delay 4 seconds and also change the name. We need fish group two. As you can see, both groups are moving nicely. We need to get rid of this scroll bar from here. Let's set overflow hidden for the container. Okay, so now we no longer have the scroll blows and both groups move nicely. Next we need to take care of the input fields. Let's create HTM on mark up. We need contact. Then H one heading element with the class name contact heading, it's going to be contact us. Then we need form element with the class name contact form. Let's inst deep element which is going to be input group. I'm going to insbela's be your name then I'm going to in input element with the type text. Let's duplicate this code. We need the same input group for email, Change the type. It's going to be email. Then we need input group for message instead of input elements, I'm going to use text area. Here we have the input fields. Let's go ahead and style those elements. I'm going to select contact heading. Let's set this position to absolute. The top position is going to be frame, then we left position it's going to be 50% And when to center the element using transform translate x -50% Next I'm going to set the phone size to nine Rams, change the color, it's going to be an orange color, 36414. Here we have the heading. Let's use here some shadow effect. Let's set text shadow to 0.5 Then one RB, a black color with opacity 0.2 All right, the heading looks pretty nice. Next I'm going to take of the contact form. Let's set this position to absolute. Then the two position is going to be 35% I'm going to set let position to 50% We need again, centering using transform translate x -50% the contact form is centered on the page. Next I'm going to select input group. Let's set display to flex. We need to change the direction it's going to be column. Then I'm going to set margin at the bottom to three Ram. As you can see, we have some space between the next. I'm going to select label. Let's set font size to 2.3 Ram. Then color is going to be white. I'm going to set margin at the bottom to one Ram. The labels look nice. Next I'm going to select the input elements. Let's set with 250 Ram. Then the height is going to be. 0.5 Ram. We need border to be none, Then we need round the corners using border radius, three Ram. Next, I'm going to create some space using padding. Let's say it to one Ram, 1m1m, and then two Ram on the left side. The first two input fields look pretty nice. Next I'm going to set the phone size to 1.6 Ram, Change the color. I'm going to use 555. We need box shadow 000.3 Ram, one Ram. And the color is going to be RGBA with Opacity 0.1 All right, Next I'm going to take care of the text area. Actually let's copy those lines then set the height to ten Ram. As you can see, the text area looks nice. Next, I'm going to place here, bottom. We forget we forgot Submit button. Let's set class name to contact. Btn we need here send message, then I'm going to select bottom. Let's set with 250 Ram. Then the height is going to be five. Change the border, make it none. Then we need background color to be orange. Change the color, it's going to be white. Then I'm going to make font size two Ram. Also, we need some space between the letters. Let's set it 2.2 Ram. Then transform text into upper case. Next way is border radius. In order to make the button rounded, then I'm going to use some shadow. Let's grab this code from here and use it for the button as well. Finally, let's set courser to point. Okay, so that's it. We're done with this project. Hopefully it was interesting. Now let's move on and take care of the next project. 20. Project - Glowing Button: All right, it's time to move on and start to create our next project. In this section, we are going to be building this nice and cool, glowing bottom. The project will be created based on HTML and CSS. We will use just these two technologies. As you can see, we have here a bottom with some text and also the shadow down below. The text inside the bottom is blinking and also the shadow is glowing. If I hover over the bottom, then we will get this nice and cool effect. The text will stop blinking and also the shadow will expand, right? I think this project is going to be interesting and funny. You will learn about how to create those effects using just HTML and CSS. Okay, let's go ahead and get started. I have created a new folder on the desktop, which right now is empty. Let's go ahead and open it in VS code and create our working files for HTML and CSS. As we said, we're going to use just these two technologies. Let's go ahead and open index HTML file and create the basic HTML document. I'm going to change the title of the project. It's going to be button, then I'm going to link the CSS file. Let's specify here the name of the file. Let's open the project to the browser and place the editor and browser side by side. Besides that, I'm going to grab Google phones from the Google Phones website. Let's go ahead and search for the phone called sign Can negative. Let's select these styles, then copy the link and paste it in the head element. Okay, so now we can start to write the H m mark up, open deep tech, which is going to be the container. I'm going to insert a button with the class BTN. Then we need type attribute, which is going to be button. I'm going to insert your span element with the class Text me here, hover. That's it about the H mal markup. Let's start to write CSS. We need margining padding for every element to be zero. Then I'm going to set box sizing to border box. Next I'm going to set the outline to non. Also change the font family he signica negative serif. Then we need to set the font size of the H dimel element to 62.5% in order to use m as the measurement unit. In this case, one m will be equal to ten pixels. Next, I'm going to select the container. Let's set with to 100% Then the height is going to be 100 viewpot height. Change the background color. I'm going to use here color 1611d, it's a dark color. Then we need flex box in order to center the content. Let's use Justify Content Center and a Line Items Center. As you can see, the bottom is placed in the center of the page. After that, I'm going to select glowing PTN. Let's with 245 Ram, then the height is going to be 12 Ram. Let's set background to none. Here we have the bottom. Next we need to define border. Let's set it 2.7 Ram, solid. At the color, I'm going to use RGB function. The values will be 212044. Next, I set border radius to two Ram. Let's make the corners rounded. Next, I'm going to set the color to the same RGB value. Actually we need here 74.4 Now the color is changed slightly and I think it's much better. Next, we need size to be seven Ram. Then I'm going to create some space between the letters. Let's set it to 2.5 Ram. Change box shadow is going to be in set 003 Ram RGP and the same color. Now we have much better results. I'm going to use padding left 2.5 Ram. Next let's set cos two point. Let's see about the bottom right. Now next we need to select bottom, followed by the before element. Let's set content to empty. Then I'm going to set width to 100% The height is going to be 100% I'm going to set the position to absolute. We need position relative for the pattern element, which is the button itself. Let's set the position to zero. Position is going to be zero as well. Next we need box shadow 006 Ram. The color is going to be the color that we used. Next we need glowing bottom with after element content is going to be empty. Then we need position to be absolute. Top position is going to be zero. The left position is going to be 50% then the width is going to be 100% As for the height, I'm going to say to 100% as well. Next I'm going to define the background. The color is going to be the same. Let's set the opacity 2.7 Then we need to transform translate -50% and then 130% Also I'm going to use here rotate function according to x direction, the value is going to be 45 degrees. And also I'm going to use scale function 1.35 Here we have the element. Let's use filter with blur function with value three Ram. Step by step we're creating the shadow. Let's set the point events, none. Next, I'm going to use perspective, which will help us to create three D effects. Let's say it to six Ram. As you can see, the shadow has expanded. Next I'm going to select glowing text. Let's set tech Shadow 2001 Ram. The color is going to be RGBA 212474. Then we need another value, 001 Ram. Rgba the same color but with the opacity 0.7 Actually, we need here opacity 0.7 as well. You can see here the result. Next I'm going to create CSS animation. Let's set the name of the key frames border any at 0% we need the opacity to be 0.1 Then the next step is going to be 2% and the value will be one. Let's duplicate this code change. The percentage value is going to be 4% the value will be 0.1 Next we need 8% and the value of the opacity, it's going to be one. I'm going to insert 70% with the opacity 0.7 Then I'm going to set 100% and the opacity one. We need your animation function in order to apply those rules. That's the duration to 2 seconds. Then we need linear and also infinite. As you can see, we have here nice and cool, glowing effect. Next, I'm going to create another key frames with the name text. Any at 0% I'm going to set opacity to 0.1 The next up is going to be 2% the opacity will be one. Then we need here 8% and the opacity 0.1 Then the next step is going to be 9% with the value one. Then we'll have 12% capacity is going to be 0.1 Next I'm going to insert your 20% with the opacity one. Then we'll have here 25% with value 0.3 The next step is going to be 30% and the opacity is going to be one. The insert your 70% with value 0.7 The next step is to be 72% with the value 0.2 Let's duplicate again this code change. The percentage value is going to be 77% and the opacity is going to be 0.9 Then I'm going to set the percentage value to 100 and the opacity 0.9 Let's use again animation property with the name of the key frames. The duration is going to be 3 seconds. Then we need linear and again infinite As you can see, we have here nice blinking and glowing, the facts. The only thing that I have to do is to create the hover effect glowing button. With hover, I'm going to set background to RGB, the color that we used. I'm going to change the color of the text. Let's say 22729 to be. Then we need animation to be none. Also use transition. Once we will get this nice and cleft, actually the text is still blinking, so I'm going to select glowing bottom with hover followed by the before pseudo element. Let's set box shadow 2015 Ram and the RGB, the color also use transition. Now the shadow is expanding nicely. Next I'm going to select bottom with hover followed by the after element. Let's set with 2,100.20% The height is going to be 120% Also we need transform. Actually let's scrap this value. I'm going to change the translate value. It's going to be 110% Also, I'm going to use her filter with blur function with value five. Also, use transition for smooth effect. Now everything looks pretty nice. Finally, I'm going to take care of the text. Let's select button with hover followed by the glowing text selector. We need to stop the animation. Let's set it to non. All right, so now every perfectly and with this project we're done. Let's move on. 21. Project - Hamburger Menu: All right, it's time to move on and start to create our next project. In this section, we are going to be building a hamburger menu with HTML, CSS, and Javascript. Let's go ahead and describe the project. As you can see, we have here a full screen background image. In the center of the page, you can see the text hamburger menu. The letters have transparent background and the borders. Then at the top right corner of the page, you can see the menu icon, which has this nice and cool animated background. If I click the menu icon, then the background will expand and the menu items will display. If I hover over the items, then they will change the color in this cool and nice way. Then if I click the X, patton, the menu items will hide. All right, so I think this project will be interesting and you will enjoy it. Let's go ahead and get started. I have created a new folder on the desktop which includes folder for the images. Let's go ahead and open the folder and VS code and then create our working files for HTML, CSS, and also for Javascript. Next, I'm going to open the index HTM file and create the basic HTM document. Let's change the title. It's going to be hamburger menu. I'm going to link the CSS and also the Javascript files. We need script tag and the file name in the source attribute. Okay, let's go ahead and open the project in the browser. Then place the browser and the editor side by side, like so. Next, I'm going to visit the Google Phones website, because we're going to use the Google phones throughout this project. Let's go ahead and search for the phone called Secular One. I'm going to select the style, then copy the link and paste it in the head element. Now we can start to create the HD mark up. Let's open Deep Tag, which is going to be the container. Then inside the container, I'm going to open Lending, in which we'll have H one heading element, hamburger menu. Next, I'm going to create hamburger menu, in which I'm going to insert of elements with the class navigation. Inside the navigation, we'll have link element, which is going to be the navigation item we need here. Data content, attribute the text home. Let's insert home here. Then we need a couple of different items. The second one is going to be about the block. The next one is going to be gallery. As for the last navigation item, it's going to be Contact. Next, we need the menu. I'm going to insert here, Lines. We'll have three lines. Each development will have two classes, line, line one, line two, and line three. All right, that's it about the HTML markup. All the elements are created. And now we have to open the CSS file and start to write the CSS. First of all, I'm going to select every element using an asterisk And then set the margin, and putting both of them to zero. Next, we need to define the box sizing property. It's going to be border box. Then we need text decoration to be none. Also, I'm going to set the phone family for every element, two secular, one sensor ref. As you can see, the default styles are applied to the elements. Next, I'm going to set default size of the HTM element to 62.5% because we're going to use M as the measurement unit. In this case, one M will be equal to ten pixels. Let's go ahead and select the container. I'm going to define its width. It's going to be 100% then we need height, it's going to be 100 epot height. Then I'm going to take care of the landing. Let's set it's with height. I'm going to set width to 100% As for the height, it's going to be 100% as well. We need to expand landing. Next I'm going to change the background. Let's use linear gradient. The first color is going to be RGBA black color with opacity 0.8 As for the second color, we need here the same RGBA value, but the opacity is going to be 0.9 Next, we need to select the image from the images folder. We need a full screen background image. Also we need position to be center and then no repeat. We have here the full screen background image. Actually, I'm going to set background size property two, cover next. Let's go ahead and use Flex books. We need to center the heading for that. Use Justify content center and the line items centers can see the heading is centered perfectly on the page. Next, I'm going to select the H heading element and customize it. Let's define phone size. It's going to be ten. Then we need color. Let's set color to C A, A five. Oh, it's yellow color. Next I'm going to create some shadow effect. Let's set text shadow 203 Ram, six Ram. And the RGBA color with opacity 0.7 Next I'm going to create some space between the letters. Let's set it 2.3 Ram. Now we need transparent background for the letters. For that, I'm going to use property called Webkit Text stroke. It's going to be 0.1 Ram and the color is going to be yellow. Also, we need to set the color to transparent. So as you can see, the heading looks pretty nice. Next, I'm going to take care of the navigation items. Let's select Link Element and use display None in order to hide the link elements. Now we have to take care of the navigation. Let's define with height. The width is going to be, then we need heights as well. Change the background color. We're going to use here Color 28231. Here we have the element down below. Let's take care of its position. I'm going to set position to absolute. Then we need position relative for the container. Because we are going to position the element according to the container. Let's set top position to four. As for the right position is going to be as well. Then we need box shadow. Let's set it to 013. And the color is going to be black with the opacity 0.7 Here we have the element placed at the top right corner of the page. Let's go ahead and create CSS animation using key frames. We need here name BG Anim at 0% I'm going to set the border radius to the following values. The first one is going to be 63% then we will have 37% The next one is going to be 54% then 46% then we need here. And 85% 48% then 52% The last one is going to be 45% The next step is going to be 14% Let's grab this code from here and then change the values we need here. 40% then 60% The next one is going to be 49% Then we'll have 60% 40% and the last value is going to be 51% Then I'm going to place your next step, 28% Let's grab the code again, change the values. The first one is going to be 54% then 46% 38% 62% Next we'll have here 70% 30% And 51%. The next step is going to be 42% Let's go ahead and change again the values for border radius. We need here 61% then 39% The next one is going to be 55% 45% Next we need 61% then 38% 62% 39% Let's go ahead and define the next step. It's going to be 56% change the values. The first one is going to be 61% 39% 67% 33% Then we will have 70% 50% 50% and 30% The next step is going to be 70% Let's change the values. First one is going to be 50% then again, 50% 34% 66% Then we need here 56% 68% 32% and 44% The next step, it's going to be 84% Let's change the first value. It's going to be 46% Then we'll have 54% 50% Then again, 50% Next we have 35% 61% 39% 65% All right, As part of the last step, I'm in 100% We need the same values that we used for the first step, the key frames already. Next we need animation property. Let's insert the name of the animation. Then we need duration, 7 seconds, linear and infinite. As you can see, we have here this nice and cool animated elements. Let's take you of the menu icon. I'm going to define this position. Let's set it to absolute. Then we need two positions. Going to be seven Ram. Then we'll have here right position. I'm going to set it to six Ram. Set the width, it's going to be 3.5 Ram. Then the height is two. Then set the cursor pointer, and also we need background color. Let's use here yellow color. Here we have the menu icon. Now we have to take care of the lines. Let's set with 23.5 Fram, then the height is going to be 0.2 Ram. Change the background color, use here again, yellow color, and then get rid of this temporary color from here. Here we have the lines, Now we have to separate them. Let's set position absolute. Then we need to select line one. Define two. Position is going to be zero. Then we need line two. We need width to be 60% Then to position is going to be 0.9 Ram. Also we need left position. Let's set it two point sevel Ram. Here we have the second line. Let's take here of the third line. I'm going to grab this code, set class name to line three. Then we need to position to be 1.8 Ram, allright. So here we have the menu icon. It looks pretty nice. Now we need to write some Javascript. Let's create variable. It's going to be menu icon. I'm going to select this element using query selector method. We need to specify here the class name. It's going to be menu icon. Then we need another variable. It's going to be hamburger menu. Let's change the class name. We need hamburger menu. Next, I'm going to add an event listener to the menu icon with a click event. Also, we have to pass here the Calbeck function which will be executed. Once we click the element on click, we have to add new class to the hamburger menu using Togo method. The class name is going to be, let's say change. Now we have to use this class name in the CCs file in order to create new styles, which will be applied once we click the menu icon. Let's go ahead and use Change with Navigation. Once we click, then we need to change. The top position is going to be 50% then right position is going to be 50% as well. And we need to center the element using transform translate. The values will be 50% and then -50% Once we click the icon, then the element will be placed in the center, the navigation. Now we have to increase the size of the element. Let's set with 200% then the height is going to be 200% as well. Also we need to post the animation. For that, I'm going to use property called animation play state and it's going to be post. If I click, then the element will be expanded, the animation will stop. Now we have to hide those scroll bars. For that, I'm going to use overflow hidden. Now we don't have here scroll Bs. Next, I'm going to add here transition. In order to make the effect smoother, we need some delay time and also cubic busier function to make the effect nicer. The values will be 0.20 3,110.30 2.1 Again, also we need here. Right position is going to be 0.4 seconds. The duration is going to be 0.4 seconds. Then we need delay time. Again, the Cubic busier function. Next we will have transform. The duration is going to be 0.3 seconds. Then we need delay time. Next we need with, with the duration of 0.8 seconds delay time is going to be 1 second. And again we need cubic busier function. Next comes height 0.8 second, 1 second. And the same cubic ser function. Actually that's it. As you can see, we have here this nice and cool effect. The navigation is expanding in this cool way. Let's grab the transition and add here. By default, let's organize the code, then get rid of delay time and change it. Make it 1.1 second. We need here again, 1.1 second. Next comes transform. Let's change the delay time. It's going to be 1.1 second. As for the width, we need here 0.7 second and then 0.4 second as for the height. Let's add here the same values. Now if I click and then close, we'll get here the nice and cool animated effects. Okay, now we have to take care of the lines. Let's start with the line one. We need two positions to be 0.9 gram. Then we need to transform Rotate function. The value is going to be 45 degrees. Next we need line two with the class change set the opacity to zero and feasibility, we need to hide the second line at all. As for the third line, we need here two position to be 0.9 Ram. Then the transform property will have rotate the function with the value -45 degrees. Once I click here, little issue. Yes, we need to change the class name. Now we have here an x closing button on click. Let's add here transition. Top 1 second, I also grab the cubic busier function. Also, we need here transform 0.3 second, 1.6 second. Then I'm going to copy, actually we need here transition and not the transform. Let's copy the code, Paste it here. Once I click, then we'll get this cool transformation of the menu icon. I think it looks pretty cool. Next, let's use transition for the first line. And the delay time is going to be 1.6 seconds. Also, we need duration point 1 second without delay time. Then use transition for the second line. By default, we need opacity point 1 second and the delay time 1.6 second. Let's copy the code. Actually we need it for line three. Now if I click, then we'll get here. This nice and cool fact. Okay, let's take care of the navigation items. I'm going to display them back. Let's customize the link elements. I'm going to use flex books with justify content center. And then we need to change the direction. Let's make the column and beside that, we need the line items center as well. As you can see we have here the navigation items. Let's set font size to seven Ram. Then the color is going to be CCC. Change the letter spacing. Let's set it to 0.3 Ram. Next we need margin bottom. Let's make it one Ram. Here we have the navigation items. They look nice. Let's select navigation followed by the link. And then before development, the content is going to be attribute data content that we used in the HTML element. Then I'm going to set the position to absolute. Then we need position relative for the parent element. Let's set to position to zero. Then the leg position is going to be zero as well. I'm going to set the color to yellow. I'm going to set the color to B, D nine. Then the width is going to be 100% Here we have the forced the element. Let's set width to zero and then hide the element using overflow hem. We need white space to be p. Next, we need to select navigation A with hover followed by the before element. On hover, we have to change the width. It's going to be 100% Then we need you transition with 0.6 second is out. Once I hover, then we'll get this nice and cool effect once I close navigation. Then we'll have here a little problem we need here, opacity zero and visibility. Next, I'm going to use change, followed by the navigation link. We need to display back the items. Now we have better results, but we need here transition all 0.5 seconds and the delay time 1.5 seconds. We need transition by default all 0.5 seconds. Now if I click, then we will get the nice and cool results. Everything works perfectly, and with the project, we're done. Let's move on. 22. Project - Website Header with Slideshow and Navigation Menu: Okay, so it's time to move on and create our next project. In this section, we are going to be building a website header with a slide show and navigation menu. The project will be created based on HTML, CSS, and Javascript. So let's go ahead and describe the project. As you can see, the project is about some food. We have here a couple of different slides that include images of food, some headings, and the paragraph. And also we have here the button button has a nice and cool hover effect. The number consists of a logo and some navigation items which have this nice and cool hover effect. Also, at the top right corner, we have a menu icon with a hover effect. If I click it, then the sidebar will appear. If I click here, then the navigation items will display nicely. Let's close the sidebar. Actually, the project is responsive to different screen sizes. If I inspect the page and switch to the responsive mode and check the project to different screen sizes, then you will find that the project is responsive. It looks nice to different screen sizes. You will learn about responsive web design. All right, so let's sit about the project. It's going to be big one, but I hope you will enjoy it and learn some new stuff. Let's go ahead and get started. I have created a new folder on the desktop. Let's go ahead and open it in VS code, then create our working files. We need index dot HTML, then style CSS. Also, we need a file for Javascript script JS. Let's open index dot HTML file and create the basic HTML document. I'm going to change the title, it's going to be landing page, then I'm going to link the CSS and Javlscript files. Let's open script and specify the name multi file in the source attribute. Next, I'm going to open the project to the browser using live server. And then place the browser and the editor side by side in order to make our working process more convenient and simpler. I'm going to visit Google Phones website, because we're going to use some Google phones throughout this project. Let's go ahead and search for Google phone called Fiel One. I'm going to select the style. Next I'm going to search for another phone. It's going to be inknut, antiqua, I don't know how to pronounce those weight names. Let's select those styles, then copy the link and paste it in the head alone. All right, next I'm going to grab the CDN for phone asomics, because we're going to use some phonics. Let's copy the link, the open link tag in the head element and paste here the CDN. All right, we're ready to start to build a project. Let's create container in which I'm going to have lending. Then I'm going to open no element with the class now part. Let's insar tag which is going to be logo. The logo will consist of a pontomicon, which will be a solid, A utensils. Next we'll have the navigation. I mean the items we need here, link elements. The first one is going to be home. Then I'm going to duplicate it a couple of times and change the items. The second one is going to be about. Then we'll have cuisine. I'm going to insite your gallery. Then the next item is going to be block. As for the last one, I'm going to insitu contact here. We have the navigation items after that we need to. Create the menu icon, We need here two lines with the classes line and line one, and also line two. After the navigation, I'm going to create slides. Let's open p tag. It's going to be slide and it will have another class. Slide one we need here slide image wrapper. Then the image itself. I'm going to select image from the images folder. We need food One Next we will have banner. It will consist of H one heading element with the class PG heading. The text is going to be Taste. Then we'll have H two heading elements with the class main heading. The text is going to be amazing food. Then we'll have paragraph with the class description food task. We'll have here some Tammy text. Also, we'll have here bottom the class slide, PTN. Also, we'll have here type attribute and it's going to be pat. As for the text, I'm going to insert your view more. Okay, next I'm going to create the side bar. We need here phones icon which is going to be FA solid A X mark. It's going to be the closing button. Next we'll have sidebar. No, we need button with the class sideboard, BTN the text is going to be cuisine. We need also the type it's going to be button. Then after the button, I'm going to create side bar enough items. I'm going to insert your link element. It's going to be home. Let's duplicate it a couple of times. Actually, I'm going to grab those links because we need the same content. Let's paste it here. All right, so actually with the HTML markup, we are almost done. Let's start to write some CSS. I'm going to set margin and padding for every element to zero. Next we need box sizing. It's going to be border box. Then I'm going to set text decoration to none. We need phone family, it's going to be one. Next, I'm going to set the phone size of the HTML element to 62.5% because we are going to use M as the measurement unit. In this case, one Ram will be equal to ten pixels. Now I'm going to select container. Actually, we need to change here. The name is going to be container. Let's set width to 100% for the height is going to be 100 viewport height. Then I'm going to set the pudding to three ram on all four sides. After that, I'm going to select landing. Set its width 200% then the height is going to be 100% Next I'm going to select slides and these two lines here as well. Next we need slide. We need with height 100% All right, after that, I'm going to select slide image wrapper and use again with height 100% Let's duplicate this code and use with height for the image itself. Now the size of the image is changed. Let's select sidebar and hide it for a while. Next I'm going to select, now I'm going to set its position to absolute. Then we need position relative for the parent element which is a landing. Let's set width to 100% The height is going to be ten Ram. Then I'm going to use flex books. We need here to justify content space between. As for the LN items, I'm going to set it to center. Next, we need padding. 05 Ram. We have here the navigation. I'm going to set the background color to CCC for a while. Now we can see the icon and the navigation items. Let's get rid of background color. Next, I'm going to take care of the logo. Let's set phone size to five Ram. Then we need Webkit, text stroke. It's going to be 0.1 Ram. The color is going to be white. As for the color itself, I'm going to set it to transparent. Now we have here this nice and cool the fact. Let's set cursor to point. All right, after that I'm going to take care of the navigation. I mean the link elements. Let's set phone size to two Ram. The text transform is going to be upper case. I'm going to set color to white. We need margin 03 Ram on the left and right sides. Here we have the navigation items. Let's create over effect using before and after pseudo elements. We need content to be empty. Next, I'm going to set width to 100% Then the height is going to be 0.2 Ram. We need background color, it's going to be white. Next I'm going to set the position. It's going to be absolute and we need position relative for the link element. Let's set two position to -0.5 Ram. As for the left position, it's going to be zero. We have here the lines. Now we need the same line at the bottom of the links. Let's use after do element I'm going to change the positions we need bottom position. Now we have here lines up and down. Let's add here transform scale x zero. We need to hide them and display. Once we hover over the items, let's hover class and make scale one. We need the same thing for the element as well. Besides that, we need to use transition for a smoother effect. Once we hover over the items, then the lines will display. But they appear from the center. And we need to change it. We have to change transform origin. And we have to make it left for the before element. And we need transform origin, right for the after element. Now if I hover, then we'll get this nice and cool hover effect again that sit about the navigation items. Next, I'm going to take care of the menu icon. Let's set width to six Ram. The height is going to be two Ram. Then I'm going to take care of the lines. Let's set to 100% As for the De, it's going to be 0.4 As we need to change the background color, let's set it to white. We have here two lines and we need to separate them. For that, I'm going to use flex books. We need to display flex then flex direction is going to be column also, we need to justify content space between And also change the Coursormke it point can, you will have the menu icon. Next, I'm going to create Hover effects. We need to select line on hover. Let's set transform scale x 0.5 and use then transition. If I hover, then the width of the lines will be decreased. But we need different effects for line one and line two. We need to change the transform origin. It's going to be right for the line one. As for the line two, I'm going to make it left. Now if I hover, then we'll get better result. But that's not what we need actually. We need to change the class name now, everything works perfectly. All right, let's sit about the navigation. Let's move on and take care of the slides. I'm going to set the background color for image wrapper to then we need object fit for the images. It's going to be covered. And also I'm going to decrease opacity 2.3 Now the images look much better. Let's add z index property to the n bar, make it ten. Next, I'm going to select pan that set width to 100 Ram. And the height is going to be 100 Ram as well. I'm going to set the position to absolute. Then we position absolute for parent element which is a slide, I'm going to set two position to 50% then position is going to be 50% And then for centering, we need to transform translate -50% and again 50% Okay, after that I'm going to select PG heading. Let's define position, I'm going to make it absolute. Then we need to position 20% left, position is going to be 50% For horizontal centering, we need to transform translate x -50% Here we have the heading, let's set phone family to Inknut Antique San Serif. Then the phone size is going to be 20 Ram. Next I'm going to use Webkit text stroke, we need transparent background and the border we need 0.05 Ram. And the color is going to be white. Next minute color to be transparent. We have here heading. Actually, we need to change here, this letter. Now the problem is fixed. Let's set letter spacing to 1.5 Ram. We need some space between the letters. And then I'm going to set Opacity 2.4 I think the heading looks pretty cool. Let's select main heading. I'm going to set position to absolute position is going to be 47% The left position is going to be 22% Then we need phone size, I'm going to set it to a tram. Then I'm going to transform text into upper case. Let's change the color. I'm going to make white, then I'm going to increase space between the letters. Let's make it 0.5 Ram. The heading looks pretty nice. Actually, I'm going to add here font weight. Let's make it 300, okay? After the main heading, I'm going to take care of the paragraph. Let's set the position to absolute. Then the bottom position is going to be 35% Then I'm going to set left position to 50% And we need to center the element horizontally using transform translate x -50% Let's set the width to 80 Ram. Then I'm going to set phone size to 1.8 Ram. Change the phone weights, let's set it to 300. Also, we need to align text in the center and then the color is going to be white. Here we have the paragraph. Next I'm going to take here of the bottom. Let's set width to 20 Ram. Then the height is going to be five Ram. Next I'm going to set the position to absolute. The bottom position is going to be 27% For the left position, I'm going to set to 50% And then again we need to send to the element using transform translate x function -50% The bottom is placed in the center. Next I'm going to change the background color, it's going to be transparent. I'm going to set border 2.1 Ram and the color is going to be white, the phone size to 1.8 Ram. Then I'm going to transform text into upper case. Also create space between the letters, make it 0.1 Ram. Then change color, it's going to be white. Also, we need cursor to be pointer. Next, going to select Button, followed by the four elements. Let's set content to empty. We need to create the white parts on hover. Let's set width to 20 Ram. Then the height is going to be ten Ram. Let's change the background color, going to make it white. Then the position is going to be absolute left position is going to be -14 Ram. As for the two position, I'm going to set it to zero. Then we need to transform with rotate function by z direction. The value is going to be 45 degrees. Here we have the white elements on the left side of the bottom. We need the same thing using after elements we need the elements. I mean, white elements on the right side. Let's change the position we need. Right? As for the two position is going to be minus five fram, we have the second part on the right side. I'm going to create hover effect we need here. Before hover, I'm going to increase the scale of the element. Let's set it to 2.4 We need the same thing for the after s, the elements. Let's use transition for a smoother effect. If I hover, then those elements will increase. Next, I'm going to select Patton with hover and I'm going to change the color of the text. Let's make it black. Also, we need transition with some delay, time 0.3 seconds. We need transition by default for the patton as well. But in this case, without transition, without delay, we need to add. Here's the index property with negative value in order to display the text. Here we have the text. Now we have to hide those white parts outside of the parton using overflow hidden. Now we have here nice and cool hover effect. All right, let's add to landing shadow effect with values 01 Ram, three Ram. And the RGBA black color with the opacity 0.7 Now we have here nice and cool shadow effect. Actually I'm going to get rid of scrollbar using overflow heiden for the container, The scrollbars no longer visible. I'm going to duplicate slide a couple of times. We will have four different slides. Let's make some changes we need here. Slide two. Also change the name of the image, and we need to change the headings and Delicious Recipes. Next, we need here slide three. Also change the content of the headings we need here, Enjoy. As for the second heading, it's going to be fresh ingredients. Then we'll have here slide four. Change the name of the image and also change the content of the heading Elements. We will have here Explore and then Top Cuisines. All right, now it's time to write some Javascript and make the slide show work. I'm going to create variable slide show, which is going to be the function. Next, we need to select slides and make them an array using array method. We need here to slides using query selector method. Let's specify here the class name slide. I'm going to run through the console in order to see the output. Let's call the function. If I inspect the page and then switch to the console tab, we'll get here an array which will consist of four different slides. As you can see, we have here developments with the class names and with the index numbers. Next, I'm going to create a variable called current, which will be the counter. I'm going to set it to one by default. Next we need here if statement in which I'm going to define the following. If current is greater than two slides length, I mean the number of slides, then we have to set current to one. Otherwise, I mean, if current is equal to zero, then we have to set current two slides length. Also, we need here current plus plus increment operator. We need to increase current by one. Next, I'm going to use set interval method. I call function slide show. We need 1,000 milliseconds. Next, I'm going to look through the slides using forage method. We need her statement in which we need list one, we have to access to the second class name in the slide. Then we need split method. We have to split it by and we have to grab the second item. We need to make it number, then it should be equal to current. If this condition is true, add to the slide the following CSS styles. We need here, visibility visible and also opacity one. Then we need L statement. If this condition is false, then we have to make this slide hidden using visibility hidden and opacity zero, okay? So now as you can see, slide show is working. The slides are changing with 1 second interval. I'm going to use transition for the slide with opacity and the duration is going to be 0.3 seconds. Now slides are changing smoother, we need here. Background color to be black in order to create much nicer fade effect. And also, we need to change the interval. Let's change the duration of the transition as well. Now we have here much better and cool result. Slide show is working perfectly. Next I'm going to take care of the sidebar. Let's set position fixed. Then we need to position to be zero. The right position is going to be zero as well. Then the width is going to be 50 Ram. As for the height, I'm going to make it 100 view pot height. Next, let's change the background color. It's going to be D DD. Here we have the side bar. Let's use the index property to hide the menu icon. Now the problem is fixed. Next, let's select sidebar I Elements. I'm in the X closing button I, the position to absolute, and the top position is going to be two Ram. Right position is going to be five Ram. Then I'm going to increase the phone size. Let's make it a Ram. Change the color of the icon. It's going to be 555. Also, we need cursor to be pointer. Actually, the icon is not visible. Let's check the HTM file we need to get rid of from here. Now the icon is visible and it looks pretty nice. Next, I'm going to take care of the navigation. I'm going to set width to 40 Ram. Then the height is going to be 15 Ram. I'm going to set border 2.1 Ram solute. And the color is going to be 999. Then we need position to be absolute. Top position is going to be 50% black position is going to be 50% We need to center the element. We need transform translate. -50% and again -50% Next I'm going to select side B, BTN. Let's set width to 40 Ram. Then the height is going to be 15 Ram. I'm going to change the background color. Let's set it to transparent. Next I'm going to set border to non. Also we need family to be inknut sansif. Next, we need font size to be six ram. I'm going to transform text into upper case. Then again, I'm going to use Web kit text stroke to make the text nicer. We need here 0.1 Ram 222 and then the color is going to be transparent. Next, let's set cursor to point. We have here the bottom, which looks pretty nice. Let's change the height of the navigation. Make it 60 ramp. We need to place the items here. Let's select side bar. Now items set display to flex. Next we need flex direction to be column. Also, I'm going to set the position to absolute. Then top position is going to be 30% let position will be 50% Let's set transform to translate X and the value is going to be -50% We need to center the element horizontally. Let's set Text Align Center. Here we have the navigation items aligned. Now we have to select Link Element and customize them. Let's set phone size to three Ram then. Color is going to be 888. Then we need, let's set margin to one B and zero. We need to transform text into upper case. The items look nice. Now we have to create a hover effect. Let's add here hover. Do class, I'm going to change the color on hover. Let's set it to 444. And also use transition for smoother effect. We have here a hover effect. Next, I'm going to hide the side bar. Let's set right position two -50 Ram. Now use Javascript in order to display it. On click, I'm going to create variable side bar TN. Let's select this element using query selector method. Specify here the class name, sidebar, PTN. I'm going to duplicate this code a couple of times. The second variable is going to be sidebar. Let's change the class name. Then we'll have menu icon. Also, we need closing X button. Let's select this element. We need to add an event listener to the menu icon with click Event with a callback function. I'm going to add new class to the side bar. Once we click the menu icon using method, let's call the class name, navigate. Let's duplicate this code we need to remove. We need here x closing. But once we click X, then we need to remove the class. Navigate. Okay. Now let's use navigate, followed by the sidebar. I'm going to change the right position. Let's make it zero. And then we need transition. I'm going to enter here, right then the duration is going to be 0.5 seconds. And also we need cubic function with the values 100.1 If I click the menu icon, then we'll get here sidebar and it will close. Once you click close button. Okay, now we need to hide the items. Let's say opacity to zero and visibility hidden. Next I'm going to change the height of the of 32 15 Ram. Now I'm going to add even listener to the side bar button with again click event. We need here a callback function. Once we click the button, then we have to add sidebar another using total method. Let's call the class change. Now we have to select side bar. Now with class change, we have to increase the height on click, let's make it 60 Ram. And also use again transition with the values height. The duration is going to be a 0.5 second. Now if I click the button, then the element will expand. Now we have to display the navigation items. We need your class change, followed by the n items. We need to set opacity to one and visibility to feasible. Next, we need transition here. It's going to be all 0.5 seconds and we need delay time 0.5 seconds. Now once I click, then the navigation items will display nicely. Okay, so everything works perfectly. Now we have to make the project responsive. Let's switch to the responsive mode. I'm going to set the width and height for extra large screen size. And then I'm going to find the breakpoints on which we need to make some changes. I'm going to use CSS media queries to make the project responsive. Let's go ahead and create CSS media query. I'm going to specify the max width as 1,200 pixels. Set phone side of the H dem element 250, 5% Let's decrease the screen size. As you can see, the elements became smaller after 1,200 pixels. Next, we need to find the next break point. Create CSS media query and specified max width as 1,000 pixels. I'm going to set the phone size of the H tim element to 50% so everything looks nice. Let's select background heading and set font size to 16 Ram. Then I'm going to set the two position to 25% Next I'm going to select the paragraph and set width to 60 Ram. I think everything looks nice and we need to find the next break point. I'm going to create new CSS media query. Let's set max width to 800 pixels. I'm going to decrease again the font size of the H m element. Let's set it to 45% Next I'm going to select navigation. I mean the link elements, and set margin to 0.1 Ram. Next, let's take care of the banner. I'm going to grab the code from here, Change the phone size, make it 14 Ram. As for the two position, I'm going to make it 28% Next, let's select main heading, Set phone size to seven Ram. As for the left position, I'm going to make it 25% Okay, let's go ahead and find the next break point. Let's go ahead and create new Cess media query. And specify the max width which is going to be 600 pixels. I'm going to set the phone size of the Html element to 40% Next we need navigation. I'm to make it hidden. Next we need background heading. Actually both headings. Let's make here some changes. Set the phone size to ten Ram. Then the two position is going to be 33% As for the main heading, I'm going to set the phone size to six Ram. As for the position, let's set it to 27% Okay, I think everything looks pretty nice. And now we have to take you of the last break point. Let's go ahead and create new CSS media query and specify the max width as 450 pixels. I'm going to set the phone size of the HTM element to 35% Also, we need sidebar to be expanded on the whole page. Let's set with 100% As for the right position, I'm going to make it -100% Once I click, then the side bar will expand to the whole page. Next I'm going to select main heading and set the phone size 25 fram as far. The left position is going to be 29% Then I'm going to select the paragraph that's set with 245 fram. Now I think everything looks pretty nice, and actually with the project we're done. It's responsive to different screen sizes. Hopefully, it was interesting and you learn some new stuff. Let's move on. 23. Project - Profile Card: All right, so let's move on and start to create a new project. In this section, we're going to be building a profile card. The project will be created based on HTML, CSS, and Javascript. Let's go ahead and describe it quickly. As you can see, we have here a card with an image of a person. Down below, you can see the plus button. If I click it, then the card will expand and you will see the details about the person like name, position, social media links and so on. The plus button is changed to contact me. If I click the button back, then the card will close. Okay. So that sit about the project is simple one, but I think it will be interesting and useful because nowadays lots of websites need to have profile cards. Let's move on and get started. I have created a new folder on the desktop in which I have another folder for images. Let's open the folder in VS code, then create the working files for HTML, for CSS. Also we need a file for Java script. Then I'm going to open the index so mel file and create a basic H mel document. Let's change the title. It's going to be profile card. Then I'm going to link the CSS and Charles files. We need here script tag and the file name in the source attribute. Okay, let's go ahead and open the project to the browser using live server. And then I'm going to place the editor in the browser side by side. So next I visit the Google Phones website. Because we're going to use Google phones throughout the project, let's go ahead and search for phone called punto. I'm going to select a couple of different styles, then copy the link and paste it in the hide element. Besides that, I'm going to grab the phone awesome CDN link. We're going to use phone awesome icons throughout the project. Let's copy the link from here. Then open link, tug and head element and paste here the CDM. Okay, so we're ready to start to write the HTml markup. I'm going to create the container which will wrap the entire content. Then we'll have card in which I'm going to insert Deep tug, which is going to be top inside that element. To insert Cardmage, we need here image. Let's go ahead and select the image from the images folder. Next, I'm going to insert here give verified, in which I'm going to insert phonosomicon, we need a solid FA check. Next I'm going to create the bottom with class card BTN. Let's specify the type of the element it's going to be bottom. Then I'm going to insert you pan elements with the class. Then we need another panelement with the class name BTN text. I'm going to insert contact me Next, I'm going to create card bottom. We need H one heading elements with the name John Smith. Next we need H three heading element for the position. It's going to be product designer. Next I'm going to create development, which is going to be social media. I insert here another Deps, be social Info. Let's institute elements with the class names, FA brands linked in. Next we need span elements with the class name. Let's institute some number, then we need another span element with the class followers. Let's institute text followers. Okay. I'm going to duplicate this code twice. Let's change the phonemicons. The second one is going to be FA Instagram. I'm going to change those numbers. The third one is going to be FA Facebook. Let's change the number. Okay, so everything is ready. Let's go ahead and start to write CSS. I'm going to set margin and putting for every element to zero, then I'm going to set the box sizing to border box. Next we need phone family. It's going to be Ubuntu San Serif. I'm going to set the phone size of the HTML element to 62.5% in order to use the Ram as a measurement unit. In this case, one Ram will be equal to ten pixels. Next, I'm going to select the card top image that's set width to 12 Ram. Then the height is going to be 12 Ram as well. Next I'm going to select the image itself. Let's set the width to 100% Then the height is going to be 100% as well. Also, we need here object feet with the value color. Now the image became smaller and now we can take care of the container. Let's set width to 100% then the height is going to be 100 pot height. Next, I'm going to change the background color. Let's use here color 13124. Next I'm going to select the card. Let's set to 35 Ram. Then the height is going to be 60 Ram. Next we need background color, it's going to be 32365. Next, I'm going to set the position to absolute. And we need position relative for the parent element, which in this case is container. I'm going to set top position to 15% left position is going to be 50% And we need transform translate x with -50% in order to center the element horizontally. So as you can see the card is centered. Next, I'm going to set border radius to one Ram. Also, I'm going to create some shadow. Let's insert 03 Ram, six Ram. And the color is going to be black with the opacity 0.5 We have here nice shadow effect. Okay, after that, I'm going to select card top. Let's set height to 25 Ram. Then I'm going to set the position for the image to absolute. We need position relative for the parent element. Let's set top position to five frame. Then the left position is going to be 50% Again, we need to center the element using transform translate x -50% the image is centered horizontally. After that, I'm going to make the image rounded. Using border radius 50% the image became rounded. Also we need box shadow. It's going to be 01 Ram, three Ram, and the color is going to be RGBA. Actually, we have here a tiny problem, we don't see here the phone, so icon I'm in the check. Let's look at the HT code we need here. These elements. Now the problem is fixed. Let's go back to the CSS file. Select development with the class verified. I'm going to set the way to 2.5 Ram. Then if the height is going to be 2.5 frame as well, I'm going to change the background. It's going to be linear gradient. Let's define the direction is going to be two, right? And the first color is going to be a 35c6, then the second color is going to be three. Five BP. As you can see, we have here nice background. Let's set border radius to 50% We need rounded element. Also we need display flags. And to center the element, we need justify content center, and a line items center. So as you can see, the Ponso icon is centered inside the circle. Next I'm going to set the position to absolute. Then we need bottom position to be one Ram. As for the right position, I'm going to make it zero. All right, after that, I'm going to take of the icon. Let's increase the phone size. It's going to be 1.5 Ram. And change the color. I'm going to make it white. Now the icon looks pretty nice. Next, let's go ahead and select card BTN and got set width to 17 Ram. Then the height is going to be 4.5 Ram. Next I'm going to change the background. Use again linear gradient. The direction is going to be to right. The first color will be 82 62d2. Then the second color will be DC 561. We have here nice gradient. Let's set position to absolute. Then we need to position to be 22.5 from the lab position is going to be 50% And then we need to center the element using transform translate x -50% the Batson is centered. Next, I'm going to get rid of default border. Then I'm going to make it rounded using border radius three Ram. Next I'm going to set box shadow 201m3 Ram. And the color is going to be GPA with the opacity 0.3 Next I'm going to set the cursor two point. All right, after that I'm going to select plus, let's set position to absolute. Then the two position is going to be 50% We need position 1.5 Ram. Then I'm going to center the element vertically using transform translate Y -50% Also, I'm going to rotate the element by z direction with the value -45 degrees. Let's set font size to three Ram. The color is going to be white. We have here x. Next I'm going to select BTN text. Let's set phone size to 1.6 Ram and the color is going to be white. I set the phone way to bold. Next, let's create some space between the letters. Also, I'm going to set the position to absolute. The top position is going to be 50% then right position is going to be three Ram. Again, we need to censor the element, particularly using transform translate Y -50% Okay, the bottom looks pretty nice. Next I'm going to take care of the bottom. Let's set height to 35 Ram. Then we need flex box. I'm going to set flex direction to column. Then I'm going to align items in the center. As for the justified content property, I'm going to set it to space evenly. So as you can see, the elements are aligned vertically. Let's set padding at the top five Ram. Next I'm going to take care of the H one heading element, which is the name that set font size to three. Then the phone weight is going to be 300. Also, I'm going to change the color, make it white. Next, I'm going to duplicate this code and change the selector we need here H three heading element, the phone size is going to be 1.2 Ram. Then I'm going to change the color. It's going to be D111. Then we need letter spacing to 0.1 Ram. Also, I'm going to move the element up using margin, top minus four Ram. All right, after that I'm going to take care of the social media. Let's set width to 100% We need flex box to align. Elements horizontally. Let's use justify content space evenly. Next I'm going to select social info we need again, flex box. Then we have to change the direction we need to align elements vertically. Let's set line items to center, the elements are aligned and now we have to select elements. Let's set with six Ram. Then the height is going to be six Ram as well. I'm going to change the background color. Let's use CCC. Then I'm going to use Flexbox in order to center the icons, the icons are centered. Next, I'm going to set border radius to 50% Also we need pok shadow with the values 01 Ram, three Ram, and the color is going to be RGBA. Let's set font size to 1.8 Ram. Then change the color is going to be white. Let's get rid of the temporary background color. Then I'm going to select the first social info using Id selector. Let's change the background color. I'm going to use linear gradient. The direction is going to be two, right? As for the first color, I'm going to use 0077b. Then we will have 5107. Let's duplicate this code twice, change the chart selectors. The color for the second icon is going to be 833ab, four. As for the second color, it's going to be C13 584. Also we need here, third color is going to be 13, her six. All right, let's take care of the third item we need here, 42672. Then the second color is going to be 5581. All right, so all three icons look pretty nice. Next we need to take care of the numb. Let's set the phone size. It's going to be 1.8 Ram. Then we need font weight, it's going to be bold. And also I'm going to change the color. Let's make it EEE. Then we need margin. 1.5 Ram, 010.5 Ram, and zero. Again, the numbers look pretty nice. Next we have to take care of the followers. Let's set color two AA. Right? Actually the card is styled. Now we have to use Javascript. Let's create variable button. I'm going to select it using query selector method. We have to specify here the class name. It's going to be card BTN. Next we need another variable. It's going to be card that's selected. Now I'm going to add event listener to the button with a click event. Also we need to pass here the callback function. I'm going to add new class to the card using togal method. The class name is going to be changed and we have to use this class in CSS to create new styles which we need to use on click. Let's go ahead and change the height of the card. It's going to be 25 frame. Then we need to de headings using opacity zero and visibility hidden. We need same thing for the info. Also I'm going to Hyde PTN text. Actually, let's change the width of the pattern, make it five. Then I'm going to change the left position is going to be 50% Also, get rid of rotate function for a while. Then we need to translate with -50% twice. All right, so that's it. Now we need here change followed by the card. Let's set height, 260 Ram. I'm going to use your transition height and the duration is going to be 0.5 seconds. If I click, then the height of the card will be increased. All right, next I'm going to take of the button. Let's use again fast change followed by the car, BTN, I'm going to increase the width, it's going to be 17 Ram. Let's use here transition. If I click the button, then the size of it will increase. Next, I'm going to select the change with plus we need here left position 1.5 Ram. Also, I'm going to rotate the element we need at first translate Y -50% and then rotate Z function with value -45 degrees. Then use transition for smoother effect. If I click, then the plus sign will rotate and the pattern will expand. Actually, we need here hidden, not the H. I'm going to display the BTN text back. So we need here change BTN text. And we have to set the opacity to one and visibility to visible. Also, I'm going to use transition. We need to adhere a little delay, time 0.5 second. If I click, then everything will work perfectly. Next, I'm going to take care of the headings. Let's select change followed by the H one heading element. I'm going to display them back. Let's set opacity to one and visibility to visible. And also we need transition. The delay time is going to be 0.5 seconds. If I click then the first heading will appear nicely. Let's do the same for the second heading elements. Let's change here the selector, the delay time is going to be 0.6 seconds. As you can see, the headings are displayed nicely. Let's do the same for the social media. I'm going to select change followed by the social info child selector. First, let's set opacity to one and visibility to visible. We need here transition. All three items will have different delay times and it will create a nice effect. We need here 0.8 seconds. Let's duplicate this code twice, Change the nth child selectors, and also change the delay time. We need 0.9 seconds and 1 second. Actually we have to change here the number. Now if I click, then everything will work perfectly. And we have here nice and cool profile card. All right, so hopefully it was interesting, you enjoyed this project. Let's move on. 24. Project - Sign In / Sign Up Form: All right, so it's time to move on and create our next project. In this section, we're going to be building a modern and cool signing signum form. The project will be created based on HTML, CSS, and Javascript. As you can see, the project has a modern and pretty awesome design. By default, we have here a signum form. The form itself has a nice background with different shapes. On the left side, you can see the plant. Then we have here a heading followed by the input fields. Also, I have here a customized check mark. Down below you can find some social media links. If I click the signing link, then we'll get here the signing form with just two input fields. If I click the sign up form, then we'll get back to the sign up form. All right, so let's sit about the project, let's get started. I have created a new folder on the desktop in which I have folder for the images. Let's open the project in BS code, and then I'm going to create our working files. The first one is going to be index of the HTML. Then we'll have file for CSS. And also we need third file for Javascript script JS, open index HTM file, and create the basic HTM structure. I'm going to change the title. It's going to be sign in, sign up form. Next, I'm going to link the CSS file. Also we need to link the Gil Sky file. Let's open script Tac. Specify the file name in the source attribute. Okay, let's go ahead and open the project to the browser using live server. And also I'm going to place the browser and the editor side by side, like so. Let's go ahead and start to create the H DM on mark up. I'm going to open div tag which is going to be the container, it will include the entire content. Then we need another dip which is going to be the background. Next we need form wrapper in which I'm going to insert Image. Let's select Image from the images folder. It's going to be plant. Let's get rid of Alt attribute. Next, we need to create H one heading element. Add here class form heading. I'm going to insert here the following text. Fill the form and become a part of team. Next, we need form elements with the class contact form. Let's get rid of action attribute, then insert here deep element, which is going to be togal links. I'm going to insert here a element with the class toggle link. And also we need another class sign in. Let's insert text, sign up. Actually we need to sign up and not sign in. Let's duplicate the code, sign in and also change the class name. We need here sign in. All right, after that, I'm going to create development which will be inputs. Let's open input tag with a type text and also with the class name input field. Also, we need another class height. Let's add here placeholder attribute with the text first name. Let's duplicate input T three times. Last name. The next one is going to be e mail. We need to change the type and also the placeholder, it's going to be E mail address. We need he display. Next one is going to be passport. We need he display. And also change the placeholder attribute. It's going to be passport. All right, after that, I'm going to create check box. Let's add here class hyde. I'm going to insert your input with the type check box. Also we need her ID. It's going to be check. Then after input element, I'm going to label for check the text is I agree. Then we need span element with the text. Terms of service. All right. After that I'm going to create the button. I Submit button where the class submit. The type is going to be button as the text. I'm going to in sign up. Next we need social media. I'm in elements with the class. A brands, FA, Facebook. Let's duplicate it three times and change the class names. The second one is going to be Instagram. Then we'll have Twitter. That's for the last icon is going to be linked in. Actually all the elements are created and now I'm going to grab form CDN links, copy the link from here. Then I'm going to open link tag in the head element and insert CDN in the H reference attribute. As you can see now the icons are displayed. Next, I'm going to visit the Google Phones website. Because we're going to use different Google phones throughout this project. Let's visit the website and search for, can it? This is going to be the first. I'm going to select a couple of different styles. Next, I'm going to search for another phone where it's going to be tilled, p. Let's select the style, then I'm going to grab the link and paste it in the head element. Okay, let's go ahead and start to write the CSS. I'm going to select every element using an asterisk pan, set margin, and putting both of them to zero. Next, we need to set box sizing to board the box, also outline to none. Then we need to get rid of default text decoration and also change the phone family. It's going to be cansif. Besides that, I'm going to set the phone size of the H ml element to 62.5% In this case, one m will be equal to ten pixels, and we will use M as the measurement unit. The default styles are applied, now we have to take care of the image because it too big. Right now let's select form, wrapper, image, and set display to none. All right, that's it, the image is hidden. Now we can take care of the container. Let's set width to 100% then the height is going to be 100 view pot height. I'm going to change the background color. It's going to be 9c287. Here we have the background. Next I'm going to select PG. Let's define width, it's going to be 100% then the height is going to be one 50% chase, background color, it's going to be EEE. Here we have the element. I'm going to set border radius to 50% then 00.50% Now I'm going to take care of the position. Let's move it using translate 20% And then we need -50% the element moved also. We need here rotate function by z direction, and the value is going to be 15 degrees. I think that's it. We need to hide parts outside of the page using overflow hidden. Now we have here this cool and awesome background. Let's go ahead and take care of the form wrapper. I'm going to set position to absolute. Then we need position relative for the parent element, which in this case is container. Next, I'm going to set to position 50% then the left position is going to be 50% I'm going to center the element using transform translate with the values -50% and again -50% As you can see, the form wrapper is centered on the page. Let's set width to 70% then the height is going to be 80% Let change background color. I'm going to use here color 25 to five to seven. Here we have the background of the foam wrapper. Let's make the element rounded using border radius two Ram. Also we need box shadow, the following values. 03 Ram, eight Ram. The color is going to be RGBA, black color with the opacity 0.6 We have here nice and cool shadow effect. After that, I'm going to take care of the image. Let's set to 140 Ram. But then we need position to be absolute. Left position is going to be -50% As for the top position, I'm going to set it to -20% We have here the image. Let's set opacity to 0.5 Then we need overflow hidden for form wrapper in order to hide the parts of the image. Now it looks pretty cool. Let's go ahead and take care of the form heading. I'm going to set position to absolute then. The position is going to be 19% Led. Position is going to be 35% the phone family, it's going to be tilt, Priest cursive. The phone family is changed. Now we have to make it bigger using phone size. Let's set it to five frame. Weight is going to be 300. We need to change the color. I'm going to white. The heading looks much better. Let's set its width to 35 Ram. Then I'm going to use some shadow effect. We need 01 Ram, two Ram, and the color is going to be RGP, a black color with the opacity 0.5 Here we have the heading, which looks pretty nice. Let's select contact form, set width to 35% then the height is going to be 100% I'm going to set position to absolute, then the two position is going to be zero. The right position is going to be zero as well. Next I'm going to change the background color. Let's set red for a while. So here we have the contact form. Let's get rid of this color. From here. I'm going to use flex books in order to align the elements. Let's set flex direction to column. Then we need justify content with value space between. Next, I'm going to use pudding with value seven Ram and then ten ram. Then we need seven Ram, and again seven ram. Now we have the space inside the element. Next I'm going to take care of the links. Let's set text a line two. Right, that we have here, the links on the right side of the element. Next, I'm going to select Total Link. Also we need total span. Let's set font size 21.6 Ram. Then the font weight is going to be 300. I'm going to set text transform to upper case. Then we need letter spacing, 0.1 Ram. Change the color, I'm going to use here. Color 9287. Here we have the links. Actually, I think we are missing here. This span element, I mean the slash here it is. Next I'm going to add here pointer. Now we have course pointer for the span element as well. Next I'm going to select the spin and set marching to zero and 0.5 Ram. We need some space between the links. Next let's sign up, I'm going to set color 289663. It's going to be actually the active link. Next I'm going to select inputs. Let's set margin top to minus two Ram. Then we need flex books. I'm going to set direction to column Next, I'm going to select the input. Let's define width. It's going to be 100% then the height is going to be five Ram. Next we need marching, it's going to be one Ram and zero. Then I'm going to set putting to one Ram. Next we need background color. It's going to be 343539. The inputs look much better. Next I'm going to set border 2.1 Ram solid. And the color is going to be RGB 25053 times the white color with the opacity 0.1 Here we have the nice border. Next set border radius to 0.5 Ram. Also we need here font size, it's going to be 1.6 Ram. Then change the color. I'm going to make it EEE, The color is changed. Now I'm going to select check box. Let's set display to flex. We need a line items center, then I'm going to set margin at the top to two Ram. Next, I'm going to select check box, followed by the input element. Let's set appearance to none. Then we need with, it's going to be two Ram. The height is going to be two Ram as well. Next I'm going to change the background color. It's going to be 333. Here we have the box. Let's add here margin on the right side and set it to one Ram. Next we need border radius. I'm going to set it 2.2 Ram. After that, I'm going to select input elements and also the label. Let's set to pointer for both elements. Now I'm going to select the label and customize it. Now I'm going to select input with aCdoclass checked. Let's set background color 258235. Once I check, then the background color of the box will change. We need here transition in order to make the effect smoother. If I click, then the background color will change smoothly. Next, I'm going to select Input with a element. Let's set content to empty. Next, we need position to be absolute. Then we need position relative for the parent element, which is the input. Let's set the position to -15% Then left position is going to be 20% I'm going to set width to 50% then the height is going to be 75% Next we need border, right? And it's going to be 0.2 Ram solid. And the color is going to be white. Let's duplicate this code we need here. Border bottom. As you can see, we have here check mark. Now we need to rotate the element using transform rotate Z, the value is going to be 45 degrees. We have here nice check mark. Next we need opacity zero and visibility hidden. After that, I'm going to select input element with a colas checked and followed by the after do element. Once the input is checked, then we have to display back the check mark. We need opacity one and visibility visible. Then add here transition. If I click, then we'll get here this nice and cool appearance of the check mark. All right, let's go ahead and select label and customize it. I'm going to set phone size to 1.2 Ram. The caller is going to be DDD. Then I'm going to select span elements, which is placed inside the label. Let's change the call. 58235, Okay. Now everything looks pretty nice and now we can move on and take care of the bottom. Let's set width to 100% then the height is going to be five Ram. Next, I'm going to change the background color. Let's use here color D48 142. Then I'm going to get rid of default border, then change the phone size, it's going to be 1.6 Ram. Change the phone weight, I'm going to set it to 300. Also we need letter spacing, 0.1 m. Then we need text transform. It's going to be upper case as I'm going to set the color to white. As you can see, the bottom looks pretty nice. Next, let's set cursor to pointer. Also, I'm going to add here border radius, which is going to be 0.3 Ram. Then we need here box shadow with the values 01 m1m and the color is going to be RGBA, black color with the opacity 0.1 Okay, finally I'm going to add here margin top. It's going to be minus four Ram. The button looks pretty nice. I'm going to create click effect using active pseudoclass we need here Transform translate y with value 0.2 If I click the button, then we'll get this nice and cool click effect. Okay, let's move on and take care of the social media icons. I'm going to select Wrapper. Let's set with to 100% Then we need putting, it's going to be three Ram and 40% Next we need 0.0 Then I'm going to set display to flex. We need justify content space between. Also, I'm going to set border at the top, 2.1 Ram solid. And the color is going to be RGBA, white color with lower opacity, 0.2 Okay, next I'm going to take care of the icons. Let's set to three Ram. Then the height is going to be three Ram. Next I'm going to change the background color. Let's use your color, 939695. Next I'm going to set porter radius to 50% because we need circles. Then we need to censor the icons using flex books. Let's use justify content and a line items. Then I set the phone size to 1.6 Ram. So I'm going to change color. It's going to be 333c and also make cursor pointer. All right, everything looks pretty nice. Now I'm going to use some Javascript. Let's create a new variable and call it sign in. I'm going to select element using query selector method. Let's insert your class sign in. Then we need a couple of different variables. The second one is going to be sign up. Then we will have your container. The last variable is going to be submitted, I mean the button. Let's go ahead and add to the sign in element event listener with a click event. Also, we need here a callback function which will be executed once we click the sign in link. I'm going to add to the container new with add method and it's going to be change. Let's duplicate this code we need here, sign once. Then we need to remove change from the element. Now I'm going to use class change in the CSS file in order to create new styles, which will be applied once we click the link. We need here change followed by the signing form. I'm going to change the color. Next, I'm going to select with sign up and change the color. We need to define the active link here using those different colors. Once I click, then the color will change. Next, I'm going to select Change, followed by the height set display to none. Once I click, then two input fields and also the check box will hide. Next, I'm going to select Display and set transform with translate function. We have to move the elements up by minus six Ram. Now as you can see, we have much better result. We need to take care of the bottom. We need to move it up. And also we have to change the text. Let's select Change. With class Submit, we need to move the elements using transform translate, Y -14 Ram. Now the button moves up and it looks pretty nice. Okay, now we need the same thing with class change because we need to create click effect we need here -13.8 Ram. If I click, then the button will have click effect. Okay, The last thing that we have to do is to change the text. Once we click the link, I'm going to change the text content of the Submit button and it's going to be sign in. We need the same thing down below. In this case, we have to change sign in to sign up. Okay, now everything looks perfectly with the project, we're done. Let's move on. 25. Project - Animated Progress Bar: Hi and welcome to our next project. In this section, we're going to be creating animated progress bar. The project will be created based on HTML, CSS, and Javascript. Actually, it's going to be funny. One, let's go ahead and describe it quickly. As you can see, we have here a heading loading followed by the progress bar, which right now is empty. And then down below we have two different buttons, download and reset. If I click download, then the progress bar will start to fill up. Also the heading will animate. If I click reset, then the progress bar will stop work. All right, so I think the project will be interesting and funny. So let's go ahead and get started. I have created a new folder on the desktop, which right now is empty. Let's go ahead and open it in VS code, then create over working files, we need index HTML. Then the second file is going to be style CSS. Also, we need file for Java script script or S. Let's open index HTML file and create the basic HTML document. I'm going to change the title. It's going to be Progress bar. Next, I'm going to link the CSS file. Also, we need script tag in order to link the chav script file. Let's insert file name in the source attribute. Okay, let's go ahead and open the project to the browser using live server. And then place the editor in the browser side by side. Like throughout the project, I'm going to use Google phones. So let's go ahead and visit the website. I'm going to search phones called rubic bubbles. Let's select the style, copy the link, and paste it in the head element. Now I'm going to start to write the HTM markup. We need container, it will wrap all the content. Let's open tag, which is going to be progress bar wrapper inside that element. I'm going to open three heading tag loading. Then we will have Progress bar in which I'm going to insert bar. Then I'm going to create patons. We need wrapper patterns, and then the button itself we need here, classes PTN, download. Duplicate it, and change the class name. Reset. Let's insert here the content. The first one is going to be download. As for the second one is going to be reset. That's it, about the HD mark up. Now we have to start to write the CSS. Select every element as usual, create some default styles. We need margin and padding, both of them to be zero. Next, I'm going to set box sizing to border box. We need phone family, it's going to be rubic bubbles, the phone that we have selected. The default styles are applied. Next, I'm going to set the font size of the Htiml element to 62.5% In order to use a m as the measurement unit one, m will be equal to ten pixels. Then I'm going to take of the container. Let's set width, it's going to be 100% Then we need height, it's going to be 100 viewport height. Also change the background color. It's going to be 734. Next, I'm going to use flex books. In order to align the content in the center, we need to justify content center and align items center. As you can see, the content is placed in the center nicely. Next, let's go ahead and select Progress Bar wrapper. I'm going to define width, it's going to be 70 Ram. Next we need flax books. I'm going to change the direction. It's going to be column. We need to align elements vertically. Then let's use justify Content center. Next I'm going to select heading elements. Let's set font size to five hm. The color is going to be 1182. Also, I'm going to create some space between the letters. As you can see, the heading looks pretty nice. Let's add here text transform upper case. Then we need text shadow. It's going to be 0.5 Hm, three Ram. And the color is going to be black with the opacity 0.3 Now the heading looks much better. Let's add here margin at the bottom, it's going to be three Ram. Okay, that's it. About the heading. Let's go ahead and take care of the progress bar. Let's add with 100% then the height is going to be 3.5 Ram. We need border, it's going to be 0.2 Ram. Solid color is going to be 66, it's green color. Next we need border radius to make the element rounded. Let's say 23 Ram. Also, we need putting 0.3 Ram. After that, I'm going to take care of the bar. Let's set to 100% then the height is going to be 100% I'm going to change the background. Let's use linear gradient. The direction is going to be two, right? As for the first color, I'm going to use Fd166. Then the next color is going to be f476. As you can see, we have here the bar. We need to make it rounded. Let's use border radius three m. Now it looks pretty nice. We need some space at the bottom. Let's use margin. Bottom four Ram. Next I'm going to select buttons. Let's set with to 100% Also we need to use flex box, use justify content space between the buttons are aligned and now we have to customize them. Let's select BTN. I'm going to set width to 35% then the height is going to be 5.5 I'm going to set border to non set phone size to 1.8 Ram. Next we need color. It's going to be white as I'm going to create some space between the letters. Next, let's set border radius to five Ram. I'm going to add here box shadow with the pales 01 Ram, three Ram. And the color is going to be black with the opacity 0.2 Also change the course or make it pointer. Okay, now we have to change the background for each of the buttons. The first one is going to be download. Let's use linear gradient. The direction is going to be to right. As for the colors, I'm going to use f476. Then the next one is going to be F D 166. The first button looks pretty nice. Next, I'm going to do the same for the second button, which is reset. I'm going to change the colors. Let's add here the second 166. Okay, so that's it, all the elements are styled. Now we need BTN active to create the click effect. We need transform translate Y 0.2 m. Now if I click the buttons, then we'll get here this nice click effect. Let's set width of bar zero, then I'm going to. Create CSS animations. We need your name bar anim at 0% We need width to be zero. For 100% I'm going to set width to 100% Let's set animation to bar Anim. Then the duration is going to be 10 seconds and also we need linear and forwards. As you can see, the progress bar is filling up. Now we have to create another animation. It's going to be loading. It's going to be for heading at 0% we need opacity to be one. At 25% I'm going to set opacity to zero. Then I'm going to duplicate this code. At 50% the opacity is going to be one, 75% We need opacity to be zero. As for the 100% we need opacity one. If I add here, animation with the values loading anum, then the duration, 2 seconds, five, I mean the five times, we'll get this nice and cool animation. Now it's time to write some Javascript. Let's create variable download BTN. I'm going to select the bottom using Queryselector method. Then I'm going to select reset BTN. Let's change the class name. Next we need another variable. It's going to be container. Now I'm going to add an even listener to the download button with click event, we need here a callback function which will be executed. Once we click the button, we need to add new class to the container using a method. The class is going to be changed. Now if I select bar with class change and add here the animation. Then once we click the download button, the progress bar will start to work. Next, we need the same thing for the heading as well. Let's select progress bar, wrapper three with Cl change here, Animation. Now as you can see, everything works fine. We have to program the reset button. Let's change here. Button is going to be reset, BTN and we have to remove class Change from the container. Once I click the reset button, then the animation will stop working. All right, that's everything works perfectly. Hopefully this project was interesting and funny. Let's go ahead and start to create the next one. 26. Project - Website Header with Animations: Hi and welcome to, or next project. In this section we will be building a modern and cool website header with animations and a hamburger menu. The project will be created based on HTML, CSS, and Javskrit. It actually is the massive and one of the best projects in this course. Let's go ahead and describe the project. As you can see, we have here a nice and beautiful header for the website. We have two parts, left and right. Both parts have different backgrounds. On the left side, we have an as for the right side, there is a light background. In the center of the page, you can see the heading. It consists of two parts. The left side is wide. As for the right side, it has a transparent background with an image. You can find the same thing for other textual elements as well. Here on the right side, at the top left corner, you can find the menu icon. If I click it, then the elements will hide with fade effects and a navigation menu will display the navigation items have nice and cool, transparent backgrounds and some nice hover effects. If I click the menu icon, then the navigation will close and the elements will display back. With fade effects, the project is responsive to different screen sizes. If I inspect the page, switch to the responsive mode, then check the project for different screen sizes. You'll find that it looks nice and responsive on all different screen sizes. All right, so let's sit about this project. I think you will love it. So let's go ahead and get started. I have created a new folder on the desktop which includes the folder for the images. Let's go ahead and open it in VS code and then create our working files. We need three files. The first one is going to be index with HTML, then we will have style CSS. As for the third one is going to be file for Javascript script JS. Let's go ahead and open indexed HTM file and create the basic HTM structure. I'm going to change the title. Let's insert your landing page, then I'm going to link the CSS and JS files. We need here script tag, then we have to specify the file name in the source attribute, mccain. Let's go ahead and open the project to the browser using live server. Then I'm going to place the browser and the editor side by side. In order to make the working process simpler and more convenient, 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 phone awesome icons throughout the project. Let's grab the link from here. And then open link tag in the head element and paste the CDN here. Besides that, we're going to use Google phones. Let's visit the website, then I'm going to search for Google Phone called signica negative. Let's select a couple of different styles. Then I'm going to search for another font which is going to be Stick, no bills. Let's select different styles, then I'm going to copy the link and paste it in the head element. All right, we're ready to start to create the project. I'm going to start with an HTML markup. Let's create container. It will include all the content we need here, menu icon. It will consist of lines. We'll have here two lines, line one and line two. Besides that, we need span elements with the class menu. And we have to insert here text menu. We need another span and it will close. Okay, after the menu icon. I'm going to insert here nav elements with the class name navigation. I'm going to insert here link elements. The first one is going to be home, then I'm going to duplicate it a couple of times. Let's change the navigation items. The second one is going to be about, then we will have content. The next one is going to be tutorials. As for the last one, I'm going to insert contact. Okay. After the navigation I'm going to open Depth is going to be landing, that's in another dip, is going to be landing left, then we need landing right and the left side. Have H one heading elements with the class name main heading. Also we need here another main heading left. I'm going to insert here three letters. Next, about in which I'm going to insert H one heading with the text code and Create. Next, I'm going to insert here paragraph with some dummy text as development which is going to be link. I'm going to insert a elements with the text. Learn more Also, I'm going to insert here fonts icon, which is going to be FA solid FA arrow. Right after that, I'm going to take care of the right side. We need here social media icons. Let's insert element. The first one is going to be a brands Facebook, then we will have a Twitter. As for the third icon, it's going to be a linked in, in after social media icons. I'm going to add H one heading elements with the class names. Main heading and main heading. Right, is going to be the second part of the main heading. Let's insert here the rest of the letters. Next we need text in which we'll have three technologies, Open H, one handing element, the first one is going to be HTML. Then we'll have CSS and Javascript. Okay, So I think that's it About the HTML markup, the only thing that have to do is to insert here, landing, write background, which will be empty. Right now we have here all elements, and now we have two to write the CSS. Let's open CSS file. Select every element, Set margin and putting both of them to zero. Next we need box sizing to be border box Also I'm going to set text decoration to none. Then I'm going to define the phone family. It's going to be sign and negative san serif. All the default styles are applied. Next, I'm going to set the font size of the H mal element to 62.5% because we're going to use M as the measurement unit. In this case, one m will be equal to ten pixels, the elements became smaller. Now I'm going to take care of the container. Let's set width to 100% then the height is going to be 100 viewpot height. Next, I'm going to take care of the landing. The width is going to be 100% The height is going to be 100% as well. Also, I'm going to change the background. Let's use linear gradient function. The first color is going to be black with opacity 0.5 As for the second color, I'm going to insert again, black color with the opacity 0.4 Next we need to select image from the images folder. Then I'm going to define the position is going to be centered. And also we need to add here no repeat. Besides that, I'm going to define paro size property with the value cover. Okay, here we have the paro image. Next I'm going to select man, let's set display to none. I'm going to hide for a while. Then we need navigation. I'm going to hide it as well using display none. Both elements are hidden. I know we can take care of the landing. Let's select landing left. I'm going to set position to absolute. Then we need position relative for the parent elements. Two position is going to be zero. Left position is going to be zero. Then we need width to be 50% the height is going to be 100% Next, I'm going to duplicate this code, change the class we need your landing right. We need the same properties, just change left to right, both parts are aligned. After that, I'm going to take the background of the right side. Let's set width to 100% The height is going to be 100% I'm going to set the position to absolute. The top position is going to be zero. As for the right position, I'm going to make it zero as well. Next we need background color. It's going to be 94e. The background of the right side is changed. Now I'm going to take care of the about. Let's set position to absolute. Then the bottom position is going to be ten Ram. As for the left position, I'm going to make it ten Ram as well. The element is placed down below. After that, I'm going to select H, one heading element in the about. Let's set font size to six Ram. Then I'm going to make text upper case. Also change the color, it's going to be white. Next, I'm going to create some shadow, 0.5 Ram, one Ram. And the color is going to be black with opacity 0.5 We have here the heading. It looks pretty nice. Next, let's take here of the paragraph. Set phone size to 1.6 Ram. Then I'm going to change the color. It's going to be 94de. Then I'm going to set with 250 Ram. Also we need marching one Ram, 03 Ram, and zero. Here we have the paragraph. Let's go ahead and take care of the link. I'm going to set display to flex. Then we need a line items, it's going to be baseline. Then we need cursor pointer. Next, I'm going to define width, It's going to be 14 Ram. After that, I'm going to select a element. Let's set phone size to 1.6 Ram. Then I'm going to make it upper case, we need color, it's going to be white. Also, I'm going to set margin on the right side, it's going to be one Ram. We need some space between the text and the arrow. Next I'm going to take care of the arrow. Let's select Elements. I'm going to set font size to 1.6 Ram. Then we need color. It's going to be white. Here we have the arrow. Now I'm going to create hover effect. We need to add hover to the link. And then we need to select a element on hover. I'm going to increase margin on the right side. Let's set it to two Ram. I also use here transition in order to make the effect smoother. Let's set duration 2.3 second. If I hover, then we'll get this nice effect. Okay, so let's sit about this element. Next, I'm going to select main heading. Let's set position to absolute. The top position is going to be 25% Then we need font family. It's going to be the second font, stick. No pills. San Serif. Then I'm going to set phone size to 20 Ram. These are the default styles for both parts. And now I'm going to select the left side. Let's set right position to -1% Then I'm going to set color to white as we need Te shadow, it's going to be 0.5 Ram, one Ram. And the color is going to be GPA, black color with opacity 0.5 We have here first part of the heading. Let's select right side. I'm going to set left position to 1% Then we need text shadow 0.5 m1m and the RGBA 0.2 right, the right side is not visible. Let's set the index 2100. So here we have the right side. Let's get rid of the index property and add here. Also, we need here font weight to be bold. Then I'm going to set text to upper case and then create some space between the letters, make it three Ram. Now the heading looks much better. We have to take care of the background of the right side. We need linear gradient. The first color is going to be RGBA black with opacity 0.2 Next we need again RGBA black color with the opacity 0.1 Now we have to define the URL of the image. We need the same background image. Then we need 30% as the position. Also, I'm going to use web K background clip, it's going to be text. Besides that, we need webkit text, feel color. I'm going to make it transparent. If I check, then you will see here the image as the background of the text. I think it looks pretty nice. All right, let's grab this code and paste it. Town where we have the right side. After that, I'm going to take care of the social media icons. Let's set position of the wrapper. Absolute. Then we need position is going to be five fram. The right position is going to be five fram as well. Then we need z index property 100 to display the icons. I'm going to select elements, I'm going to set the phone size to three Ram. Then the margin will be 01.5 Ram. Next we need Tech Shadow. Let's set it to 0.5 Fram, one pram, and the color is going to be RGB, black color with the opacity 0.2 Next we need the same background for the icons as well. Let's copy the code. Add here cursor pointer. So as you can see, we have here font icons with the same background image. Next I'm going to take care of the text. I'm going to define the position. Actually, let's grab this code. Change to position. We need here six Ram. We need bottom position and of the top. Let's change it. As you can see, the elements are placed down below. Next, we need to select H, one heading element. Set font size to eight Ram. Then the font weight is going to be bold. Next, I'm going to set text transform to upper case. Then we need Te Shadow. It's going to be 0.5 Ram, one Ram, with the RGBA color black with the opacity 0.2 Then again, grab this code. And here as you can see, the headings look pretty nice. To decrease the line height is going to be one. And also we need to a line text on the right side. Okay, everything looks pretty nice. We are done with the headings in the text. Now I'm going to make the menu icon visible. That set its position to absolute. Next we need to position is going to be five frame position. I'm going to make five frame as well. Set width, it's going to be ten Ram. Then we need height, it's going to be three Ram. Also use the index property, make it 200. Next we need background color. Let's use some temporary background color. Here we have the menu icon. I'm going to select Line. Let's set to 2.5 Ram. Then the height is going to be 0.2 Ram. Change the background color, let's set it to nine for E. Here we have the lines. I'm going to get rid of this background color. Now the lines are visible, we need to separate them. Let's select lines set height to 100% And then we need flex box. The direction is going to be column also, we need justify content with value space, even the lines are separated and aligned nicely. After that, I'm going to take gear of the span elements. We have two spin elements, menu and close. Let's set font size to 1.8 Ram. Then we need text transform. It's going to be upper case also. I'm going to set color 29 FurtE. We have here span elements. Let's set position to absolute. We need right position to be zero. Next, I'm going to set display to flex for the menu icon. We need a line items center. Also justify content space between. Next, I'm going to set cursor to pointer. Also, let's create space using padding. Let's set it to zero and 0.5 m. As you can see, the span elements are aligned nicely next to the lines. I'm going to select close and set is to position to 100% Now the second span element ended up down below. Now we have to use some Javascript. Let's create variable. It's going to be container. I'm going to select it using query selector method. We need to specify here the class name container. Next, I'm going to create another variable. It's going to be menu icon. Let's specify here the class name. Now I'm going to add an event listener to the menu icon with a click event. Also, we have to add here callback function which will be executed once we click the menu icon. I'm going to add new class to the container using togal method, and the class name is going to be navigate. I'm going to use this class in the CSS file in order to create new styles that will be applied to the elements. Once we click the icon, let's add transform the line one with a rotate Z function. The value is going to be 135 degrees. Also, we need here to translate. We need to move elements slightly. The value is going to be 0.7 Ram. Let's duplicate this code, change the class name. We need line two. The rotate Z function will be 225 degrees. Let's see, we have here X button. Now if I add here class navigate. And also use transition with Cubic zer function by click. Then the lines will transform into X closing button. All right, After that I'm going to select Navigate. Followed by the menu. I'm going to set transform property to translate Y function with the value 110% I mean -110% as we need here. Menu with transition with the delay time point 1 second. Let's duplicate this code, change class name. We need here 120% for a close. I'm going to add here transition with transform with the duration 0.3 second. Next, we need transition for the menu with navigate. Also we need the same transition for close we can. So once I click, then the fine elements will change. Now the only thing that have to do is to hide this fine element. Let's set overflow to he many. Now as you can see, everything works perfectly. Next I'm going to take care of the main heading. Let's select main heading with navigate. Set transform to translate Y minus five fram. Next, we need opacity zero and visibility hidden. Also, let's add here transition for smoother effect. Once I click, then the heading will hide with nice fade effect. Next, I'm going to hide the about. Let's select element with class navigate. We need here transform translate x five Ram. And also we need again opacity zero and visibility hidden. And again for smooth effect, let's transition with the duration 1 second. Once I click, then the about section will move in height with fade effect. Next, I'm going to do the same for text. Let's select the element with class Navigate. Set transform to translate x minus pi fram. Also, we need opacity zero and visibility hidden. Again, use transition for the duration point 1 second. If I click, then the elements will hide. But we need here 1 second instead of 0.1 Now as you can see, everything works fine again. Now we need same thing for the social media. Let's select Elements with Class Name. Navigate and do the same thing we need here. Opacity zero and visibility hidden. And also use transition with duration 0.5 second. If I click, then all the elements will hide. We have here nice fade effects. Next, I'm going to hide the background of the right side. Let's select these elements using class. Navigate. I'm going to set transform to translate x 100% Also we need opacity zero and again visibility hidden. Then I'm going to add here transition. If I click, then the background will move to the right side. We need to hide those scroll bars. Let's use overflow hidden for the landing. Now everything works perfectly. All right, now I'm going to select landing with navigate. In order to blur the background, we need filter Blar 1.5 Ram. Always you can see the background is blarred. Actually we need here background of the container to be black in order to make the blur effects better. Now as you can see, we have here much nicer and better results. All right, next I'm going to add transition in order to make the effect a little bit smoother. And also we need some delay time. Next, we need transition for the landing by default. Now if we will get here polar effect with smooth transition. All right, now I'm going to take care of the navigation which was hidden. Let's set width to 100% then the height is going to be 100% I'm going to set position to absolute. Then we need flex books. I'm going to change the direction, then use justify content center and a line item center. We need to center the content. I mean the navigation items right now, they are visible. Let's add here the index with the value 100. Now here we have the navigation items. I'm going to select Link Elements. Let's set phone size 210 Ram. Then the phone weight is going to be bold. Also, I'm going to transform text into upper case. Next, we need Tech Shadow 0.5 Ram, one Ram, and the color is going to be black with the opacity 0.5 Next we need margin, 0.5 Ram. And actually we need here 0.5 Ram. Here we have the navigation items. Now I'm going to grab the background, which we used for a couple of times. Let's use here the same code. Let's change the percentage value we need, 35% As you can see, we have here background image for the navigation items. Let's change here color. It's going to be white with lower opacity. Now we have much better result. Okay, after that, I'm going to create hover effect on Ho. I'm going to change the letter spacing. I'm going to increase space. Now we need transition with the duration 0.5 seconds. Now we have this nice and cool hover effect. Okay? Next, I'm going to hide the navigation by default. Let's use Opacity zero and visibility hidden. I'm going to display them back. Once we open the menu, we need class name navigate, followed by the navigation. Also, we need the same thing for the link element. Let's set opacity to one and visibility to visible. Next, I'm going to change the transition. Let's add here opacity 0.5 second. And also we need delay time 1 second. Now once we open the menu, then the navigation items will display. All right, get rid of this code from here, because we're going to use different transition for each item. I'm going to start with the first one using nth child selector. Define transition. We need your letter spacing with the duration 0.5 second. Then we need opacity 0.5 second and then delay time 1 second. I'm going to duplicate this code a couple of times. Let's change the child selects for the second item we need 1.2 second. Then for the third item, it's going to be 1.4 second. Then we'll have 1.6 seconds, and finally, 1.8 second. If I open the menu, then the items will display in order with nice and cool effect. Actually, everything works perfectly, and now we have to make the project responsive to different screen sizes. Let's go ahead and switch the project to the responsive mode. We need to find the breakpoints on which we have to make some changes for our project. Let's go ahead and create CSS media query. I'm going to add here comments for responsive. The max width is going to be 1,600 pixels. I'm going to set the phone size for the H demil element to 55% It will make the elements smaller. Next, we need to find another break point. Let's set width to 1,280 pixels. I think the project looks pretty nice. Next, I'm going to set the width to 1024 pixels. Let's go ahead and duplicate this code. I'm going to set with 1,200 pixels. As for the font size of the H element, it's going to be 45% The elements became smaller and actually the project looks nice. Next I'm going to make the screen smaller and find the next break point. Let's set project two ipod. I'm going to duplicate this code, change the max is going to be 900 pixels. As for the phone size, I'm going to set two 40% Besides that, I'm going to select about, I mean, the paragraph, let's set with two for two Ram. As you can see, everything looks good. Next, I'm going to make the screen smaller. Let's set with 2500 pixels, that's what the Hyde is going to be, 800 pixels. Let's create new CSS media query with Max with 700 pixels. I'm going to set the phone size of the HTM element to 35% Next, I'm going to select landing left and set with 100% After that, I'm going to go to the Java script file Create new variable. It's going to be heading, right? Let's select elements using query selector method. We need here, class main, heading, right? Let's duplicate the code we need here. Heading left as well. Both heading elements are selected. Next, I'm going to create new variable called responsive Design is going to be a function we need if statement in which I'm going to define the following. Window inner width is less than or equal to 700 pixels. Then we need heading right style. Do display none. If the screen size is smaller than 700 pixels, we need to hide the heading on the right side. As for the left, we need to make the text explore. Also, we need L statement. Let's grab this code. In the L statement, we need display block for the heading right. For the heading left, we need text content to be x. Then we need event listener for the window object with the resize event. And also we need here a callback function. Let's call the function responsive design. And also we need to call the function outside of the statement. Once we make the screen size smaller than 700 pixels, the right side, I mean the right heading is hidden. Next, let's select main heading left. And change the right position is going to be 50% Also, we need to center the element using transform translate x 50% Next we need padding on the left side to be three Ram, the heading is placed in the center. Let's go ahead and select background of the right side and set display to none the background is hidden. Besides that, I'm going to select main heading, right with text H one and also social media element. We need web kit text fill color. The color is going to be white. I'm going to select main heading and set phone size, 212 Ram. Now as you can see, the headings and also the icons are white. Actually, we have here mistake, we need text content and not the display. And the same thing in the outs statement. Now the problem will be fixed. We have here heading with the second part. Next I'm going to select about change. The bottom position is going to be 50% As for the let position, it's going to be 50% Then we need transform translate x with -50% Also we need display flex and we have to change the direction, is going to be column. Let's a line items in the center. Also we need to define the width is going to be 100% Actually we have here some issue. Yes, we need here left position and not porter left. Now the element is placed in the center. Let's change the screen for the mobile and create new CSS media query. The max width is going to be 450 pixels. I'm going to select about and set bottom position to 45% Let's change the screen, make it smaller. We have here navigation, which looks nice. I don't like the effects here on smaller screen size. I'm going to take care of that. Let's select navigate with main heading and set transform translate 50% and then minus five Ram. Now I think we have here much better results. Actually, I think for the project we are done. Hopefully it was interesting and you learned some new stuff. Let's go ahead and move on to the next project. 27. Project - Testimonial Slider: All right, so it's time to move on answer to create our next project. In this section, we are going to be building a testimonial slider. This project is going to be created based on HTML, CSS, and Javascript. Let's go ahead and describe it quickly. As you can see, we have here a testimonial slider. I mean, in the center of the page, you can see the card where we have the image of the customer, then the opinion of the customer, also the name and the age. On the right and left side, you can see the arrows. You can click the arrows and we will switch to the other customers. Down below, you can see those are the controllers. You can click those dots and we will get the proper customer. Okay, I think the project will be interesting and useful nowadays. Almost every website does have such section. You will be able to learn about how to create testimonial slider. Okay, So let's go ahead and get started. I have created a new folder on the desktop in which I have folder for the images. Let's go ahead and open project and the VS code, and then create working files for HTML. Then for CSS, also we need file for Java script. Let's open index HTML file and create the basic HTML structure. I'm going to change the title. It's going to be testimonial slider. Then I'm going to link the CSS file, and also we need to link the Javas file. Let's insert the file naming the source attribute. Okay, let's open the project to the browser using live server and then organize our working environment. I'm going to place the browser and the editor side by side like so, in order to make the process simpler. Okay, I'm going to correct the phone CDN link because we are going to use some phone so icons throughout this project. Let's copy the link, then open link tag in the head element and paste the CDN in the H reference attribute. Besides that, we're going to use some Google phones. So let's visit the Google Phones website. I'm going to search for phone call. Can it? Let's select Styles. Then I'm going to copy the link and paste it in the head element. Okay, we are ready to start to write the code. I'm going to start with the HTML markup. We need container which will wrap the entire content. Next, we need testimonials wrapper, in which I'm going to open another deep, it's going to be testimonials header. Inside that element, we need H three heading element with the text, our customers. Next we need H one heading element, it's going to be testimonial. Next we need stars. I'm going to open elements with the class A solid star. We need five stars. Here we have the icons. Next I'm going to insert here, Testimonials in which we need slider. Then we need slide. I'm going to insert here, slide background. Next, slide content in which I'm going to insert element. It's going to be a solid left. Then we need right. Next we need to create slide image in which I'm going to insert image tag. Let's select Image from the images folder. It's going to be client on IPG. Next, slide text in which I'm going to insert. H, three heading element, it's going to be wonderful product. Next we need paragraph with a Tammy text. Also, we need another paragraph in which I'm going to insert the name of the client, the H. After that, I'm going to create the controls. Let's open Deep's going to be controls. And I'm going to insert here I element, which is going to be FA solid FA arrow left. Then we need arrow right. And also I'm going to insert your dots which will be created by span elements. All right, so actually we have here a little problem need to add here. It's going to be solid. Now, the phone Asmicons are displayed actually with the H demil markup. We're down. Let's go ahead and start to write the CSS. First of all, as usual, I'm going to select every element and then set margin and putting both of them to zero. Next, I'm going to set box sizing to border box. Also we need phone family. It's going to be the phone called can it, which we selected in the Google phones website. Next, I'm going to set the phone size of the H mil element to 62.5% because we're going to use M as the measurement unit one, Ram will be equal to ten pixels, all the elements became smaller. Next, I'm going to take you of the image. Let's set with 215 Ram, then the height is going to be 16 Ram. Then I'm going to select the image itself, define within height. I'm going to set with 200% the height is going to be 100% And also we need object feet with value cover. Now the image became smaller. Let's go ahead and start to customize the container. I'm going to set with to 100% then the height is going to be 100 part height. Let's change the background color. I'm going to use linear gradient. The first color is going to be 368661. Then the next one is going to be 2964. We have here nice background. Let's use flex books. We need to center the content using justified content center and line items center. So as you can see, the content is placed in the center. Let's go ahead and select testimonial wrapper. I'm going to set width to 95% then the height is going to be 90% Next we need background color. I'm going to use linear gradient. The first color is going to be RGBA, black color with opacity 0.7 Next we need again, black color with the opacity 0.5 With the opacity 0.6 Then I'm going to define URL of the background image. Let's select Image from the images folder. Next, I'm going to define the position is going to be sensor and also we need no repeat. Finally, I'm going to set background size to cover. As you can see, we have here nice and cool background image for the wrapper. Next we need box shadow with value 01, Bram five fram, and the color is going to be RGBA, black color with the opacity 0.4 We have here nice and cool shadow effect. Next I'm going to take care of the testimonial header. Let's set position to absolute. Then we need position relative for the parent element, which is testimonial wrapper. I'm going to set top position to 5% then left position is going to be 50% We need to center the element using transform translate x with the value minus. 50% Next, we need to align text in the center. We have here the testimonial header. Let's copy the, Select Paste it here. And select H, three heading element. I'm going to set phone size to two Ram. Then the phone weight is going to be 300. Also, we need color to CCC. We have here the first heading element. Next, I duplicate this code, change the selector we need here. H one heading element. Let's set phone size to five Ram. Then I'm going to add here text transform with the value upper case also change the color, it's going to be white. Then we need letter spacing with the value 0.4 Ram. Here we have the heading. Next, I'm going to take of the phone asume icons. Let's set phone size to 1.6 Ram. Then the color, It's going to be RTB 255 to 2062, it's going to be yellow color. Let's set margin to 0.5 Ram. We have here the stars. They look pretty nice. Next I'm going to take care of the controls. Let's set to five, then the height is going to be five Ram. Next we need background color. I'm going to set background color 27854. Then I'm going to set Opacity 2.6 Next we need border radius 50% we need rounded controls. Then I'm going to set display to flex because we need to center the arrows using justify content center and line item center. As you can see, the arrows are placed in the center of the circles. Let's add font size, make it three Ram. Then we need color. It's going to be 444. Also, I'm going to set position to absolute. To position is going to be 50% Also we need transform translate Y in order to center the arrows vertically with the value -50% And then change cursor, make it pointer. We have here the controls. Now we have to select controls with mph, chart selectors and set left position for the first arrow to 15% Let's duplicate this code. Select second arrow and change position. We need right position 15% As you can see, the arrows are aligned nicely. Next I'm going to take care of the dots. Let's select span elements. First of all, I'm going to define we and height. Let's set both of them to one Ram. Then we need background color. It's going to be CC. Then we need border radius to make the elements rounded using 50% Right now, dots are not visible. Let's set position to absolute for the parent element. Then pots and position is going to be 10% as let position, I'm going to say it to 50% And then we need to center the elements using transform translate x -50% Next we need Flexbox. Here we have the dots. We need some space between them. Let's do that using margin 0.5 rm. And also I'm going to set cursor to pointer. Now the dots look pretty nice. Let's add class active to the first spin element. Then select active spin element. Set width to 1.5 then the height is going to be. 1.5 Ram. We need background color to be white. So as you can see, the dot is bigger. We need to center the elements vertically using line items. Center, okay, that's it about the dots right now. Next I'm going to take care of the slide. Let's select testimonials set with 55% then the height is going to be 50 Ram. Next minute position absolute, I'm going to set to position to 50% then the left position is going to be 50% And we need to center the element using transform translate the values -50% again -50% Next I'm going to add border. It's going to be 0.1 m solid and the color is going to be white. Here we have the border, let's duplicate slide a couple of times. I'm going to make here some changes. We need to change the image name as the name of the client is going to be Mary Brown. Next we need client three. The name is Nick Jones and the he will be 27. We need client four, the name is Brown. Let's change the H. We have here. Last image, client five, and the client is going to be John Smith, 25. As you can see, this slide are displayed next, I'm going to select slider, set height to 100% Then the width is going to be 500% We need to set display flex, so the slides are placed horizontally, side by side. Next I'm going to select slide set to 20% It will be 100% of the wrapper. I'm in the fifth part of the wrapper. Let's select slide background and set width to 70% and the height is going to be 65% I'm going to change the background color. Let's use here this green color. Next, I'm going to set position to absolute. We need position relative for the parent element. Then I'm going to define to position is going to be 50% the left position is going to be 50% And we need to transform, translate with the values -50% and again -50% Here we have the background for this slide. Let's add here, or the radius. It's going to be two Ram. Then we need opacity 0.7 After that, I'm going to select slide content. Let's grab the code from here and paste it for the slide content. Change the bacon color, it's going to be white. Also, I'm going to get rid of opacity. Then we need display flex. Also, we need here justify content with the value space between, we need space between the flex items. Also, let's add here a line item center. And then we need to create space using padding, 0.5 Ram. Next, I'm going to rotate the background using rotate Z function. And the value is going to be minus six degrees. Now we have here much better and nice results. Next, I'm going to take care of the. Phonosomicon, let's set phone size to 12 Bram, then the color is going to be green. Also, I'm going to set position to absolute. We have here the quotes and we need to position them. Let's first phonosomicon using nth child select the two position is going to be -20% As for the left position, I'm going to set it to 10% Let's duplicate this code and change the position. For the second phonosomicon we need bottom position -20% and right position 10% As you can see, the quotes are placed nicely. Let's go ahead and take care of the slide text. Let's set width to 70% then I'm going to take care of the image. Let's set border radius to 3m03 Ram zero. Now the image looks pretty nice. Next I'm going to select slide image with after pseudo elements. Also we need slide image with before pseudo element. We need to create nice border. Let's set quantum to empty. Then we need to be 100% the height is going to be 100% Then we need, let's set it to absolute. We need position relative for the parent element, which is slide image. Next I'm going to set border to 0.2 Ram solid. And the color is going to be RTB, a black color with opacity 0.4 Next we need border radius three, Ram 03 Ram zero. It's like the border radius of the image. Next we have to take care of the positions of the after and before elements. Let's start with the after element. The two position is going to be minus one Ram. Then we need left position is going to be -0.5 Ram. Let's duplicate this code, change the selector we need before element. Let's set pots and position two minus one Ram. And right position is going to be -0.5 Ram. Okay, now the elements look nice. We need here is the index property minus one. Now we have here this nice and cool, the fact of the border. Let's select slide text with H three heading element. I'm going to set phone size to 2.5 Ram. Then the phone weight is going to be 300. I'm going to set color to 111, then I'm going to set margin at the bottom to one Ram. Let's go ahead and customize the paragraph. Select slide text with selector. I'm going to set phone size to 1.4 Ram. The phone weight is going to be 300. Also we need color to be RGB 3,040.35 Then I'm going to set line height to 1.2 Also we need your margin. At the bottom, it's going to be three Ram. As you can see, the paragraph looks pretty nice. Let's set with 235 Ram. Next I'm going to select Slide Text Client. Let's set phone size 21.8 Ram. As for the color, I'm going to use RTP 11, 83, 47. The name and the. He looks pretty nice. Actually, I get rid of this border from here. We no longer need it. Now we have to start to write the Javascript. Let's create variable. It's going to be slider. I'm going to select element using query selector method. Let's insert your class name slider. Next, we need a couple of different variables. The second one is going to be slides. And we have to select slides using query selector All method. Let's change the class name. The next variable is going to be left arrow. Let's controller left arrow. Also we need here right arrow. Let's duplicate this line of code. Change left into right. We need here child two. All right, now I'm going to add even listener to the right arrow with click event. Then we need cope function which will be executed once we click the right arrow. I'm going to add style to the slider. It's going to be transformed with the value translate x function. I'm going to interfere -20% Next, we need transition for the slider with all and the duration is going to be 0.8 second. Also, I'm going to use cubic P1001. If I click right arrow, then this slider will move to the left side. Next, I'm going to create new variable, it's going to be slide index. And I'm going to set it to zero by default and duplicate this code we need here. Left arrow. I'm going to add here slide index, and I'm going to set it to slide index minus one. Then we translate x. I'm going to pass here slide index multiplied to -20% Let's copy this code. Paste it here for the right arrow we need here, plus one. Now if I click the, the slider will work fine. Once we reach to the last or first slide, then we have to stop slider. We need here slide index greater than zero. We need question mark, slide index minus one or zero. We need the similar statement here. Slide index less than slides taught length minus one or then question mark. And we have to inder slide index plus one or slides length minus one. Now once we reach the last slide, the slider will stop working and the same will happen for the first slide. Okay? Now we need overflow hidden to hide the rest of the slides. Now if I click, then the slider will work perfectly. Now we have to take care of the dots. Let's create variable. It's going to be dots wrapper. Select this element. Next we need, I'm going to pass your span. Also we need query select all. I'm going to look through the dots using forage method. We need dot and index. The parameters I'm going to add even listening to the dot with click event. And also we have to pass here callback function. Let's set slide index to index, I mean the parameter. Next I'm going to dots active, use inquiry selector method. I'm going to remove active from the class list. Let's add the same statement here. Also, I'm going to add to the active. Now if I click the, the slider will work. Now we need to work the dots. Once we click the controllers, let's add here dots wrapper children. We have to add here slide index. I add active to the class list. Then I copy this code from here and add it for both arrows. Now if I click, then the dots will work fine. Actually, everything works fine. Next, I'm going to create variable called set index, which will be function. I'm going to grab this code from here and add a function also we need this code. Then I'm going to get rid of this code end called the function set index. I'm going to do the same for left and right arrows. Let's call function set index. Now the code looks much simpler. Actually, everything works perfectly and we're done with this project. Hopefully it was interesting and you learned some new stuff. Let's go ahead and move on to the next project. 28. Project - Animated Contact Form: Hi and welcome to our next project. In this section, we're going to be creating an animated contact form. The project will be created based on HTML, CSS, and Javascript. As you can see, we have here an animated circle in the center of the page. If I click it, then the contact form will be displayed. It consists of a couple of different elements. We have here heading to input fields for name and email with this nice focus effect. Then we have here text area for the message. Down below, you can see the button which has this nice and cool hover effect. At the top right corner of the contact form, you can see the X closing button. If I click it, then the contact form will close. Okay, I think the project will be interesting and useful. Let's go ahead and get started. I have created a new folder on the desktop. Let's go ahead and open it in VS code, then create our working files for HTML. Then we need file for CSS, so I'm going to create script JS file for Java script. Let's open index HTML file and create the basic HTML document. I'm going to change the title. It's going to be Contact Form. Next, I'm going to link CSS file. Also we need link for Javas file. Let's go ahead and open the project to the browser using live server. And also we need to place the browser and the editor side by side, like so. Next, I'm going to visit the Google Phones website. Because we're going to use Google phones throughout this project, I'm going to search for phone called poppins. Let's select a couple of different styles, then I'm going to copy the link and paste it in the head element. Next, I'm going to grab the phone, some CDN link because we're going to use phone some icons we need to open link tag and paste the CDN in the H reference attribute. Okay, we are ready to start to write the HTML markup. We need a container which will wrap the entire content. Next, we need form wrapper. I'm going to open button with the class close BTN. Next, we need to place here x after the button. I'm going to create form with the class name contact form. Let's get rid of action attribute Inside the form element. I'm going to place H one heading tag with the class form heading. The text is going to be Contact us. Next we need development, which is going to be input groups. Let's insert your input group in which I'm going to place label for name. I'm going to add here field label. Next, I'm going to insert your input tag with the type text, also class name, It's going to be field. Then we need to add here placeholder attribute with the text. Enter your name. I'm going to duplicate input group. We need the same thing for the email. Let's change the text. So we need here enter your E mail address next to insert text area. At first we need development with the class text area group. And then I'm going to insert your label for message. The class name is going to be field label. Next, I'm going to insert text area. With the class name field. Also, we need placeholder attribute with the text, your message here. Okay, After that we need submit Batson. With the type Batson. I'm going to add here class name, it's going to be Submit PTN. Then I'm going to add here which will be placed in the span element Submit. And also we need element which is going to be solid FA arrow right after the button. I'm going to place here paragraph with the text for any question conflict or 2047 call center. I'm going to add here span elements and some dummy phone number. Actually all the elements are created and now we can start to write the CSS. As usual, I'm going to select every element and then set margin and padding both of them to zero. Next we need to define box sizing. It's going to be border box as I'm going to set out line to none. Then I'm going to define the phone family. It's going to be poppins san serif. The default styles are applied. Next, I'm going to set the phone size of the HTM element to 62.5% In order to use M as a measurement unit one, m will be equal to ten pixels. After that, let's select container. I'm going to define width, It's going to be 100% then the height is going to be 100 port height. I'm going to change the background color, it's going to be EEE. Next, I select form wrapper, let's set with 60% then the height is going to be 70. Next we need background color, it's going to be white. Here we have the form wrapper. We need position to be absolute. Then the two position is going to be 50% The left position will be 50% And in order to censor the element, we need to transform translate -50% and again -50% As can see, the form wrapper is placed in the center of the page. Next, I'm going to add here some shadow with the value 03 Ram, six Ram. And the color is going to be RGBA, black color with a lower opacity, 0.1 We have here nice shadow effect. Let's set border radius to one Ram in order to make the corners rounded. Now the foam wrapper looks better. Next, I'm going to select close BTN and set its position to absolute. Then the two position is going to be -1.5 fram. The right position is going to be -1.5 fram as well. Let's set width to three Ram. Then the height is going to be a three Ram. We need background color, it's going to be white. Here we have the x closing button. Let's set border 2.1 Ram sold. The color is going to be EEE. Also, we need border radius in order to make the element rounded. Next, I'm going to add here box shadow with the value 0.1 0.1 m. The color is going to be RGBA, black color with the opacity 0.1 Also we need here pointer. And then I'm going to create hover effect. Let's select button. With hover, I'm going to change the background color. It's going to be two to two. Then we need color to be white. I'm going to set border to 0.1 Ram solid and the color is going to be white. Let's add here transition to make the effect smoother. If I hover over the X closing button, then We'll get here. Nice and cool effect. Let's go ahead and select contact form. I'm going to set width to 100% then the height is going to be 100% Let's set display Flex. Then we need flex direction to be column, we have to align elements vertically. Then we need to justify content. It's going to be space even to create event space between the flex items. Also, I'm going to set putting to 0.15 Ram on the left and right sides. Let's go ahead and form heading. I'm going to set form size to form. Then the color is going to be 333. Here we have the heading. Next I'm going to select Input Groups. Let's set with 100% Then we need display Flex. I'm going to set justify content to space between. Also we need margin at the bottom, it's going to be three Ram. The input fields are aligned. Next, let's select input group. We need width to be 40 Ram, Then the height is going to be six. Next I'm going to select field label. Let's set size to 1.4 Ram. The color is going to be 888. After that, I'm going to select input element using class field. Let's set with 100% then the height is going to be 100% Next we need border, it's going to be none. Also, I'm going to set border bottom, 2.2 m solid and the color is going to be BBB. We will have just border at the bottom. Next we need phone size is going to be 1.8 Ram. Then I'm going to set pudding to 002 Ram and zero. That's it about the input element. Next we need field with placeholder attribute. I'm going to change the color, Let's make it 222. The color of the placeholder is changed. Next, I'm going to select Text Area Group. Let's set display Flex. We need flex direction. It's going to be column. After that, I'm going to select text area group, followed by the text area. I'm going to set height to 12 Ram. We need here border at the bottom. It's going to be 0.2 Ram solid, and the color is going to be BBB. Then we need padding at the top, it's going to be one Rams. I'm going to disable the resizing function. We have to set resize to none now we no longer can recite the text area. After that, I'm going to select Submit BTN, Let's set with 18 Ram, then the height is going to be five Ram. Then we need background color. I'm going to 72 f45 A. Next, get rid of default border. Let's make it none. I'm going to make the element rounded using border radius three Ram. Change the color. It's going to be white as we need. Font size to be 1.5 Ram. Now the button looks much better. Next we need box shadow. It's going to be 0.3 Ram, one Ram, and the color is going to be 250-57-0590 And the opacity 0.5 Also we need cursor to be pointer. Okay, so the button looks pretty nice. Next I'm going to select Submit BTN, followed by this an element. Let's set position to absolute. Then we need position relative for the parent element, which in this case is button itself. Let's set to position to 50% Then the left position is going to be five fram. Then we need transform translate Y -50% in order to censor the element vertically. Next, I'm going to select submit BTN followed by the icon. Font size is going to be 1.8 Ram. Then position is going to be absolute. We need to position to be 50% then the right position is going to be 4.5 Ram. And also we need to censor the element vertically using transform translate Y -50% Okay, after that I'm going to create hover effect. Let's select button with hover. On hover, I'm going to change the background color. It's going to be 333. Also, we need box shadow with the value of 0.3 Ram, one Ram. And the color is going to be RGBA, black color with the opacity 0.5 hover works fine. We need to add here transition now as you can see, we have a nice and cool hover effect. Hover. I'm going to move the icon. Let's submit button with hover followed by the element. I'm going to change. The right position is going to be three Ram. I also use here transition with right and the duration is going to be 0.5 second. Once I hover, then the arrow will move to the right side. And actually it will create this nice and cool hover effect. Next, I'm going to select contact for the paragraph down below. Let's set phone size to 1.6 Ram. Then the color is going to be 888. Next, I'm going to select the span element in the paragraph. Let's change the color. I'm going to use here, color 45. The paragraph looks pretty nice actually. The next thing that we have to do is to create focus effect. Once we focus, we have to change the border at the bottom. I mean the color, Let's set it to a 0.2 Ram solid, and the color is going to be 45. A next transition border bottom with the duration 0.3 second. Also we need easing out function focus, the input fields, then we'll get this nice and cool effect. Okay, after that, I'm going to select Field focus, followed by the placeholder attribute. We need to hide the placeholder on focus the field. Let's set color to transparent. And then we need to transition color and the duration, 0.3 second. Once we focus, then the placeholder attribute will hide nicely. Now we need to take care of the animations. Let's set display to none for the phone wrapper. I'm going to add new elements in the HTML file. Let's call it loading. We need here another deep loading background I'm going to place here which is going to be FA regular. Fa envelope. Next, I'm going to style those elements. Let's select loading. Set width to 100% then the height is going to be 100% I'm going to set position to absolute. Then we need to position zero. Let position zero, we need Display Flex in order to center the content using Justify Content Center and Align Items center. The element is placed in the center. Next, I'm going to select loading background. Let's define width. It's going to be 12 Ram. Then the height will be 12 Ram as well. Change the background color, Use this color here. Next we need border radius. It's going to be circle. We need 50% Then we need box shadow with the value of 01m3 Ram. The color is going to be this color that we used recently. Next I'm going to select elements. Let's set to 12 M. Then the height is going to be 12 Ram as well. Next we need color. It's going to be white. Then I'm going to increase the phone size. Let's set it to M. Change the position, I'm going to make it absolute. Then we two position is going to be 50% left position is going to be 50% And we need to center the element, translate -50% and -50% Also we need display flex with justify content center and line item center in order to censor the icon inside the circle. Let's at courser to point. Okay, the icon looks pretty nice. Now I'm going to create CSS key frames with the name loading an at 0% we need width to be 12 Ram. Also the height is going to be 12 Ram. Background color will be F45. Then at 50% I'm going to increase the width, it's going to be 14 Ram. Then we need height 14 Ram. As for the background color, I'm going to use F616. Let's apply those tiles. We need animation. Then the name of the key frames loading the duration is going to be 0.9 second. Then we need easing out function. Also, we need to play the animation infinitely. As you can see, the background is animated. Next, I'm going to use Javascript in order to display the contact form. Let's create a new variable. It's going to be, let's select icon using query selector method. We need to insert you the class name loading I. Then we need the second variable which is going to be close BTN. Let's select this element. As for the third variable, I'm going to use container. Let's insert your class name container. Next, I'm going to add an event listener to the icon with click event. Also, we have to pass here the callback function which will be executed once we click the icon on click. I'm going to add new class to the container using add method and the class name is going to be change. Let's duplicate code we need here, Close PTN. Once we click the closed PTN, then we need to remove the class change from the container. Now it's time to use class change and we have to define new CSS styles, which will be applied on click. We need here opacity zero, visibility hidden. Next, I'm going to add here opacity zero and visibility hidden. Also, we need to select form wrapper with class change. And we have to make the form visible using opacity one and visibility visible. Once I click, then the form will display. And then once we click the X button, it will close. Now I'm going to add here transition with all duration is going to be 0.3 second. We need transition by default for the loading with some delay time 0.3 second. Next we need transition for the Fam wrapper. It's going to be a 0.3 second and the delay time 0.3 second. And also we need transition by default all 0.3 second. Now if I click, then the form will display with Fa effect and actually everything will work fine. All right, so that's it. Let's move on. 29. Project - Website Header with Forms: All right, so it's time to move on and start to create our next project. In this section, we are going to be building a website header with registration and logging forms. The project will be created based on HTML, CSS, and Javascript. So let's go ahead and describe it quickly. As you can see, we have here this nice and cool website header. We have here little navigation with two links home and join. Then we have banner with heading elements, and also we have here a little logo at the bottom right corner. If I click join, then we'll get here the registration form. We have here a couple of different input fields with two buttons. If I click the login link, then we'll go to the login form. As you can see, the button is changed properly. If I click Sign up, then we'll go back to the registration form. If I click Home, then we'll go to the Banner Ok. So that sits about this project. I hope it will be interesting and useful and you will enjoy it. So let's go ahead and get started. I have prepared a new folder on the desktop in which I have folder for the images. Let's go ahead and open the project in VS code. Then I'm going to create our working files for HTML. Then we need file for CSS. I'm going to create script. S. Let's open index Html file and create the page Html structure. I'm going to change the title, it's going to be landing page. Then I'm going to link the CSS file link for the Java script file. I add here file name in the source attribute. Okay, let's go ahead and open the project to the browser using live server package. Then I'm going to place the browser and the editor side by side. So all right, I'm going to visit the phone awesome CDN because we're going to use some phone awesome icons. Let's copy the link from here. Then I'm going to open link tag and paste here the CDN. Next we need to visit the Google Phones website. I'm going to use Google Phones throughout this project. Let's go ahead and search for font called cabin. Let's select a couple of different styles, then copy the link and paste it in the head element. Okay, we're ready to start to create the HDL markup. First of all, I'm going to open deep tag, which is going to be the container. Next, I'm going to insert here, another is going to be landing in which I'm going to create navigation with the class part. I'm going to add here navigation in which let's place link element with the Cuss logo. I'm place here span element with the Quas Circle. Next, I'm going to add here another span with the Quas logo text. The text is going to be Go anywhere. Next, we need link elements. I mean the knob items. The first one is going to be home. As for the second one, I'm going to place here, Join. Let's sit about the navigation. Next I'm going to create the banner. Inside the banner, I'm going to place H one heading element. It's going to be explore new tours with go anywhere. I'm going to place your span elements and go anywhere inside the span. Next, I'm going to create contact. We need here H three heading element with the text. Start for three. Next I'm going to insert here H one heading element and it's going to be create new account. After the heading elements, we need paragraph with the text already a member. Then we need link element in which I'm going to place log in. After paragraph. We need to create form elements with the class contact form. Let's get rid of action attribute Inside the form. I'm going to create input group in which we will have input elements with the type text, with the placeholder attribute. It's going to be the first name. But then we need elements with the class's a solid user. Let's duplicate input group a couple of times. Second one is going to be last name. As for the third one, I'm going to insert your E mail address. We need to change the type. It's going to be e mail as for the phone or some icons. As for the fourth item we need here, password. Let's change the type. It's going to be password need lock. After that I'm going to create PTN group in which we'll have two different buttons. Let's create button with the class contact BTN and also I'm going to add here type attribute. It's going to be button next. I'm going to insert here change method. As for the second button, I'm going to add here create account. Okay, that's it about the form. Let's create logo at the bottom. Everything is prepared and actually we can start to write the CSS. I'm going to select every element using aster isk. Then let's set margin and padding, both of them to zero. Next, I'm going to define box sizing property, it's going to be border box. Then we need text decoration to be none. Also, I'm going to set outline to none. Finally, I'm going to define the phone family. It's going to be cabin Sanerif. Next, I'm going to define the phone size. Next I'm going to define the phone size of the H on element. I'm going to set it to 62.5% in order to use m as the measurement unit. In this case, one m will be equal to ten pixels. After that, let's take care of the container. I'm going to define width. It's going to be 100% As for the height, I'm going to set it to 100 VH. I mean viewport height. Let's change the background color. It's going to be 525561. Next, I'm going to set display to flex. We're going to move the content in the center using justify content center and a line items center. As you can see, the content is placed in the center of the page. Next, let's go ahead and select landing. I'm going to define within height. The width is going to be 95% As for the height, I'm going to set it to 90% Then we need to define background. Let's use linear gradient. The direction of the transition is going to be two rights. Then we need RGB color 309-40-2505 We need here percentage value 40% Then the next color is going to be RGBA 309-40-2505 The same color but with opacity 0.8 Next we need to define the URL for the background image. Let's select image from the images folder. Then we need center of the position and no repeat. Also, we need to define background size property with a value cover. Okay, we have here this nice and cool background for the landing. Let's add border radius for the landing, make it two Ram. Also, we need box shadow with the values 01 Ram, five Ram. And the color is going to be RGBA, black color with the opacity 0.4 All right, next let's go ahead and select Banner. I'm going to make it hidden using display none, then I'm going to select Contact and hide it as well. Now let's take care of the navigation. I'm going to select, Now let's set position to absolute. Then we need position relative for the parent element. Next, I'm going to set to position to zero. Then the left position is going to be zero. Next we need width, It's going to be 30% Height is going to be 12:00 P.M. Next I'm going to change background color. It's going to be red for a while. Here we have the navigation. Let's get rid of background color. Next we need navigation. I'm going to set width to 100% then the height is going to be 100% Let's set display to flex and we need to justify content space between. And also align items center in order to center the items vertically. Next, I'm going to create some space using padding, zero fi fram, the links are aligned nicely. Let's take care of the logo. I'm going to set display to flex. Next we need circle. Let's set with three Ram. Then the height is going to be three Ram. I'm going to change the background color. Color is going to be 1d95, it's a blue color. Then let's set border radius to 50% In order to make the circle also we need margin on the right side, one Ram. Here we have the circle. Next I'm going to select text. Let's set size to two Ram. The phone weight is going to be 400, also creates some space between the letters. Next we need color. It's going to be white. Here we have the text. I'm going to align them in the center using Align Items center. Now the logo and the text are aligned nicely. Next I'm going to take care of the item. Let's set font size to 1.6 Ramon. Weight is going to be bold. Also we need here color 6967. Here we have the navigation items. Let's select nav item with hover. I'm going to change the color on hover. It's going to be CCC. And also we need transition in order to make the hover effects smoother. Once I hover, the nova items will change their color. Next, I'm going to take care of the banner, which right now is hidden. Let's set position to absolute. Then we need to position, it's going to be 30% then the left position will be 5% the banner is aligned. Next, I'm going to take of the H one heading element. Let's set font size to five, then the phone weight is going to be 300. Change the color, I'm going to make it white. Next I'm going to take of the span element. We need display block. Then I'm going to increase the phone size. It's going to be seven Ram. Then we need font weight. Let's set it to bold. I'm going to align text in the center, and then I'm going to transform text into upper case. Next, I'm going to change the color. It's going to be blue. Also we need margin at the top. Let's set it to six Ram. Finally, I'm going to add some shadow effect. Let's set text shadow to 01 Ram. Three Ram and the color is going to be black with the opacity 0.2 Okay, so the banner looks pretty nice. Next, I'm going to add here display none for a while because we're going to take care of the contact section. Let's get rid of display none from here. Set position two, absolute, then we need to position is going to be 25% then the left position is going to be 5% As you can see, the form is placed nicely. Then we need contact H three. Let's set font size to 1.6 Ram, the text transform. It's going to be upper case. I'm going to change the color, Let's use this gray color. Let's duplicate this code, change the selector we need here. H one heading element. I'm going to increase the phone size. Let's set it to 4.5 Ram. Then get rid of text transform and set font weight bold. Then the color is going to be white. Next we need let's spacing. Let's set it 2.2 Ram. I'm going to set margin to two Ram and zero. The second heading looks pretty nice. Next, let's select paragraph, the font size to 1.5 Then we need weight, it's going to be bold. Next, I'm set the color to gray. We need margin at the bottom, it's going to be a three ram. Now I'm going to take care of the link which is placed inside the paragraph. Let's set color to blue. Okay, let's see about the paragraph next. We need to take care of the input fields. Let's select input group. I'm going to set width to 40 Ram. Then the height is going to be 4.5 Ram. Next we need margin, it's going to be 20. Then I'm going to select input elements. Let's set width to 100% then the height is going to be 100% Next, need background color. I'm going to set background color 2323644. Next, we need border to be none. Also, I'm going to set border radius to 1.5 Ram. Next we need putting, it's going to be one Ram and two Ram. The input fields look much better. Next I'm going to add here color. It's going to be CCC. Also we need phone size 1.4 Ram. Next I'm going to copy the selector and add here focus pseudo class on focus. I'm going to change the border on focus. I'm going to change the background color. It's going to be 344b. Also we need to change the border. Let's set it to 0.2 Ram solid, and the color is going to be blue. Once we focus, then we'll get this nice and cool effect. All right, after that, I'm going to take care of the phone icons. Let's set position to absolute. Then we need to position relative for the parent elements which is input group. Let's set right position to two Ram as two position is going to be 50% And we need to censor the icons vertically using transform translate Y -50% Next let's set the font size to 1.4 Ram. Also change the color. I'm going to make it CCC. As you can see, the icons look pretty nice. Next we have to take care of the buttons. Let's set with 240 Ram, then the height is going to be five Ram. Also, we need display Flex justify. Content is going to be space between, then we need margin at the top, the buttons are aligned nicely. Now we have to customize each of them. Let's select Contact. Btn set with to 46% then the height is going to be 100% Let's add here border radius, it's going to be four Ram. Then we need color, it's going to be white. I'm going to set border to non. Next we need font size, it's going to be 1.5 Ram. Let's set font weight to polt. Also change the cursor, make it pointer. Actually, we need here color, not the columns. Next we have to change the background color for each button separately. Let's select the first one. I'm going to set background color to gray. As for the second button, I'm going to make its background color blue. The buttons look nice. Next I'm going to select logo at the bottom. Let's set position to Absolute. Then we need bottom position, it's going to be three Ram. I'm going to set right position to three Ram. Then we need width, it's going to be six Ram. The height will be six Ram as well. We need to transform elements into circle, so we need border radius 50% and also change back on color, make it blue. Next we need box shadow with the values 01 Ram, five Ram, And the color is going to be RBA, black color with the opacity 0.3 Here we have the logo at the bottom right corner. Now I'm going to display the banner back and hide the contact section using opacity zero and visibility hidden. Now it's time to write some Javascript. Let's create a new variable. It's going to be container. I'm going to select container using query selector method. We need to specify here the class name container. Next we need to select join button. Let's select this element. We need to place here navigation a with the nth child selector. It's going to be three. Now, I'm going to add an event listener to the joint button with click event with a callback function which will be executed once we click the link element. I'm going to add new class to the container using a method. This class is going to be changed. Now I'm going to use class change and create new styles which will be applied. Once we click the link, we need to select and display back using opacity one and visibility visible. I'm going to add here transition with values all 0.5 second and with the delay time 0.5 second. Let's copy the transition and add it to the contact by default. Next we need to select banner with class change because we need to hide banner. Once we click the link, let's set opacity to zero and visibility to hidden. We need to add here transition all 0.5 second. Again, we need transition by default, but with a delay time. Once I click, then the contact form will display. Next, I'm going to create new variable. It's going to be home BTN. Let's select this element. We need to change the child selector. It's going to be two. Then I'm going to duplicate this code, change the bottom. We need her home. Once we click the Home button, we need to remove class change from the container in order to display back the banner. Once we click Home, then the banner will be displayed back and the registration form will hidden. Next I'm going to create new variable. It's going to be login BTN. I mean the login link which we have in the paragraph. Let's select this element. I'm going to add an event listener to the login button with again click event and with a callback function. Once we click the login button, we have to add to the container new class. And it's going to be, we used here togal method. Let's select height followed by the input group with chart select one. And also we need the same thing for the second element. We need to hide those input fields. Once we click login, then first two input fields will. Next, we need to here a question mark. If the statement is true, then we need to change the text content of the login button to sign up. If it is false, then we have to make the text content of the login button log in. If I click the login BTN, then the text of the logging will change. We need the same thing for the button as well. Let's contact PTN, Change the class name. We need here chart selector. We need to select the second button. I'm going to use here, operator. We need to change the text content of the contact BTN, make it log in. We need the same thing here as well. We need to change the text content of the BTN and make it create account. Let's go ahead and check what we have here. Let's click Join, then move to the logging. So as you can see, the content of the button is changed. All right, so everything looks pretty nice and works perfectly. Let's move on. 30. Project - Pricing Cards: Hi and welcome to our next projects. In this section, we're going to be building modern and cool pricing cards. The project will be created based on HTML and CSS. As you can see, we have here three different cards with some nice and cool gradient effects. Each card has a couple of different parts, like type, price features, also the button to buy, and so on. If I reload the page, then the cards will appear with nice and cool fade effect. Nowadays, lots of websites need such sections. I think the project will be interesting and useful. So let's go ahead and get started. I have created a new folder on the desktop, which right now is empty. Let's go ahead and open the project in VS code, then create our working files. We need two files, index HTML and style CSS. Let's open index HTML file and create the basic HML documents. First of all, I'm going to change the title. It's going to be pricing cards. Then I'm going to link the CSS file. Also, we need to open the project to the browser using live server. Let's place the browser and the editor side by side. Like next, I'm going to visit phones CDN, because we're going to use some phonesome icons throughout this project. Let's copy the link from here. Then we need to open the link tag in the head element and paste the CDN. Besides that, I'm going to grab some Google phones. Let's visit the Google phones website and then search for Pound called Sophia Sons. Let's go ahead and select a couple of different styles, then copy the link and paste it in the head element. Okay, we're ready to start to write the HTML markup. I'm going to open De Tu, which is going to be the container inside the deep. I'm going to create pricing cards, it's going to be the wrapper. Next we need pricing card itself in which we will have card type. It's going to be basic. Next I'm going to insure H one heading element with the class card price, it's going to be 14.90 $9 Next I'm going to insure H three heading element with the class name month. It's going to be month. Next we need here at in which I'm going to insert a couple of list items. I'm going to insert here, follow some icon, it's going to be a solid A check. Next I'm going to insert your panel. It's going to be some dummy text. Let's duplicate the item a couple of times. I'm going to change the class name for the phonosomeicon for three items, I'm in the last three items. Next I'm going to insure button. It's going to be card PTN. Also we need here type which is going to be button. I'm going to insure the text by now. Besides that, we need your card bottom with the text. Join us. Okay. So that's it about the card. I'm going to duplicate it twice because we're going to have three different cards. Let's duplicate it and then make some changes. The second one is going to be standard, and the price will be different, 24.99 I'm going to change the phonemic. Next we will have premium with different price for 9.99 Again, I'm going to change the phonics we need here, checks instead of x mark. Actually, all three cards are created. I'm in the HD markup and now we can start to write the CSS. Let's go ahead and select every element. As usual, I'm going to set the margin and padding to zero. Next, I'm going to define the box sizing. It's going to be border box also we need her phone family. Let's set it to Sophia San San Serif. Next, I'm going to set the phone size of the HTML element to 62.5% because we're going to use as a measurement unit. In this case, one m will be equal to ten pixels. Next, I'm going to start to customize the container. Let's set its width to 100% Then the height is going to be 100 viewport height. Next, I'm going to change the background. Let's use linear gradient. The direction is going to be two left. Then we need here the first color, it's going to be 1d33 58. Then the next color is going to be 14278. Also we need here third color, which is going to be Oe138. Actually we need to change here two. As you can see, we have here nice and cool background with grade infects. Next I'm going to set Display Reflex, because we're going to center the content using justified content center and a line items center. As you can see, the content is placed in the center. Next, I'm going to take care of the wrapper. I'm in the pricing cards. Let's set to 80% Then we need Flexbooks. Let's set justify content to space evenly. As you can see, the cards are aligned nicely. Next I'm going to select card itself. Let's set with 230 Ram. Then the height is going to be 50 Ram. Let's change background. I'm going to use linear gradient. The direction is going to be two, right? And the first color is going to be 1254. Then the next color will be F139. Here we have the backgrounds of the cards. Next I'm going to set border radius to 1.5 Ram, then a Ram, then 1.5 Ram, and again 1.5 Ram. After that I'm going to set box shadow with the values 01 Ram, six Ram, and the color is going to be R to be a black color with the opacity 0.4 Here we have the shadow. After that, I'm going to use flex books. Let's set the direction to column next. We need justify content with value space evenly. As for the line items, I'm going to set it to center. Then let's set courser to pointer. As you can see, the elements are aligned inside the card. Let's go ahead and start with the card type I'm going to set with 222 Ram. Then the height is going to be four Ram. Also we need here background color. It's going to be CCC. Use this color just for temporary reasons. Next, I'm going to use transform rotate Z function with the value -90 degrees, the element is rotated. Let's set position to absolute. Then we need position relative for the parent element, which is the card. Let's set position to 12 Ram. As for the position, I'm going to set it to -13 Ram. As you can see, the element is aligned nicely. Next, let's set border radius to 2.5 Fram. Then we need 2.5 fram, 0.0 The element became rounded. Next, let's set font size to 2.2 Ram. Then the font weight is going to be bold. I'm going to increase space between the letters. Then let's use text transform make per case. After that I'm going to set color to white. Then we need flex box in order to center the text inside the element using justify con center and align items center. Now I'm going to set box shadow to the same values that we used for the card. Let's change the opacity. It's going to be 0.3 We have here the shadow effect. Next I'm going to duplicate card type change the class name is going to be card bottom. Also, we need to get rid of left property instead of top, we need bottom and the value is going to be minus four Ram. Next, I'm going to get rid of transform Rotate. Also we need to change the border radius. We need 00 and then those two values. The bottom part looks pretty nice. Next I'm going to select pricing card, followed by the chart selector. We need the first one. Then we need your card type card bottom. We need to change the background. I'm going to use linear gradient. The direction is going to be too, right. As for the colors, the first one will be f6od C, then we will have here F37. The first card looks pretty nice. Let's duplicate this code twice, change the selectors, the colors for the second card will be df3b, as the second color is going to be 6615d. Let's take care of the third card. The first caller is going to be Od9fc. Let's pull the second caller. I'm going to insert here, 174 FF. All right. So all three cards are customized. I mean those two elements. Next we need here card price. I'm going to set phone size to seven, then the phone weight is going to be 300. Next I'm going to select month. Let's set phone size to the Rams. We need your phone weight, 300. Next I'm going to set marching at the top. It's going to be minus four Ram. I'm going to move the element up. Next we need least item, let's set to 30. Then the height is going to be m. We need flex box. Let's set justify content to center. As for the airline items, it's going to be center as well so the items are aligned nicely. After that, I'm going to take care of the least item with child selector, we need odd items. Let's set background color two, RGBA 91233 and the Opacity 0.5 Next I'm going to select phons icon. Let's set to two Ram. Then we need Texiline's going to be center. Also I'm going to set phone size to 1.8 Ram. Next we need margin on the right side, let's set it to one Ram. After that, I'm going to take he of the span element, Let's set phone size to 1.4 Ram. Next we need text transform is going to be upper case. Next I'm going to select card with child selector first one, then we need card price. Let's duplicate it three times. We need here month as I'm going to use least. And finally we need here span element. We're going to change the color of the text with gradient effects. Let's set background to this value which we used for the first card. Besides that we need here web ke background clip. It's going to be text. Also, I'm going to use web key text field color and it's going to be transparent as you can see, the text for the first card looks pretty nice. Let's duplicate it twice. Change the chart selectors. We need second, then we need third. I'm going to grab the proper backgrounds for the second card, third card as well. So as you can see now the text of the cards look pretty nice. Next we need to take care of the buttons. Let's set with 212 gram, then the height is going to be three Ram. I'm going to set text transform to upper case. Next we need border radius, it's going to be three Ram. Next we need border none. I'm going to change the color and make it white. Next we need letter spacing. It's going to be 0.1 Ram. Then change courser point. Like the other elements, we need to change the backgrounds for the bosons separately. Let's grab background for the first, then duplicate this code twice, change the selectors, and also use the proper backgrounds for the second bottom and also third one. Actually, we have here tiny issue. We use the same backgrounds for the second and third cards. So let's go ahead and fix that problem. We need to grab the code instead of this one, and we have to do the same for the batons as well. Okay, now everything looks awesome. Now I'm going to create the fade effect. We have to hide the cards. Let's create Ess key frames with the name called Anim one at 0% I'm going to set transform to translate x -15 Ram. Also, we need opacity zero and visibility hidden. Then at 100% we need the same properties with the following values. Translate x will be zero, as for the opacity, it's going to be one. And then we need visibility visible. Let's select the first card and use those properties by default. And also we need animation with the values card one, which is the name of the key frames. Then we need duration. It's going to be 1 second, then delay time 1 second. Also we need linear and forwards. The first card works fine. Let's do the same for the rest of the cards. I'm going to duplicate this code twice, then change selector. Also, we need to translate x into translate Y. Then the name is going to be card two. We need here y instead of x. As for the third item, we translate x without minus, then the name is going to be card three. Again, get rid of minus. Actually we need here 15 Ram without minus. Now everything looks and works pretty fine. That's it, we're done with this project. Let's move on.