HTML, CSS, JavaScript - Build 6 Projects | George Lomidze | Skillshare

HTML, CSS, JavaScript - Build 6 Projects

George Lomidze, Developer / Designer / Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
54 Lessons (5h 53m)
    • 1. Promo

      1:30
    • 2. Introduction

      3:57
    • 3. Setup

      1:37
    • 4. Project - Invisible Card - Overview

      5:09
    • 5. Invisible Card - HTML Markup

      3:57
    • 6. Invisible Card - Style - Part 1

      7:34
    • 7. Invisible Card - Style - Part 2

      7:43
    • 8. Invisible Card - Style - Part 3

      7:59
    • 9. Invisible Card - Style - Part 4

      8:46
    • 10. Project - Sign Up Form - Overview

      2:26
    • 11. Sign Up Form - HTML Markup

      4:56
    • 12. Sign Up Form - Style - Part 1

      11:22
    • 13. Sign Up Form - Style - Part 2

      8:51
    • 14. Sign Up Form - Style - Part 3

      8:04
    • 15. Sign Up Form - Style - Part 4

      7:39
    • 16. Sign Up Form - Style - Part 5

      8:39
    • 17. Sign Up Form - Make Project Responsive

      11:01
    • 18. Project - Profile Cards - Overview

      2:56
    • 19. Profile Cards - HTML Markup

      5:43
    • 20. Profile Cards - Style - Part 1

      6:52
    • 21. Profile Cards - Style - Part 2

      8:05
    • 22. Profile Cards - Style - Part 3

      10:09
    • 23. Profile Cards - Typed Text

      7:13
    • 24. Profile Cards - Blinking Cursor

      6:02
    • 25. Profile Cards - Make Project Responsive

      8:17
    • 26. Project - Slideshow - Overview

      2:04
    • 27. Slideshow - HTML Markup

      3:44
    • 28. Slideshow - Style of Banner - Part 1

      7:40
    • 29. Slideshow - Style of Banner - Part 2

      6:11
    • 30. Slideshow - Style of Banner - Part 3

      5:00
    • 31. Slideshow - Create Slideshow - Part 1

      7:54
    • 32. Slideshow - Create Slideshow - Part 2

      10:32
    • 33. Slideshow - Make Project Responsive

      3:37
    • 34. Project - Hamburger Menu - Overview

      2:37
    • 35. Hamburger Menu - HTML Markup

      5:17
    • 36. Hamburger Menu - Style of Banner

      7:52
    • 37. Hamburger Menu - Create 3D Button

      9:43
    • 38. Hamburger Menu - Layout of Top Nav

      4:47
    • 39. Hamburger Menu - Create 3D Navigation Items

      7:58
    • 40. Hamburger Menu - Layout of Bottom Nav

      5:02
    • 41. Hamburger Menu - Prepare Social Media Icons

      5:31
    • 42. Hamburger Menu - Create 3D Effect with Social Icons

      9:00
    • 43. Hamburger Menu - Make Hamburger Menu Work

      7:49
    • 44. Hamburger Menu - Make Project Responsive - Part 1

      8:21
    • 45. Hamburger Menu - Make Project Responsive - Part 2

      6:01
    • 46. Project - Cube - Overview

      2:04
    • 47. Cube - HTML Markup

      4:14
    • 48. Cube - Style - Part 1

      6:43
    • 49. Cube - Style - Part 2

      7:45
    • 50. Cube - Style - Part 3

      4:56
    • 51. Cube - Style of Controls

      7:56
    • 52. Cube - Add JavaScript to the Project - Part 1

      7:25
    • 53. Cube - Add JavaScript to the Project - Part 2

      4:57
    • 54. Cube - Add JavaScript to the Project - Part 3

      13:27

About This Class

"HTML, CSS, JavaScript Course - Build 6 Creative Projects".

If you want to get your hands dirty in three core technologies - HTML, CSS and JavaScript, then this is the right course for you. You will be able to build 6 modern, beautiful and creative projects. Learn how to create cool CSS animations and awesome 3D effects.

INCLUDED:

Project 1 - Invisible Card

In this project, you will build a nice profile card. You will be able to learn how to manipulate backgrounds and create some cool effects. The project will be built based on HTML and CSS

Project 2 - Sign Up Form

The second project will represent a modern-looking and beautiful sign-up form. The project will consist of two parts. The first part will be a nice banner with little CSS animation and using the banner button you will be navigated to the sign-up form. The project will be created using HTML, CSS, and JavaScript

Project 3 - Profile Cards

In this project, you will build three beautiful profile cards with some cool animations. Besides cards, we will have a heading with typing text animation. It will be created using JavaScript. Also, we will use CSS keyframes to create a nice animated button with a hover effect.

Project 4 - Slideshow

The fourth project is going to be a slideshow. It will consist of two parts. We will have a banner with a header and a 3D button. Banner elements will have some nice and beautiful animations. By clicking the button, we will move on to slideshow. The slideshow will be created using pure CSS. Each slide will represent the famous cities of the world. The project will be based on HTML, CSS, and JavaScript.

Project 5 - Hamburger Menu

In this project, you will be able to learn how to create Hamburger Menu. The project will consist of two parts. The first part is going to be banner, in which you will be able to build a 3D button with a hover effect. By clicking on the Hamburger menu icon, we will be navigated to the second part of the project. It will be Navbar with two different Navigations. In this project, you will learn about how to create really modern and nice 3D effects. The project will be built based on HTML, CSS, and JavaScript

Project 6 - Cube

The sixth project will be the most interesting and advanced one. We will create slideshow represented by a 3D cube. The project will be based on HTML, CSS, and JavaScript. We are going to use really advanced stuff from CSS and relatively lots of JavaScript. After building this project you will be capable to create modern, advanced and beautiful projects on your own.

Get fast and friendly support from instructors 24/7.

JOIN US!!!

Transcripts

1. Promo: 2. Introduction : If you want to get your hands dirty in three core technologies off front and Web development, then this is the right course for you. Welcome to HTML. CSS and Jarvis, of course. Build six creating projects. Hi, I'm George and this is Russia. We are the creators and designers off. This course course consists of six different projects will start from kind of simple one and step by. Step through a bridge to the advanced level. First project is going to be invisible car, in which we will have full screen background and we will manipulate on the background using over effect on hover, part of background will be highlighted and hidden profile card will be this black nice. Next, we will create a project called Sign Up for It's Bill consists of two parts. 1st 1 is going to be banner with several elements. We will have animated arrow, and when we click on battle, we will be navigated to sign up for so you will learn about how to create Beautiful Sign up for this project will use CSS animations and a little bit above. Java's third project will be profiled cards. As you see, we have here heading and three cards. If we reload the page, then heading will be type. And also cars will be displayed in sickness on hover, size of cardinal increased and we will have any major. But so in the project we're going to use lots of CSS animations. And also we'll learn about how to create typing text animation using jobs. Next project is going to be slight show it still consists of two parts. 1st 1 is banner with having and bottom. When we reload. The page heading is displaying with nice animation and also button acts like three d also hover. It has cool shining effect. When we click button, we move onto slideshow who will have here several slides and they will represent some famous cities of the world. Slideshow will be created using pure CSS. But besides that, we we knew something jobless. Well after that comes project called hamburger menu. It consists of two parts way have here banner with three D parts in in the centre which power has villainized that you quickly Manu I come it will be transformed into X and we will be navigated to second part of project, which is not now for a split in two parts. We have talked enough and brought something up. Each of them has its own background image, and then click. They create one full screen background image effect. If we hover on items of both enough's, then we will have really nice and beautiful three D effects After Hamburger menu, we will move on to the most interesting. And actually, the most advanced project will create slide show using three D Cube on the left and right sides of Cube Way have controls, which closes to play slideshow. But besides that, it's running automatically as well. Down below, we have Button, which Alosi to play or posts like in this project will use lots of advanced stuff from CSS and also rule news. Lots of JavaScript elective look to other projects. All right, that's all about our projects. Besides, moving them will make them responsible. Different screen sizes using CSS media currents so you will get some experience in responsive Web design as well. All right, you for having travel and questions. Do you drink watching lectures that if you're free, reach out and post your questions in Q A. Section we will neglect to help. Okay, so we're ready to go. Let's get started 3. Setup: all right. Before we actually start creating our first project, I'm going to set up some necessary tools which are modern, with browser and tax Editor throughout, this course will be using Google Chrome. It's one of the best Web browsers, and I strongly recommend to use it. We're going to use some off the relatively new properties from CSS, which might not have support in other. We're brothers, so I think you go. Chrome will be the best choice. I'm sure you already have insult this browser, but if not, you can visit this URL that download and install it. It's going to be really simple. Process. All right, that's all about Web browser. As for text editor, I'm going to use V s code for now. I think it's one of the best tax advisers. It's free, easy to install and use, and it's really flexible and convenient. Editor. I recommend you to use BS code, but of course you can feel free and use your favorite one in order to get the escort unit visit website called code dot visual studio dot com, then downloaded for Windows or Mac or for Lennox and install it in a very simple way. All right, That's all about what we need throughout this project. Last thing that I want to refer to is source files. Actually, you're able to download starting and also final source files for each project which will be attached to project preview lectures. All right, that's it. See you in the next video. 4. Project - Invisible Card - Overview: Hi and welcome to over first project. It's called Invisible Card. This project will be built using pure HTML and CSS. And using those technologies, he will learn about how to create some nice effects in this video. We're going to have a preview off project and we will get ready to start building it. As you see we have here forthcoming background represented by image. If we hover in the center, then a small part of image will be highlighted and nice profile CART will be displayed from top to bottom. So this is over first project, and actually it will be a relatively simple one. But this by this you will learn about some tricks and techniques in CSS. All right, let's go ahead and set up some tools we have here on desktop, a folder called Invisible Car, in which we have another folder called Images. We have here two images which will be used in the project. Let's open obvious code and drop that folder in it than create html file. Call it index dot html and then create another one for CSS. Name it as style built CSS in index dot html file. I'm going to create basic structure off HTML document and also will grab some links for fun . US. Michael's and Fork Eagle Falls in order to create basic aged infrastructure. Let's use Amit. We need to place exclamation mark, then press top and here we go. All right, First of all, let's change title right here. Invisible cart, then create link for styled of ceases file. In a reference, attributes indicate pass off file this guy's We just need to its name because it's not placed in another folder. All right now, I'm going to pass your link for for awesome icons. For that, let's go and visit website called phone awesome dot com. So here it is. In order to get city and link unity, click how to use and then you need to copy that link. Let's pace it inside had eloped. Actually, from awesome is a great source. Ellos is to use different types of icons. If you click on icons, you will find lots off various I can see here in order to use them unit to the following. For example, let's search for Facebook icons here. We have different types of them. Let's choose 1st 1 so you can find here, I element with its classes. If you click here that this element will be copied and you will be able to use it on your webpage throughout, the projects will use multiple phone awesome icons. All right, that's all about fun. Awesome. Next, I want to get some Google phones. Let's type here Google phones and go to first Link. So here, confined lots off different phones, you can choose any off them. In our project, we will use two different phones. 1st 1 is just laughing, sons. So here it is. Let's click on Plus sign here. We have a link for that won't and also down below. You see phone family property. With its value, you're able to customize phones. I mean, you can choose your different types like italic light, bold and so on. Let's select some off them. Besides, Josefin sons were going to use another phone called Source Code Pro. Let's select it. So when you want to use multiple phones, you can select them and then you're able to use that link, which will include all selected faults. All right, let's grab it and pasted inside had out before we finish this lecture. Let's launch in except a stream of filing browser with Life Preview. And also I'm going to place aglitter and browser side by side in order to build Project in more convenient way. If you're using small screen than will be better if you maximize your editorial browser because on small screen size will be hard to use, both of them simultaneously. All right, that's it. We're ready to go. Let's start building our first project in the next last year. 5. Invisible Card - HTML Markup: all right, so now we are ready to start creating our very first project, Invisible Car. First of all, in this lecture, I'm going to create HTML markup. Actually, we will have one container in which then we will insert our car. So let's open development with class name container, then inside it open another development, which will be rapper for our car. Let's assign to it class card rapper And now let's start creating card itself. Insert here another development with class card so card will consist of image heading. Then we'll have paragraph social media. I consent. But so let's insert image element in images folder. We have image called John Doe. I felt J. P. G. And also, let's assign to it class card. I am Jean. Next we need H one heading element with class name card heading and with text John Doe. Then, after having let's create Paragraph which will have class card paragraph, I'm going to insert your some dummy text and actually, I want to wrap this text by quotes for that I'm going to use for awesome icons. So at the beginning off text, let's insert I element and assigned to it close F A s f A quote left, then copy, Eat paced at the end of text and change. Classmate, we need to your right instead of left. All right. Next. As we said, we need several social media icons. They will be represented as a least. So let's open you element and assigned to it class card icons that insert in it. Ally elements. We don't need here a class name for it because I'm not going to use it in CSS. So inside Ally Elements open a link with class card I can link. And now let's insert here fun. Awesome. Aiken. 1st 1 is going to be for Facebook, so it's a scientific classes as a B that's a Facebook square and also for styling at your another class card. Like all right, we need four icons. So let's duplicate Ally Element three times and change classes for 2nd 1 we need linked in . Then next one will be for Twitter, right Twitter and for the last one, we need needs to grow. Lastly, we need button. So after you element, let's open button with class carp et en and insert here, Text, view, profile. All right, that's it about each team of mark up. Everything is a ready to start stalling and let's do it in the next lecture. 6. Invisible Card - Style - Part 1: Okay, So in the last lecture, we prepared html markup for our project. And as we said, it's time to start styling it. Let's open CSS file, which is empty for now. First thing that I want to do is to get rid off, marching and parting for all elements. In order to select every element in CSS, we have special selector as to risk, so it means that we have selected all elements which are created and which will be created . All right, As we said, let's get rid off margin and potting. Set them as zero, then select container. At first. Let's set phone family use your Google phones called Josephine Sounds and then right San Serif, then define height as 100 VH. When you use Vieux Port height measurement unit, it means that you define how many percent off you ports you won't hide to be. So in this case, we used 100 pH, and it means that height of container will be 100% off Vieux Port. Let's go ahead and define with I'm going to use your view, but with measurement unit, which actually does the same job as Hubert Height. But it measures with according to viewpoint with. So it's right here. 100 viewpoint with And lastly, I'm going to use image as a background of container So right background and define you, Earl Off image in Images folder. We have image called dg dot jp G that in order to avoid repeating, let's insert here value off background repeat property. No repeat. Next. I want to take care of position of image. Actually, I'm going to perfectly center it. And for that let's insert year Value Center, which belongs to background position property. Actually, here we used shortened way. But as you know, you're able to define those values separate. All right, Last thing regarding background is to add linear Grady int. I'm going to make background a little bit darker. So before you, Earl, that's insert linear radiant that inside it used are to be a values, actually are to be a ellos us define capacity off color. In this case, I'm going to use black color For that. I'm going to Easter hear arguments as 000 and the opacity 0.5 that copy Eat and paste as a second call. All right, that's it. Regarding container. Now it's empty move on and style card. Actually, before we do that, I'm going to hide those elements for a while and give some stuffs to card a rapper in order to hide car. Let's select it and assigned to to display not so is this. See? Elements are heat him. And now let's go ahead and select card Rapper. First of all, I want to define height and wait for it. Let's make height 600 pixels and with as 450 pieces and, you know, just make rapper visible. Let's create border. Make its with as one pixel than solid and as a call the right F f f All right. Next thing that I want to do is to center card rapper perfectly. In order to do that, I'm going to use position. Absolute. As you know, in this case, Element jumps out from normal flow off page and using top left, right and bottom properties, you can place it wherever you want. Actually, in CSS, there is a nice treat to center element perfectly. For that, we have to define top and left positions as 50%. So in this case, top left corner off car dropper is centered perfectly, but actually it's not what we want. We need to center rapper itself, and for that we have to use transform with translate translator closest to move elements according to horizontal and vertical directions. I mean, according to accent, Why access? So in this case, we need to move Rapper by minus 50% for both directions from its current position. So that's insert your arguments as minus 50% and again minus 50%. So as you see, no carb dropper is perfectly center inside container. All right. Next, we need to define background for rapper. As you remember from Project Preview. The main effective and nice thing regarding this project is that we have, in fact, using to background images. So in case of Contra rapper, we need the exact same background which we use for a container. So let's copy from Container and pasty for cars. Robert at a glance Nothing has changed here, but in fact we have background for container and for rapper separately in order to see it. Let's comment, background for container out. So this is what I'm talking about. If we get rid off border, then it will seem that we have here just one image. All right. Before I finish this fracture, I'm going to create over effect when we hover. Car the rapper. I want to add to it Shadow effect. So let's select Card the rapper, then at hover and assigned to you box shadow with values 00 than 30 pixels and as a color right f f f so as the sea when we most over rapper then we have shadow, but it's not looking nice in order to make effect smoother. Let's use transition with values, books shadow and one second, which is to Russia. So is the see. Now it looks much better. Actually, I want to make corners of rapper little bit rounded for that. Let's use for the radius with value five pieces. All right, I think for now it's enough. Let's stop here and continue styling this project in the next lecture 7. Invisible Card - Style - Part 2: All right, let's go on and style our project. Now it's time to move on and work on card itself at this time. As you see, it's heating using display None. So let's get rid of it, then define height and width as 100%. Then I want to change background color and make it a white for a while because I want to make elements visible inside it. So let's define background color as f f f like carts. Parent elements I want to assign to it bore the radius where the same value. So you can write here either five pixels or you can just use value called Inherit it. Yellows is to inherit value from parent elements. And actually, it's a better way because if you need to change value for parent element that it will be automatically changed for child element as well. All right. Next, we want to take a year off layout of elements placed inside card. For that, I'm going to use CSS Flex books, which is really great and powerful one dimensional layout. More do so. Let's make art as a flex container using display flex as you see elements are placed horizontally in a row because by default, flex direction is said as a rope. We need to place them vertically, and for that we have to make flex direction as a call. Right now, I want to send through elements horizontally for that. In general, we use justify content. But now, because of that, we changed flex direction from row into column. We need to use a line, items with values center and, you know, to to make some space between elements. Let's use justify content with space between so far. No spaces not quite visible because image takes up large space. But we will take care of it in a second. Let's select image element with class name card I N G. First of all, let's define with and height as 200 pixels. I want to make image as a circle. For that, we need to use border radius with value 50%. Sometimes when we define height for image manually, it's getting stretched and loses its quality. For example, it will make height off image as 400 pixels. That image will be thrashed and won't be looking good. In order to fix that in CSS we have property called object feet. We should have value cover, so it's a seat now. Problem is self. In our case, we didn't have this problem because image had shape of square. But in case of different image size, I mean, when you use your own image and it doesn't have shape of square, then you would have this problem. But you already know how to fix that. You just need to use object feet with value cover. All right, let's get back here. 200 pixels. Next, I'm going to place the image little bit down. Let's do it using margin. Top with value of 15 pixels before we go on styling image. I want to change background of card instead of white color. I'm going to use linear radiant. Let's insert you two different colors. 1st 1 is going to be green color, and I want to use you are to be a value that's the answer to your 21. Then 199 and right. 30 and capacity 0.8. And for 2nd 1 let's insert red color right, 233 then 67 then again 67 and capacity 0.8. All right, so it all really looks nice, But actually that's not what we want. We don't need here. Smooth transition. I want top part off car to be green and bottom one to be read. For that, we have to adhere some additional values. If we insert you, 30% than half off card will be green and after 50% who will have radiant off green and red colors. So they will be mixed up after half off car in order to make second part of card or red without color mixing, we need to add to it value from 0 to 50%. That's right, you zero and you see that second part became red. All right. Last thing regarding background is to change degree off transition by default. It's 180 degrees. If we're right here, that value, then nothing will be changed. But who, Right, let's say, 90 degrees. Then transition will go from left to right. In this case, I'm going to use 190 degrees, which will create this nice effect. All right, that's it about background of card rapper. Let's go back to card image. I'm going to create border for it. Right? Border with values two pixels solid and with color light and also create some potting right parting 10 peaks of As you see we have gap between border and image, and I think it looks good. The last thing regarding image is to create shadow effect. Let's use your books shadow. Actually, we already used it in previous lecture, and now I want to remind you how its values work. 1st 1 defines horizontal. I mean X direction, right? Let's say 20 pixels. Second value is for vertical y direction. That's right. Your 30 pixels and third value shows how blurry want shadow to be. Let's use here 50 pixels and lastly, we need collar off shadow. I'm going to use our to be a value right black color 000 and opacity 0.5. So that's the way how those values work. Actually, we can use your negative values which closes to change directions. I mean, by default we have shadow going to the right side. But if we change first value and right minus 20 pixels, then we will have shadow going to the left site. Same happens if we use negative value for 2nd 1 All right, In our case, I want to make 1st 2 values as zeros. As for 31 let's leave here. 50 weeks is in this case, Shadow will be distributed equally on all sides. All right, so with car image, we're done. It's time to move on and start styling rest of the elements. Let's do it in the next election. 8. Invisible Card - Style - Part 3: All right, So in the last lecture we started styling card. We finished working on image and it's Santa Move on and start to style arrest of the owns. Next one is going to be heading. It has class name carved heading, so let's go ahead and selected. First of all, I want to change phone family. Let's use your source code pro moral space that decrease phone size. Make it 25 pixels. Change won't wait. Make it a little bit lighter. Use your value of 300. Next, I want to transform tax into uppercase. For that, we have to use text transport uppercase after that change color of text. Make it white and I think will be better if we increase space between letters. For that, we have to use letter. Spacing with a value of three peaks is all right now. I'm going to change background of heading. I'm going to use your again linear Grady int. I want to use just two different green collars without any additional effects like we did it previously. As I first called out, let's insert zero a 9751 As for 2nd 1 right 06 831 feet. As you know, heading is a block level elements, but now it looks as in line one. I mean, it doesn't take up full with available in its parent, Allen. That happens because off flex books particularly align items center. All right, let's increase with off heading, make it 70% as the sea text is placed on the left side. So let's center it right. Text align center and makes imparting on top and bottom right, patting five pixels on that zero. All right. Lastly, in order to create some cool effect with heading, I want to use transform property with several values. 1st 1 is going to be skew acts. It's cues an element horizontally. I mean, according to X direction in this guys, we want to skew element on the right side. For that, we need negative value sellers instant year minus 20 degrees. Next, let's use rotate white it yellows, the still rotate element vertically according to white access. Let's insert here 40 degrees. So as you see, it seems that with off element is decreased, but in fact, element is just rotated in order to see better. I mean to create three D space. We need to use perspective. It allows us to create a three D environment for element in this case. That's right. Here. 1000 pixels. Remember that we should pass perspective as a first value for transform. Otherwise it won't work and value itself. I mean, 1000 pixels defines how far the element is away from the user. If we use your lower value, for example, 200 pixels, then element will be much closer to use them. So that's the way how perspective works. I hope it makes sense to you. Let's live here 1000 pixels throughout projects. We will use perspective several times because it's really great tool to create nice effects . All right, so what hiding? We're done. Let's move on to paragraph selective using class name card paragraph. Let's change its phone size. Make it 18 pixels, then change color. Use your call or D d D. Also, I want to decrease with a paragraph. Let's make it 85% and lastly, exchanged text alignment. I'm going to use your tax align with the value justify all right for now, with paragraph were done. Let's move on and work on those quotes. Select them using card paragraph, then right? I at first I want to change color, make it white than increase phone size, right, 25 pixels and then change phone style right here. Phone style metallic. All right. Next thing that I want to do is to change slightly positions off quotes because they are not aligned quite nicely. As you see, we have here space on the last line. So in order to position quotes nicely, that's use position. Absolute. And also, when you want to manage position off element according to its parent, then we need to define power elements position as relatives. In this case, parent element of those quotes is paragraph. So we need to assign treat position relative all right before we defined positions for quotes. Individually, I want to create some space before first word off paragraph. In order to do that, we need to use pseudo element called first letter. So at first, select paragraph, then place two columns. We need to columns for Souter elements. As for Souter classes, we need only one cover and now use first letter. So now we have selected first letter off paragraph in order to create some space on the left side. Right margin left 40 pixels. All right now select First I elements inside paragraph at first, right card paragraph. If we want to select Onley first. I elements we can use suit a class called First Child. But before that, we need to access on I element then, right for his child. I want to move it a little bit up. So let's define top position and assigned to negative value. Let's say minus 10%. Then select second I elements right again cart paragraph that I in this case you know that to select Onley Second I element let's use another suitor class called last Child. I want to move second I elemental It'll be down so right bottom with value minus 10% and then create little space on the left side using margin left with the value 10 pixels. All right, so with paragraph, we're done, it looks nice. Next we have to sell social media icons button and also we need to create little effect. I mean, by default, we need to hide card and display it on hover. Let's do it all of those things in the next election 9. Invisible Card - Style - Part 4: Okay, so the most part off our first project is already created. We just notice style Social media icons button and create nice effect. I mean, hide card and display a Don't hover. Let's go ahead and start styling. Social media icons select You'll Element, which has class name card icons. At first I want to get rid off default bullets. For that we can assign to you element property leased style with value None that I'm going to place icons horizontally in a row. For that, we can simply use flex books. Let's write, display flex. Then, in order to separate those items, I'm going to define with as 50% and also justify content with values space around. All right with you element, we are done. Let's move on and select Link Element, which wraps Aiken. It has class name card, Eichel link. First of all, let's get tweet off the fault styles using tax decoration, None then defined within height for both off them. We need value s 35 pixels. After that, I want to create border with values one pixel solid and the call the light. So as you know, Link is an in line elements, and that's why, with and height and not applied to it. In order to fix that, you can make link block level up using this plight with Value block. Now they look better. But as you see, icons ended up on top left corners. We need to center them, and I think the best way to do that is to use again flex books. So instead of display block right display, flex that in order to center icons horizontally and vertically. Let's use justify confident center and a line items center and lastly, creates a border radius right, five pixels. All right, that's it about link elements. Let's move on and style icons. So like them using class caught Aiken at first, increased bone size. Make it 20 pixels and then change color. I want to use your white color. All right. The only thing regarding icons is to create little hover effect on hover. I'm going to change color off border and also color off. I can itself so at first, select blink element that at hover, let's copy border property and change color. I'm going to use your color. One. B five c F. Five. Next. I'm going to change color off Carl Ichan, and we need to do it when we hover on link. So select again cart I can link with Hover now that select card Aiken. Let's change color. I'm going to use a gang called R one b, five c F. Five and lastly, let's add transitions to both Lincoln Aiken for a link. We need border with duration 0.3 seconds and for Aiken, we need transition color with the same duration 0.3 seconds. All right, that's it about social media icons. They are ready. Next, we have to move on to button, but selected using class car BTM. First of all, I want to get rid of some default styles like border. What's assigned to eat none and outline assigned to eat. Same value. Not actually a line creates blue border when we click on a button so we don't need that. Next. Let's define width and height right with with the value 1 50 pixels and height as 35 pixels , that, in order to create some space at the bottom, use marching bottom with value 20 pieces. Besides that, I want to make corners off bottle rounded using border radius that's assigned to eat 50 pixels, then change background have gone to use again. Linear, radiant with two colors. 1st 1 is going to be 6837 Hey, as for second color, right zero the to be seven feet After that, let's change color. You see your DDT next. I want to transform text. That's making up a case. Also, I think will be better if we decrease full size of tax. Let's make it 12 pixels, the venue noted to make but nicer. Let's create some shadow effect as a first value right zero that 10 pixels than 20 pixels and as a call or write are to be eight 000 opacity 0.5. And lastly, let's change type. Of course, sir. I'm going to make it point it. All right, card is ready. We are almost done. The only thing that we have to do is to create a little effect. I'm going to hide card by default. And for that I want to use position Absolute. I'm going to move card up, actually outside of its wrapper. For that, we need to define top position as minus 100% so is the C card is placed up, but it's still visible. He noticed you hide it. Weaken. Simply assigned to card Rapper Overflow with a value heated So you see that car is no longer visible Now we need to display it, going from top to bottom when we hover. Card Rapper. So let's select it with holler. That's select card itself and define top position as zero actual without transition. The fact looks ugly when a transition with some delay. So let's assign to card transition right top as a duration right 0.3 seconds. So when first transition ends, I mean transition off box shadow, which we use for card rapper. Then after 1/2 2nd I won't car to certain moving down so as a value off delight, right 1.5 seconds. So if we hover, then card will be displayed nicely. All right, that's it. We have finished our first project, Invisible Car. I hope that you enjoyed it was interesting and learned some tricks and techniques in CSS. Okay, it's time to move on to our second project, which is going to be signed up for, so let's go ahead 10. Project - Sign Up Form - Overview: hi and welcome to our second project and this project we're going to build modern and nice looking sign of folk. Actually, our project will consist of two main parts. 1st 1 which you see on the screen is banner we have here heading animated arrow and bottom . This animation will be created using pure CSS and also as a background we have here full screen image. If we click button than Bannon will be heating and sign up form will be displayed with nice fate Effect. As you can see, it consists of two parts on the left side. We have inputs modern and beautiful checkbooks different from developed one and also don't below we have. But on the right side there was heather with image, background and other bottom right corner. We have X closing, but so if we click it, then for will be heating and we'll get back to ban it. Actually, project will be built using HTML, CSS and JavaScript. Besides that, this project, I mean both parts is full of responsive on different screen sizes. If we inspect the page and check it, you will find that it's responsive. All right, so in desktop I have created new father called Sign Up for Let's open it. We have here folder called Images, in which we store to images for backgrounds. And also I have created three files index of html style CSS on Abdullah. Yes. Okay, let's open V is coat and drop that faltering it in index dot html file. We have here basic aged infrastructure in had element. I have inserted several links for faultless microns for Google phones and for our season spot. Also, I have here link for JavaScript file CSS and JavaScript files are empty at this time. Okay, so we're ready to start building this project. You can download source files which are attached to this lecture and use them, so let's get started. 11. Sign Up Form - HTML Markup: all right, so we have prepared everything to start building our second project. Sign up for here. Have basic structure off html document as they already so in previous lecture. This project consists of two different parts. First part is going to be banner. It will consist of Heather, Animated Arrow and Button. As for 2nd 1 we will have nice sign up for in this project. We're going to use HTML CSS on a little bit off JavaScript. So in this video, I'm going to prepare HTML markup. Let's go ahead and open development, which will be a container off mentioned two parts. So it's a scientific class name container. Inside it, we will have to developments. I mean wrappers for each part that's open 1st 1 assigned to class banner. As we said in it, we will have having a row and button. So let's open H one heading Element assigned to it class band or hiding and insert text, but site subscribe here. Next, let's open developments. It will be a wrapper for a row, and actually a row itself will be represented by phone. Also, Michael. So let's assigned to development class Aargh and stand inside it open. I elements with following classes, right? F A s at a a row. Don't all right. The last member off banner should be bottled, so it's open button elements assigned to close Banner Bt and and insert text. Click. No. All right, that's it about banner. Let's go ahead and create second part open development and assigned to it class Name for Container So first member off this part will be four elements. Let's open it with class signed up for. Actually, this element will consist off several a putz labels, and also we will have butter. So let's go ahead and create a put elements, which will have class name four people. And also I'm going to use your placeholder attributes with text full name, which I'm going to write in Upper case. We need similar April for email address as well, so let's duplicate it. That changed type right email and also as a value off placeholder attribute. Right, email address. All right. Next, I'm going to create paragraph with text, got news, and then after that, I'm going to insert checkbooks, which will be surrounded by to label elements. Let's open 1st 1 and insert your tax? No, that duplicate it and instead of no right, yes, then between those labels create people with type checkbooks. All right, last element inside for will be bottom. Let's assign to it type attributes with value butter and also in its a text sign up here. All right, that's it about form elements. After that, we need another thief with class name Heather. And inside that development, let's create H one heading and insert text. Welcome to code and create. All right. The last element that we have to create will be X button, which will be used for closing for So after Heather opened development with Class XP tiene and as a content, I mean in order to create X let's insert year HTML entity right and percent that pound sign one 0005 All right, that's it about HTML markup. Everything is ready to start styling those elements, so let's move on and do it in the next election 12. Sign Up Form - Style - Part 1: all right. So in previous lecture, we created HTML markup prepared everything to start styling. Our second project, as you know it, consists of two parts. 1st 1 is banner. So in this lecture and going to start styling it, first of all, I want to get reductive fault, marginal parting for every element and in order to select all the elements as I remember when to use asterisk. So let's set marginal parting as zero. All right. First thing that I want to do is to hide second part of our project for a while. I mean phone container for that. Let's select it using class name for container and assigned to eat display. Not all right. Next, I'm going to set image as a full screen background for container, so let's select it. First of all, let's define wits and height of container as a with right 100%. As for height, I want to set it as 100% off you put. It's the right 100 pH. Then right background in you are Oh, let's indicate part off image. We have images folder and then select image called beauty. One thought Jay pack then defined position off background as center and also right. No repeat in order to be background image covered. Let's use property called background size with value cover and lasting. Regarding background is to use linear Grady int. I'm going to insult here. Black color. So right are to be a with values 000 0.8 and then again are to be a 000 No opacity 0.7. All right, that's it about background. Let's move on and start styling banner for its fall. I'm going to take care of its layout, so select banner as the C by default having an arrow are not visible, so it's changed their color. Make it white. I'm going to place banner in the center of page for that. First of all, let's define wits off it as 750 pixels. Actually, I'm going to center banner using techniques that you have already seen in Prius project. I mean centering elements using positions and transform property. So let's define position off banner as absolute. Then we need to set top and left properties as 50% and in order to perfectly center element when it transformed, translate with arguments minus 50% and again minus 50%. So actually, banner itself is perfectly centered at a glance. It's not quite visible, but if we inspect the page and check barrier, then you will see that it's perfectly sentence. All right, so next we need to take care off those elements inside banner we need to send to them as well. For that, I'm going to use flax books so that's assigned to banner display flex. No elements are placed in a row because off flex direction, the road. And in order to fix that, we need to set flex direction as a column, then, in order to center elements inside banner, let's use justify content with a value center and also a line items with the same value. All right, so it lay out, we are done. Banner is perfectly centered with its elements, and now it's empty cell each of those elements separately. Let's start from heading selected using class banner heading. At first, I'm going to change phone Family. Let's use here Roboto condensed San Sarif than increased phone size. Make it 80 pixels also transform text into uppercase, but then create some space at the bottom using margin, bottom eight pixels. And lastly, I'm going to create borders on top and bottom. So right border top with the values. Seven pixels solve it and white color that duplicated and just changed. Talking to bottom. All right, that's it about heading. Let's move on to a row. Selected using class Arrow. First of all, increase its phone size, make it 50 pixels and then creates in space at the bottom using margin bottle with value 30 pixels. All right, with arrow, we're almost done. We will create animation for it soon. Before that, let's style button selected right banner Bt and at first increase sweets, make it 200 pixels, then creates imparting on all four sides. Right potting 15 pixels. After that, I want to change from family, and actually, I'm going to use the same phone, which we use for heading. So let's grab it and pays it for but that increased phone size make it 17 pixels. Also, let's transform text into uppercase and create some space between letters using letter spacing with value one pixel. All right, so for button, I'm going to use transparent background. So writes background, transparent, then change color of text, make it white and also make but Elizabeth around it, using border radius with value 50 pixels. For now, Button has its default border. And actually, I want to change it by custom. One right border with values two pixels solid and with white color. All right, so we're almost done with battle. We just need to get rid off default outline, and also we need to change type. Of course, sir. Let's make it a point. It all right, so our bottom is style. It's ready before we move on and create animation for Arrow. I want to create little hover effect on hover. I'm going to move but a little bit up. So let's elect it with hover and thank you's transform. Translate why, with value minus one pixel and also when it transition with transform and with duration 0.3 seconds. All right, finally, we're done with button. Let's go ahead and create animation. In order to create animation in CSS, we need to use key frames using key frames. We can create special CSS rules with several steps, and we can apply them for elements using animation property. So let's right at sign that key frames that we need to define. Name off animation. Let's say any so we can define steps from 0% to 100%. Zero means start of animation and 100% is an end of animation. So on 0% I mean, when animation starts, we don't want to change position off Arrow. So right transform translate with Y direction and insert year zero that let's duplicate it . Next step is 20%. Actually, those steps are optional. It's not mandatory to write some specific personage. It depends on type of animation you want to create on 20%. We need same position, and after that, Arrow will start moving so on 40% it will change its position. Let's duplicate the game and change 20% into 40%. And instead of zero insert here mines 30 pixels. It means that arrow will move up by 30 pieces. Next step is 50% so from 40% to 50% Arrow will maintain its default position. Therefore, we need to place here. Zero next will be 60%. On that point, I want to move a role little bit up from its default position. So insert here minus 15 pixels, then on 80% and on 100%. We need default positions for Arrow. So for both of them, we need zero. All right, key friends is ready. And in order to apply it to elements we need to assign to arrow animation property with several values, 1st 1 is going to be name. Then we need to insert year duration right, three seconds. And lastly, in order to run animation infinitely, we need to eat 30 year, another value called infinite. All right. So as the sea aero is bouncing and actually we have finished our lecture banner is ready next minute to move on to for, so let's go ahead. 13. Sign Up Form - Style - Part 2: all right. So in the last lecture we finished working on first part of our project. I mean, Banner is ready, and now it's time to move on and start working on second part in order to do that. First of all, I'm going to hide banner for a while and display for container. So let's assigned to banner displayed none and gets Rudolph display none from for container . Next, I'm going to change background of container for a while, so let's comb it. Coward background out and that right background color. C C. 68 three c. All right, we're ready to go. First thing that I'm going to do is to place entire for container perfectly in the center, so let's define with make it 800 pixels, then height 600 pixels. In order to center. Elements were going to use the same technique, which we use for several times. Let's define position as absolute, then make top and left properties as 50% and use transform with translate instead, hear arguments minus 50%. Then again, minus 50%. All right, so far contained there is perfectly centered. And now I want to create some shadow effect. That's his books. Shadow as a first value right zero that 20 pixels, that 50 pixels and as a call, the right are to be a 000 and opacity point for So for container consists of two parts. 1st 1 is those. He puts labels in button, and I want to place it on the left side. As for harder, it will be positioned on the right side in order to do that one off. The best solutions is to use display flex so you see those parts are placed side by side. All right, let's go ahead and start starting. Signed up for select using class name. Sign up for I wanted to take up half off the entire container, so let's define weeds and make it 50%. Then change background color. I'm going to use your call or to 3 to 3 on 28 Also, I want to create some potting on top and bottom right 120 pixels. As for a left and right sides, right, 50 pieces. As the sea size of this element is increased, it takes up more than 50% off phone container. That happens because off the parting. And in order to fix that, we can use books sizing property with value Border box using this valley 0 50% with will be maintained and also size of element won't be changed. All right, now it's time to move on and style imports. They have common class for people, so let's select it. First of all, let's increase with and make it 300 pixels. Then change Fault family I'm going to use here phone called Ostwald event Right since Arif that increased fold size. Make it 18 peaks. Also create some space between letters using lecherous pacing right, one pixel. Then I'm going to change color off text. Let's use your color C C. 683 seat. So if we type something, then you will see that collar off text is changed. All right, Actually, I don't want these white background. Let's change it and make transparent. As you see, we have here default borders, I'm going to get rid of it and just create border at the bottom. So it first, let's remove default, border right, border none, and then create border bottom with values two pixels solid and the caller light all right, So step by step, our airports are getting nice. As you see, we need some space between them. Let's create using margin bottom 50 pieces when we focus on inputs. Stan, that blue border is appearing. Actually, it's a default outline, so let's get rid of it, right? Outline none, and lastly creates imparting on top and bottom, right, patting 10 pixels and zero. So it was already, and the last thing regarding them is to create little effect. When we focus on he puts. I mean, when we focus on them, I want to change color off border. So let's select for a put in order to change style on Focus in CSS, we have sued a class called Focus that use property called border bottom color and rights. Your color. C C 683 seats. So as a C call or is changing on focus? And now, in order to make affect nicer, let's use transition with value, border bottom color and with duration 0.8 seconds. All right, that's all about a putz. Next, I'm going to start paragraph, so let's select it right signed up for with that peak. First of all, let's change color of text Mega Dwight. Then I'm going to change phone family. And actually, I want to use same phone, which we use for inputs. Also, I want the same phone size for programs and same letter spacing. So let's go ahead and grab those properties from people styles and paste them for Parker. All right, so, partner, if he's looking better now, let's change phone. Wait and make it lighter by phone. Wait with Value 200 and lastly, make some space at the bottom. Use margin bottom with the value. Eight pixels. All right, that's all about paragraph. Mexico Want to move on and start styling labels? So let's select them using sign up full, then right label change color. Make it white as a phone family, I'm going to use again. Phoned, called also so let's copy. Eat and paste here, then decreased bone size. Make it 15 pixels. Also make text lighter by phone. Wait 200. Create some space between letters using letter spacing with a value one pixel and lastly transformed text into uppercase using tax transport. Uppercase. All right, so that's it for now. I'm going to make your little break. Let's continue styling for in the next lecture 14. Sign Up Form - Style - Part 3: All right, let's continue Starling, sign up for we stopped with labels. So after that, next thing that I want to do is to stall checkbooks. And actually, I want to make it working. Before we do that. Let's place button down below. I'm going to do that, just making it block level element. So let's select button right. Sign up for the button assigned to eat display block. And also, I think, would be better if we create some space at the top off button. Let's do it using marching top with the value. Eight pieces. All right, let's go ahead and select checkbooks, right? Sign up for that. A put actually in CSS were able to select elements using attributes for that. We have to place year square brackets then right inside it type and in quotes, answered checkbooks. All right. As remember from Project Review, we should have here different type of checkbooks, which is actually more modern and beautiful. First thing that I'm going to do is to hide that default checkbooks for that in CIA says we have property called appearance, which actually already has 90% supporting Modern with browsers at this time. But Despite this, let's use CSS vendor profits is for cable crow and for Mozilla Firefox. For Google Chrome, we need to write Web kit appearance. We know that to hide checkbooks. Let's a scientific value. Not so in this case. Check boxes hidden but it maintains is functionality. Let's duplicate this property twice on instead of grabbed it right, most for Mozilla Firefox and for less one. Let's just leave here appears all right in order to make element visible and then checkbooks. We need to define width and height that set with us 30 pixels. As for height, right, 15 pieces and also we need to set background color, Let's say as e so again we no longer have here to fall chat books, but its functionality is maintained. All right. Next, I'm going to get rid off default outline using outline none that make element a little bit rounded, using border radius with a value in 20 pixels and create some space on the left and right sides. Right, enlarging zero on top and bottom and eight pixels on left and right sides. Last thing regarding check boxes to create shadow, but in this case, I'm not going to use usual shadow, which we have been using so far. I want to create shadow inside checkbooks out. So that's right box shadow and as a first value right here in set. So remember that this value creates inner shadow effect. Next, we need to write regular values, right? 00 That 10 pixels and, as they call the right, are to be eight 0.4. All right, so with input for now, we're done. Next, I'm going to create little circle, which will be moving when we check checkbooks. I will create that circle using before Suydam, so we need to select again. Checkbooks. Let's copy selector from here that pace it and at before pseudo eloped. First of all, we need to define contents. Property. Let's livid, Empty, then said within height as 17 pixels and change background color. Let's use your call or a All right. So for now, suitor Element is not visible because we need to take a year off its position. I'm going to set its position as absolute. So you see no element is visible. Let's make it around it. Using border radius with the value 50% actually you see that element is not perfectly positioned. We need to move circle little bit up and also on the left side. For that, let's define top position assigned to eat minus one pixel and left with the value minus four pixels. As you can see, our circle ended up at the top left corner off form container. It happens because it has positioned absolute, and it's not working according to its parent elements position. So we need to define position off input element and set it as relatives. Now I see that problem is fixed and circle is placed where we wanted it to be placed. All right. Last thing regarding before sued element is to create little shadow. That's right, folks shadow with values 02 pixels, five pixels and call the RGB a 0.4. Okay, actually, checkbooks with its circle is ready there styled, and now it's time to make them working. So when we check, we need to change background color off checkbooks, and also I want to move circle on the right side. We need to define those styles when he put his checked, so I'm going to use pseudo class called checked At first, let's change background color. Select. Sign up for that, he put. We see the class checked and then in square brackets, right type checkbooks. Let's change background color. Use your CC six eggs we see. So when we click, then background is changing and actually to make here smooth change. Let's use transition, right background, color and duration 0.5 seconds. All right, so with background were done. Next, let's take care off. Moving circle. Let's copy that selector paste and at before pseudo element. In order to move circle on the right side, we need to define its left position with the value 18 pieces. So you see that when we click element is moving. But again, in order to make this effect nicer, we need to use transition with values left and 0.5 seconds. All right, so you can see that now check boxes working, and I hope you agree that it's really nice. And more than looking okay, I think for now it's enough. Next we have to start button and also second part of form container. I mean header and let's do it in the next lecture 15. Sign Up Form - Style - Part 4: Okay, So in previous lecture, we worked on checkbooks. We have transformed default checkbooks into modern and beautiful one, and SP said We have to move on and style bottle and second part off from container, which is header. We have all of the selected button element in the last lecture, so let's go ahead and add some more stars to it. First of all, increase its with make it 150 pixels, then creates imparting on top and bottom right eight pixels. As for left and right sides, use fight fixes. I'm going to get rid off default background color. Let's change it. Make transparent that change color of text. Let's use your white color. Also, I want to change default border by custom. One that's right here, two pixels solid with white color. Next, let's make button slightly rounded using border radius with the value of 50 pixels. And also I want to remove default outline right outline nut. All right, so as the sea. But is looking all of the good. I want to add here somewhere styles, you know, to make it better. Let's change phone family. In this case, I'm going to use phoned Roboto convinced then Sand Saref. That's increase phone size. Make it 15 pixels. Create some space between letters. Right letter spacing one pixel. Then make letters uppercase using text, transport, upper case. And lastly, changed type, of course, are making Pointer. All right, that's all about bottom. It's styled, and now we have to move on to Heather before we start styling Header. I want to move down X button. Actually, I'm going to place it after bottom, right corner off from container. So let's select it using class name XP tiene that made its position as absolute. So as we said, I need to place it after bottom right corner. So is defined bottom position and assigned to eat value minus 6% and then right, right position with the value. 1%. All right, By the way, before we go back to Heather, let's finish styling this battle. Increased phone size. Make it 23 pixels. Then Meg Eat Boulder using phone. Wait Both change color. Let's use here. Call Or 262626 and Leslie change. Coursey type as Pointer. All right, so X button is ready. Let's go back to Heather first of all, I'm going to define with off Heather as 50% because I wanted to take up half off entire form container. Then I like to use image as a background off header. So in the u. R L. Let's insert part of image right images folder and image called BG to dodge a pack. Then defined background position as centre. Also right. No repeat and then used back row size property. We devalue color all right. With background. We're almost done. I want just to add linear Grady int as a direction off cold transition. Let's use to top. But then right are to be a use here. Black Hollow right 000 with opacity point for As for second color, let's seize again Black Call or write RGB 8000 with capacity point to And lastly, let's add some shadow on the left side of header right books Shadow. Actually, when you want to create shadow going to the right side, then you have to insert negative value. Let's a minus 10 pixels as a second value right zero that 30 pixels and as I call the right RGB a 000 capacity 00.3. Okay, so Heather is ready. We have to move on. And style heading that's selected right had the H one. At first, let's take a year off its position that's assigned to it position absolute. And then, in order to manage its layout according to Parent Element, let's define for header position relative. So I want having to be placed little bit down from top edge of container, and also I'm going to sensory horizontally. For that. Let's define top position as 15%. And then, you know this is century again. Used left position and transform as a left position right, 50% and then transform. In this case, we need translate with X direction and insert argument minus 50%. All right, so is the sea heading is placed where we wanted to to be positioned. But tax itself is no center. Let's peaks that using just text the line center. All right, so with position of element, everything is done. Let's just add some more styles to it in order to look a little bit better. Change color. Make it a white that set phone family as possible. Son Sarif Increased phone size right 40 pixels, then make text uppercase and also create some space between letters. Write letter, spacing one pixel. All right that seats. We have finished styling form container. It's looking good, and I hope you like it. Now it's time to add some JavaScript to our project. Actually, using JavaScript will give some functionality to Banner Button and also to that closing X battle. In order to do that, let's move on to the next video. 16. Sign Up Form - Style - Part 5: Okay, So once we're done with styling both parts of our project, it's time to add some JavaScript and give some functionality two buttons. So by default I'm going to hide form container. And when we click on bottom in banner, then banner will be heating and from container will be displayed with little faith. In fact, also, when we click X closing button for will be hidden and banner will be displayed back. All right, that's all what we're going to do. And again, we will do it using JavaScript. First of all, I'm going to change some styles and CSS. Let's get back here. Background and delete. 2nd 1 that removed display none from Banner. And also, we know that to hide phone container, I'm going to use capacity zero and visibility hidden. Actually, we're able to use you just display none. But those two properties will hello us to create fate of fact because we can use transition with capacity. But we can't do that with display property. All right, let's go to Abdel Js file. We will use some basic JavaScript. Actually, it's going to be document object model. So, as you know, if we want to create event. First of all, we need to select needed element and then add to it Event listener in order to access on HTML documents in dump We had object called document and then we need to use selector in this guy's let's use query, selector and inside parenthesis minute to indicate which element we're going to select. Actually, we can insert Yuk last names or I d or even tug name in this guy's let's past class off banner bottom inside quotes. We need to place dots and class name banner DTN. All right, so we have selected Element and now let's add to it. Event listener. Actually, this method takes three arguments, but to off them is mandatory. I mean event type and function, which will be called when that even will be a cured. So, as we said, we need quick events on. We have to pass eight inside quotes. After that, we need to insert function. Let's use your arrow function, which is an addition off Year six version. There are some differences between arrow functions and regular functions, but I'm not going to go deeper and explain those differences because it's not subject of this course for more information regarding certain things, you can check out our jealous, of course. All right, so inside that function we need to define what we want to happen when we click Banner bottom. First of all, we need to hide banner for that. Let's select it right documents with that query, selector and inside parentheses. Let's insert class name Banner. So in document Object model, we have property called style, which should be followed by CSS property in this guise. In order to hide banner, we need to use display. Not so we need to right here. Display that equal sign and then inside quotes. We need to place needed value in this guy's Not all right. So if we click button, that banner will be heated. Next thing that I'm going to do is to display for container, so let's go ahead and select it right documents dot query selector inside parentheses That's indicate class name for container, as you know, for container by default has capacity zero and visibility hidden. So we need to change those two properties simultaneously, and in order to do that, we need to use style and property called CSS text which actually ellos is to define several CSS styles. Symbol Tanous. So inside close. Let's insert capacity one and visibility visible. All right, let's click again. Bottom. So is the C four is displaying, but without any fade effect. In order to fix that, let's go to CSS file and give some transition to four container. We need to your capacity and duration. Let's say one second. So, as you see now for is displaying with nice effect. And the only thing that have to do is to change background off container. So let's go ahead and select it right. Documents docked. Query, selector. Let's insert your class name container. Then we need style property with background and as a value. Let's easier to your collar. C c. 683 c All right, let's click and you see that everything works perfectly. Actually, that's all about banner button. Next, we need to work on X closing bottom. So when we click, we need to hide for on display banner again. Okay, let's select this bottom right. Documents not query selector that incident yuk last name X p t n. Then add event listener. So in this guy's we need again click event. Let's insert it and then pass, pero function as a second argument. So, first of all, we have to display back banner by default. It has display flex, so on Click we need to give to it this property back with value Flex. Let's copy this line paste and instead of none right flex next minute to hide for Let's copy Again from here and then change one into zero and instead of visible right hidden. So when we click experts in that for was hidden banner is displayed. And then to see the only thing that we have to do is to change background. Let's select container, actually, that's copied from here, then at style. So in this case, we need to change to properties, background and background size. So let's use a gang CSS text. Then go ahead and grab background property with its value from ceases style pasted inside quotes and also at background size, color. All right, so when we close for then you see that banner is displaying back and actually that seats, everything works perfectly. We have almost finished our second project. The only thing that I want to do is to make project responsive for different screen sizes, which I think will be interesting and useful for you. So let's move on to the next lecture. 17. Sign Up Form - Make Project Responsive: all right, as I promised in this video, we're going to make our project responsive on different screen sizes. For then we're going to use CSS media queries. Actually, I think we'll better if we started working at first on form container. So in order to make process more convenient, let's hide banner for a while and display for So let's assigned to ban or display none. As for phone container, let's comment those properties out. Actually, I'm not going to change background. Let's leave it for a while because now our point is to make for responsive. All right, if you want to check your webpage on different screen sizes, would be better if we use Inspector and also switch device toolbar into responsive mode. So the first break point on which form container needs some changes is 850 pixels because as the C four is getting messed up, So let's create first CSS media query right at sign media and inside parentheses as a marks with Let's indicate 850 pixels. So it means that we will change some properties and values which should be applied to for until screen size exceeds 850 pieces. Let's select from container and decrees. It's width and height set with as 600 pixels as for height assigned to it for harder pixels . So as a C size off from container is decreased, but elements inside it needs some changes. At first I'm going to decrease Potting for sign up for Let's select it and then right, parting on top and bottom right, 50 pixels and then 30 pixels on left and right size. All right. Next, let's work on a boat. Elements select. I'm using common class for a put. At first. That's decrease with making 200 pixels. Then change full size. Set it as 14 pixels. Also, I think we don't need such big margin at the bottom. So that's right. Margin. Bottom 30 pixels and lastly, change. Potting on top and bottom right. Seven peaks is and zero on left and right sites. All right, that's all about four inputs. Next element that I want to select. His paragraph. So right sign of for P. Let's change phone size. Make it 15 pieces after paragraph. Let's work on labels and checkbooks, so select label elements right. Sign up for label and decrease its phone size as well. Right? 13 picks is all right after labels. I'm going to select checkbooks because, as you see, we need to decrease its size. So let's write. Sign it, folks. That April Element and inside square brackets, right type checkbooks. I'm going to change within height as a with right 25 pixels. That's for height. Let's set it as 12 pieces. All right, so check books is looking good, but we need to make some changes for circle. I mean, we need to decrease its size as well. Let's use this selector and EDS before pseudo element, then change within height set with as 14 pixels and then height. 14 peaks is as well. Okay, so with checkbooks were done, let's go ahead and work on bottom. Selected right, sign up for button. First of all, I want to decrease space between checkbooks and button, so let's set margin top. That's 50 pixels. Next, let's change size off bottom defined with as 120 pixels. Also, I think would be better if we decrease little bit. Parting on top and bottom right, six pixels and then four pixels on right and left then change phone size, set it as 13 pixels, and lastly, I want to decrease with off border. For that, we can use property call border with and assigned to it one pixel. All right, that's it about bottom and actually for left side, off form container. We don't need any more changes at this break point. As for right side, I didn't hear just decrees phone size of heading. So that's selected to write, had our H one and said phone size as 30 pieces. All right, so on that break point, everything seems to be okay for folk container. Next break point on which we need some changes, I think, is approximately 650 pixels. So let's create new CSS media indicate Marks with as 650 picks is so on smaller screen sizes. I'm going to hide header at all. Let's select it and assigned to eat. Displayed not that select phone container and change its with. Make it smaller right 300 pixels. So that's the way How are form is looking for now. By default, Sign up folk takes up 50% off from container, and in this case, we need to increase it to 100% so so locked, signed up for can assign to it with 100%. All right, so that's all about from container. It's responsive on different screen sizes, and now we need to do the same for Banner. Let's get back default styles remote display None and also got rid off comments from those two properties. So the first break point on which banner need some changes is 800 pixels, because after that screen size, you see that banner is getting messed up. So let's create new CSS media query with Max Weeds as 800 pixels. Then select band or animals decrease its with Make it 450 picks is after that. We need to make some changes for heading, so let's select it right banner heading. First of all, let's decrease phone size making 60 pixels, then I think that we don't need such big space between having an arrow. So let's set margin bottom as 40 pixels and lastly will be better if we decrease with off those borders. Right? Border with four peaks is all right regarding heading. We don't need to do anything. Let's move on to a row, I'm going to change its size, make it smaller. So that selected using class a row and set its full size as 30 pixels. And Last Elements, which we need to take a year off its bottom. So that's selected using fast banner bot N At first, let's set its with as 150 pixels that decrease parting, make it 10 pixels and lastly, change phone size right, 15 pixels. All right, so on that break point banner is looking good. Everything works fine. Next screen size, on which banner is messed up is 500 pixels. So create another media query, right Max, with 500 pixels. Actually, on that break point, I want just to decrease with off banner and phone size for heading. So let's elect banner assigned to eat with 300 pixels that select banner heading and decreased bone size make it 40 pixels. All right, that's it. We can say that our project is fully responsive on different screen sizes. If we check both parts, then you will see that everything seems to be working perfectly. Okay, so our second project is finished. I help you enjoyed it was interesting and learn some new things. Now it's time to move on to next project, so let's go ahead 18. Project - Profile Cards - Overview: hi and welcome to our new project, which is going to be profile cuts. We already created two projects, and actually this one will be a little bit more interesting because we're going to create several types of animations using CSS and JavaScript. So the project consists of two main parts we have here heading with some text. And what do we reload? The page as the seat text is typing. It's followed by cursor, which, after finishing animation, starts blinking. Typing text animation will be created using JavaScript. As for blinking course, so it will be done using Pew CSS. All right. Next, we have three profile cards. They consist of different elements. We have images heading paragraphs, button and social media icons, as he noticed. When we reload the page by default, those cards are hidden, and after finishing typing tax animation, they are displaying in sequence with little delights. Also, if I hover on card, its size is increasing smoothly and buttons start animating, so throughout this project you will learn about how to create those animations. Besides, that project is responsible on different screen sizes. Actually, one thing that I want to mention is that our projects are built on a large screen size. To be more precise. It's with is 1920 pixels. So projects are created using tasked up first approach. And if you use a little bit smaller screen size, I recommend to use inspector and Responsive Mode in which you could indicate manually with and hide of screen. Eventually, we will make project responsive for all screen sizes, but in working process again, I were coming to use those tools if you have any trouble with screen sites. All right. On desktop, I have created new folder called Profile Carts, in which we have folder for images and also three files for HTML, CSS and JavaScript. Let's open Venus coat and drop that folder in it than open in next HTML file, as you usually we have here basic structure of HTML documents we have links for for some icons for Keagle phones and for our seasons fall also down below. I have link for JavaScript file. At this time, CSS and JavaScript falls are empty. All right, let's go ahead. Download source files which are attached to this lecture and start building our new project . See you in the next video 19. Profile Cards - HTML Markup: all right. In previous video, we have prepared everything to start building our new project profiling carts. In this lecture, we're going to create HTML markup, actually, throughout building this project, I'm not going to plead we know and place editor and browser side by side because I think it won't be much convenient. Let's run HTM of filing browser using life preview mode and then start creating markup. Let's open development, which should be container for the entire content, so assigned with class container. After that, let's open another development for heading and assigned to eat class, heading as a content. Let's write police meet our team. Eventually this development will be empty and we will create this content using JavaScript . I mean typing effects, which is so improved preview. But for now, let's just create a manual. All right, As you know, we will have three profile carts. They will be wrapped by development, so it's opening and assigned to class cards robber. Each profile card will be represented by development and will consist of images heading paragraphs and other els. So let's open development with class name card and inside it insert first image element, which will be placed at the top of card in source. Attributes indicate path off image. We have images folder and choose I'm G Top one Dodge APEC and also a sign two mg element class image top. After that, we need second image, which is going to be four person. So let's duplicate 1st 1 change image name, right? I'm G one thought Jay back and also changed. Class Name, right, profile image. All right, so that's it. What we have so far. Let's go ahead and create other elements. Next we will have a Chuan heading, which will be used for a full name. So it's a scientist class full name and insert in it content. Jane Smith. Next, we need PARAGRAPH. It will describe job off person, so I'm going to assign to class job. As for content, let's insert here. Web designer. This paragraph will be followed by another one. It will include some description text, so it's assigned to it class about me and inserting it. Some dummy text, which actually I'm going to wrap by quote All right, next element that I want to create its bottom. Let's define his type as bottom and also insert text explore me. Last part of our card will be social media icons. They will be represented by least, so let's open UAL element with Class Social Aiken's that insert in it a light elements, which will be followed by Link and then insert in it. Phone. Awesome Aiken. That's open, I element, which should have classes. F a b f A Facebook as actually we need for social media icons. So let's duplicate Ally Element three times and just change classes for I elements for 2nd 1 We need YouTube that Twitter and for last one, right Google plus G. All right, so markup for first car is created. That's the way how it's looking. As you know, we will have three off them. So let's go ahead and duplicate entire card twice. That makes some changes. Change image names we need here OMG top two and I'm due to also change full name right? Michael Brown. Ask for job that's right. Web developer. Then make same changes for third car. Right image names Amgen top three and on G three, then as a full name, right Jalan Dough and lastly change job right graphic designer. All right, that's all about HTML markup. We have here three cards which for now are looking really bad, so we need to start stalling them on. Let's do it in the next lecture. 20. Profile Cards - Style - Part 1: all right, so we are ready to go. Structure off Project was created in previous lecture, and now we have to start styling it. Let's go to style. Don't see us this file, which is empty for now. First of all, as usually removed, default margin and parting for all elements. Let's select them using asterisk and set margin and patting as zero. All right, so, as you see, we don't have here any margin. Parting for elements after that first, that I want to do is to set image as a full screen background. As you know, all elements erupt by container, so let's select it using class container. At first, I'm going to set with and height. Let's use as a with 100%. As for height, I'm going to set it as 100% off view put and then defined background in euro. Let's indicate part of image select image called BGE dodge a pack, then as a position right center and then use no repeat. Also, I'm going to use background size property with value cover, and besides that, I want to add linear Grady into two background. Let's use black colors, right? RGB a 000 with opacity 00.8 and then again, RGB, eight 000 0.6. So, as you can see, we have here full screen background, all right, next element that we're going to style is heading. As remember, we created it menu Aly, but eventually we will use JavaScript to create content of it. But despite this, we will need to stall it anyway. So let's select heading. First of all, I want to make it visible. Let's change color, and it's fun. Size may color white and set phone size as 70 pieces. So here is our heading. I want to place it a little bit down from top edge off page, and also I'm going to perfectly center it horizontally. So let's define his position as absolute that in order to place it little bit down, let's set top position as 10% and to center it horizontally. Let's define left position as 50% and then youth transform translate with X direction and with the argument minus 50% all right, so heading doesn't look nice so far, but it's aligned where we wanted it to be placed in order to make it looking better. Let's add some more styles. Change phone, family. I'm going to use your phone called Josephine Sons San Serif. Let's make text uppercase using text trance fall uppercase that makes him space between letters. Right? Let's a spacing with the value of five pixels and also place text in the centre using text Align center. All right, that's all about heading. Now it's time to start styling our profile cards. As you see, they are looking really ugly. And also we have to take care of their layout because their place the right behind heading actually, before we align carts in order to make process more convenient. At first, let's style card itself. So let's elect card. Define its width as 280 pixels and then change background. Use your color E Next step, I think, should be to decrease size of images because they're bigger for now. So let's select First Image, which has class name, image top, actually, for the image I want with to be equal to with off card. We have already defined it as 280 pixels, and if we set with four image as 100% that it will get the exact same with, I mean equal to its parent elements with So as you say now, top image fits in card and we have to move on to second image. Let's select it. It has class, name, profile image and define its with as 120 pieces. All right, so for now, carts do not look good, but we are able to manage their layout easily as they know cards are wrapped by Carter rapper. So let's select this element. First of all, I'm going to set with off a rapper as 80% at this time. Cards are placed vertically in a column, but we want to place them horizontally in a rope, and for that I'm going to use flax books. So let's assigned to eat, display flex. And then you know that to create space between carts I'm going to use justify constant with values space evenly. So as you can see, cards are placed in the role, and the only thing that have to do is to place a rapper down below. After heading out and also align, it's perfectly in dissent. So let's define position off rapper as relative. Then define top position as 35%. And in order to center rapper Horizontally, I'm going to set left position as 50% and use again transformed, translate with X direction and with the value minus 50%. All right, so carts are aligned perfectly. But again, they need to add some more stars because they're not looking good for no. I think that it's enough. Let's continue working in the next lecture. 21. Profile Cards - Style - Part 2: okay. In the last lecture, we aligned elements on the page, and actually, we have to continue styling carts. As you see, each car consists of several elements, so let's go ahead and step by step style each of them. Before we do that, I'm going to add some more stars to carve itself. I want to manage layout of elements inside card using flax books. So let's make carp flex container assigned to eat, display flex. Then in order to place elements vertically in a column. Let's change flex direction as column. Then we need to center elements horizontally for that. In this case, we have to use a line item center and Leslie. Let's use justify content with the value space evenly, which will create even space between alums. All right, so that's it. What we have so far. It's time to style elements individually and going to start from top image for top image. We have already defined with as 100% and next we need to define its height. Let's set it as 220 pieces. So at this time, images are slightly stretched. Maybe it's not quite visible here, but they lost little bit their quality. So in order to fix that as a guest, we have to use object feet with value cover. All right, Last thing regarding top image is that I want to cut bottom right corner off it in order to create nice effect for that. In CSS, we have property called clip path, which actually allows us to create different shapes of Elon's. You're able to define clip of values manually, but I'm not going deeper and explaining details how to do that. There is a really nice and helpful website, which allows us to create different shapes using clean pop. So let's giggle, clip path maker and visit first Link. So here, on the right side, we have different shapes. You can choose any off them, and on the left screen you're able to play around with different shapes. You can many polite with those little circles. In our case, we need these second shape. So let's look at it. As I said, I'm going to cut bottom right corner just like this. All right. I think that's it. What we need. In order to apply this trip to our image, we need to copy this code from here and a sign aids to image top. So you see that top images cut. It's looking good, and actually, we have finished working on the image. Let's move on to 2nd 1 I'm going to make it circle with white border. And also I wanted to be placed in the center in previous lecture would define its width as 100 and 20 pixels. And in order to make perfect circle, let's make its height. 120 peaks is as well that used a gang object. Feet cover, and in order to change its shape and make it circle, let's use border radius with value 50%. All right, so profile image has shape of circle, and next thing that I'm going to do is to place it up. I mean, I wanted to extend a little bit over top image. In order to do that, I'm going to use margin top with negative value. That's 100 and 10 pieces. So as the sea image is moved up, but we have here little problem, it ended up behind top image. Actually, we can fix that very simply using CSS property called Z Index in General when you want to use the index property, you should define position often element because it's not applied through element with static position, which actually is a default value off position property. But if an element is a flex item, then you can use Z Index without defining position. Makes sense. All right. Default value off the index property is zero, and in this case, we need to assign to it value, which will be higher than zero. Let's say 10. So now problem is fixed that profile images full of visible right. Last thing regarding second image is to create white border. So let's write border with values. 10 pixels solid and the color E. Okay, that's it about profile image. I think it's looking decent, and we have to move on to next Element, which is going to be heading. It represents full name off person, so let's go ahead and select it right Card H one. At first, let's change default phone family I'm going to use here. You belong to son Sarif that change phone size. Make it 22 pixels. I'm going to use your great color, right? 555 And lastly I want to create some space on all four sides using margin 10 pixels. All right, so headings are styled, as you see there looking good. Next, we have to move on to those two paragraphs. 1st 1 represents job off a team member that's selected using class, job change, phone family. In this case, I'm going to use Monserrat sounds Arif. Then change color use 777 And also, I'm going to make phone a little bit lighter. Right front weight with value 300. Okay, so with first paragraph were done, let's select 2nd 1 It has class name about me. In case of second paragraph, I'm going to use different phone family, which is Joseph Incense Sand Saref. Then decrease a little bit. Phone size. Make it 14 peaks is all right. I think we need some space around paragraph, especially on the left and right sides, because text is too close to edges of card. So let's decrease with a paragraph. Make it 90% and then, in order to create some space on top and bottom. Right margin. 15 peaks is on top and bottom and zero on left and right sides. All right, so now paragraph is looking much better before we move onto the next elements. Let's add some more stars to it. Change font style, make it italic and also change color. Make it great. Using 444 All right, that's it. We have finished working on second paragraph. I think would be better if we take a little break here. So see you in the next video. 22. Profile Cards - Style - Part 3: all right, so the most part off card is all or distort their left button and social media icons. But besides that, we have to create some animations next element that we have to work on his button. But actually, before we do that, I think would be better if we center text off second paragraph because it will be looking nicer. You know that to do that, let's assign to eat text, align center. Okay, let's go ahead and select button right card button. First of all, we need to increase its with Let's make it 100 and 20 pixels, then creates imparting on all four sites, right, seven pixels and also create some space on top and bottom, using margin right, 10 pixels and then zero on left and right sides. All right, so that's the way how Button is looking at this time. Actually, I don't want this default background and also border, So let's go ahead and work on them. Change background color. Let's use here. Tomato. Then get rid off border right border not and also removed. Default outline. Right? Outlined nut. Okay, Next, let's make button a little bit around it. Use here border radius with the value 25 pixels, then change full family. In this case, I'm going to use Josefin sounds Sand Saref, then as a color. Let's use E and lastly, create shadow effect by books. Shadow with the following values five pixels than five pixels, 20 pixels and called org B A 0.4. All right, So as you can see, button is ready. It's style, and I think it's looking quite good. Now it's time to sell those social media icons. First of all, I want to take a year off layout. They should be placed horizontally in a row. So let's select you elements, which has class named social icons that define its with as 100 and 50 pixels, get rid off default bullets from lease items using least style. Not so in order to place icons in a roll, I'm going to use flax books, right, display, flex and also create even space between items using justify content with values space evenly all right. As the sea icons are already looking better, we need some space on top and bottom. Let's create it, using margin like 10 pixels on top than zero on the right side than 20 pixels at the bottom and again. Zero. Okay, now it looks decent. Next, I want to create little border at the top of icons. Let's use your property called border top, with the values one pixel, solid and the color night night night. So border is created at the top of icons, but it's too close to Aikens. So let's go ahead and fix it using parting Top assigned to it value 20 pixels. All right now, everything seems to be good. Let's move on and work on. Icons at first increased their size. Select social. Eichel's then I element and increased phone size make it 18 peaks. Last thing regarding social icons is to change colors and give them their original color. Let's select 1st 1 which has crossed name if i Facebook F and assigned to its color three B five night night night that duplicated three times and change classes and colors for a 2nd 1 right to YouTube and it's call or CD 201 F. Next one is Twitter as a color right 55 a. C e and for last one change class name as Google plus G and right color d D for B three night. All right, so we can say that our carts are styled. I mean, we have stalled all the elements inside it, but for now, it's not over because we have to do some cool things. I mean, we're going to create several animations. First effect that I want to create. In this case, we don't Animation is hover when we hover and card. I want its size to be increased. So let's select carb with over in order to increase size of element. There are different ways in CSS. One of them is to use transform with escape, so right transform, then scale by default. Each elements scale is set us one. And if you want to increase its size, then you have to increase value off scale accordingly. And this guy's let's insert your argument 1.1, and also in order to make increase elements size move Lee. Let's add two card transition transform and duration 0.5 seconds. So when we hover, you see that size of card is increasing and actually it creates nice effect. All right, last thing that I'm going to do in this video is to create animation for bottle. When we hover and card, I want to increase buttons size. And besides that, I wanted to be rotated according to that access in different directions at this time. It maybe sounds a little bit complicated, but it will be clear soon. So let's go ahead and start creating animation. Right key frames. Let's call animation, but in rotation on 0%. We need default values for scale and for rotate, so right transform that scale with value one and rotate Z with value zero. Next step is 5% on which we need to increase size of Patton. And also I want to rotate button down on the right side by five degrees. So let's duplicate forced line and change values right 5% then as a value of scale inside 1.2 and then five degrees. Next step is 10% on which I want to change just direction of rotation instead of right side . We need left site, so let's duplicate again change 5% into 10% and instead of five degrees right, minus five degrees. So that's the idea off entire animation. We need to change directions of rotation in every 5%. So let's duplicate these two lines for nine times and then quickly changed person teach for each step. Next one is going to be 15% than 20% 25%. And so what? 100% we need again default values. So insert one year and zero. All right, so key frames is ready. As I said, we need this animation when we hover on the car. So let's select it at hover than select button and assigned to eat animation with the following values right name button rotation that duration right. Two seconds. We need delay right one second and then as a value off animation timing function, right, lenient. So will be hover on card size of it is increasing. And after one second delay, battle starts animating. All right, I think that's really nice and cool. Hope you like it. Next. Animation is going to be typing text with blinking cursor. It will be created using CSS and JavaScript in the next lecture 23. Profile Cards - Typed Text: all right. As I promised in previous lecture, we're going to create typing text animation with blinking cursor using CSS and JavaScript. As first in this video, we will create typing text animation and it will be done using JavaScript. As you see, we have here heading which we created manually at the beginning of project. So I'm going to get rid of it from HTML documents. I mean to get rid of content and not entire element because we need this deep, then open after Js file, which is empty for now. So we're going to create function which will manage displaying each character with some intervals. And besides that, we will need to create two variables. 1st 1 will be used for content. I mean for text. As for 2nd 1 it will be a counter which will help us to display each character in a sequence I'm going to use Yes, six Syntex. So let's create variable const heading and assigned to its string value which will be text that is going to be displayed. Police meet award team, then create second variable. It should be let actually, this variable is going to be something like it's aerator. Let's call it I and its initial value will be zero. I'm not going to explain in details. What is the difference between let and Const variables and how they work For more information again, you can check out our childless group course. All right now, create function. We're going to use yes, 60 function. Create coast. Call it typing and the scientific ero function. Inside that function, I'm going to use conditional if statement in condition we have to use property called length. Basically, this property is used with a race, but besides that, you can use it with strings as well. So if we run in council lengths off, heading right constantly, log heading dot ranked than inspector page and click on Council Top, so is the scene that we have here 20. It means that string value can see so 20 characters, and actually there are including white spaces. So we're going to use this property in its statement as a condition, right? I it's less than having dot length. Let's just write this condition and I will explain it soon. Then we need to select heading elements for that right document dot query selector select having using class name heading. So if the condition is through, then we need to display characters on the page. And in order to do that in JavaScript will help property called Inner HTML. And it should be equal to something that will manage displaying characters on the page in sequence. Let's write your heading and use one of the string methods called Char at. Actually this method the returns character off string, and it takes as an argument zero based index number. Let's go ahead and see how it works. Go to council and create variable Write a equals two. Hello that. In order to get let's say, first character, we have to write a goat char at and inside parenthesis. We need to indicate index number in this case zero. So you see that we got H in the same way. If we want to get second character, we need to insert Year one. And so what? So that's the way how char at Method works. And actually, that's why we sat initial value off. I'd variable as zero in order to get first character. Let's insert as an argument all right, So according to the statement, we will get on Lee just first character and nothing more. But we need to get all the characters in sequence with some intervals, so we need two things. 1st 1 is to increase. I counter by one after each character. For that, we need to write I plus plus. Actually, it's called JavaScript increment operator, which ellos is to increase value by one. And besides that, in order to display characters in sequence, I mean to add one character to another. We have to place year plus sign. All right, let's call dysfunction in order to execute code which we wrote here, right, typing with parentheses. So you see that we have here just first character. It happens because function is executed just once. So in order to play entire animation, we need to execute function over and over again until in excitement, condition becomes false. For that, we can use JavaScript building method called set time out. It can take two arguments. 1st 1 is function right typing and 2nd 1 should be interval between executions of function . Let's interfere 150. Actually, this fellow indicates number off milliseconds. So as the sea now animation is working letters or typing with some intervals. All right, I hope that it was clear for you have this code works. But anyway, I'm going to explain it once again. So when function is called initially, I is equal to zero condition in If statement is true and we're getting first character on the page, then I is increasing by. One said Time out function is executed. It calls typing function after 150 milliseconds. Then condition is again through, and we're getting second character on the patient, so it continues until I becomes equal to length, off heading and actually condition becomes false. So that's the way how this simple JavaScript function works. I hope that it was interesting because he learned, with a couple of lines of code, how to create this nice animation right as beset. Besides typing text, we will have blinking cursor and in order to create it, let's move on to the next lecture 24. Profile Cards - Blinking Cursor: Okay, So in the last lecture we created typing text animation using JavaScript. It's working. It's looking good, but in order to make it perfect, let's add to text blinking cursor we're going to created using CSS animations. Of course, there will be represented by after pseudo element, so let's select heading at after Sidhu elements at first. As you know, we need to define content. Let's living empty, then set with us five pixels and hide yes, 55 peaks. Next, we're going to make its background color white. So for now, element is not visible because we have to define its position. So let's assign to it position absolute. All right, so here we have cursor. But as you see during animation is changing its position for several times. It's ending up down below. In order to fix that problem. In CSS, we have property called white Space. We need to assign its two heading, and it should have value pre rep. Actually, when we used this value than you takes into account white spaces and wraps tax whenever it's needed, so you can see that now Courser is working fine. It's no longer moving down, all right, Now it's time to create animation. So when typing off taxes finished, I want Corso to start blinking, create key frames. Let's call it blinking. So I'm going to create blinking effect by changing background colors from white to transparent and then back to white. We will have only three steps on 0%. Let's make back on color White that on 50% we need backbone called transparent. Selma's duplicated right 50% and change color make it transparent as for 100% when it back white color right to your 100% and change caller making white All right that's assigned to after Super element animation property. Answer to your name blinking that duration one second. So I want courses to start blinking after finishing typing text. Therefore, we need here little delay, and it is three seconds, and lastly, I want animation to be playing infinitely soon. For that, we have to insert here value called infant. So you see that coarser is blinking and everything works perfectly. All right, that's it about coarser animation. Before we finish this lecture, I want to create one more animation. I mean, when the pages loaded and typing text animation is finished. I want those cars to be displayed in sequence with a little delight. So let's create new key frames and call it card and him. So by default I want cars to be heating. Therefore, on 0% we need capacity zero that duplicate this line and on 100% May capacity one. Okay, so key frames is created. We need to use it for Qarth separately because we need different delay Time for each card. Let's select 1st 1 right card and in order to select 1st 1 that's used and child selector and inside parenthesis, right one assigned to it animation. Then insert name card Any next, we need duration, right? Two seconds. So for first card, we need the late time three seconds because I want it to be displayed right after finishing text animation. Let's duplicate this code twice, then change those numbers right to and three and also changed delay time for a 2nd 1 right ? 3.5 seconds. As for 31 right, four seconds. All right, reload the page and he said that we have here a little problem by default. Cards are not hidden, and actually, it doesn't look good. In order to fix that, we need to use value called backwards, which ellos elements to get state, which is indicated on start of animation. I mean 0%. So when we reload the page during delay, carts will take capacity zero by default. Let's reload and you see that everything works perfectly. All right. Actually, we can say that our third project is created with all its animations and features. But before we finish this project, I want to make it fully responsive on different screen sizes because for now, on smaller screen sizes, it won't be looking good. In order to do that, let's move on to the next video. 25. Profile Cards - Make Project Responsive: right in the last video, we've finished styling our project. We created several cool animations, and the only thing that have to work on is to make project full of responsible, different screen sizes. First of all, in order to make working process more convenient, I'm going to pose for a while animations for carts because every time we will need to wait , there appears. That's comment. Those three animation properties out that inspector page and switch responsive malt. As we already said, Project is built on a large screen size. I mean on 1920 pixels with. And because of that, if you use relatively smaller screen, then Project might be looking not quite perfect for you. So that's why we're going to make it responsive on all screen sizes. All right, so first break point on which we want to make some changes is about 1300 pixels on the break point. We need to decrease slightly phone size of heading, and also we need some space between cars because they're getting too close to each other. Let's create CSS media query and as a marks with indicate 1300 pieces, then select heading elements decrease phone size make it 65 pixels. Besides that, if we make window little bit smaller, that tax will be reupped, and I think it's not looking good in order to avoid it. Let's define with off having as 80%. All right, that's it about having Let's select carts rapper In order to increase space between cards, let's just increase with off carts. Rapper, as Remember It's with is set as 80%. And now let's make it 100% all right. Besides that, I think would be better if we moved a little bit up carts. Rapper. For now, it's top position is defined as 35% so let's decrease it slightly right top with value. 32%. Okay, finally, last decrease height off CART. Actually, we can achieve that by decreasing height off image top. For now, it's highly set as 220 pieces, so let's select it right image top and set height as 200 pieces. All right, that's it. We don't need any changes on the break point. Next one is going to be 1000 pixels because after it, as you see, cards are getting really close to each other. So we need to make you some changes. Let's create new media query that indicate marks with as 1000 pixels. First of all, I'm going to increase a gang with off heading Let's select it, Bent said. It's with as 90%. So on that break point, we need to wrap carts. And for that I'm going to use flex property called Flex Rap. Let's select Carts Rapper and assigned to it flex rep, which should have value or up. So, actually, as you can see, rap is working. But before carts are reupped, they are too close to each other. We need some space between them. For that, let's elect card and create space. Using margin on top, we need zero, but then on right side right, 30 pixels. We need some space at the bottom as well. So right here, 50 pixels and on the left side. Third speaks, so we have here space between cars. But here is another problem. As you know, height of container is set as 100 pH. And because of that, after card wrapping height is not enough to cover background, so we need to set height of container as 100%. That's select container and right height 100%. So now background is covered. But carts have changed their positions, and they covered heading. That speaks that simply using potting on top, we need 300 pixels, that zero on the right side, 200 pixels at the bottom and again, zero on the left site. All right, so on that break point, everything seems to be okay. Let's make window smaller. Next with on which we need slight changes is about 700 pixels. I think we'll be better if we decrease phone size of heading. So let's create new media and indicate marks with as 700 pixels, then select, heading and decrease phone size. Make it 50 pieces. So heading is looking much better. But now we need to change height off, coarser. Let's select having and at after Sidhu Element. I'm going to make height off course, or 40 weeks is all right. So on the break point, I think we don't need other changes. Let's make wing, though smaller, so on smaller screen size, we need to decrease headings. Phone size again. Let's create new media for another break point. Indicate Max with, as let's say, 450 pixels, then select heading. Maybe it's fun size 40 pixels Now again, we need to change height, of course, there because it's bigger than size of text. Let's copy the code from here and just change for pixels into 33 pieces. All right, last thing that I want to do is to decrease space between card and heading, and also we have big space at the bottom. Let's select carts. Rapper and change Values of putting on top right 250 pixels. That zero on the right side, 150 peaks is at the bottom and again. Zero. All right, so our project is finally finished, its responsive on different screen sizes. Actually, if you think that it needs some more changes than feel free and added on your own. But if you have in trouble, then you can reach out and post your questions will be glad to help. So that's it about this project. Let's get back here. Animations for carts. Get rid of those comments. I hope you like this project. Learn Laura links, and now let's move on to the next one 26. Project - Slideshow - Overview: hi and welcome to your next project In this one, we're going to create slideshow. But besides that, he will be able to learn about how to create several cool and nice effects based on HTML CSS and jealous. So the project will consist of two parts who will have banner, which you see here on the screen. There are two elements on the banner heading and button Button has some three D effects, and also one hover we have here shining effect. It will reload the page. Then banner element will be heating initially and appear with nice effect. All right, if we click button, then we will move on to slide show. It works automatically and consists of several slides. They were present some famous cities. Each light has full screen background, and on the left side, we have here little description. Okay, that's it. What we're going to create, as you usually like other projects, it will be full of responsive on different screen sizes. If we inspect the page and check, you will find that it's responsible. All right, I have created new folder on desktop called Slideshow. Let's open it. We have here another folder for images and also three files for HTML, CSS and JavaScript. Let's open this folder in V s code in index dot html file. There is a basic structure off HTML document with some links for phone awesome Google phones for startled CSS file and Fortune. The script as well. All right, so we're ready to start building our next project. Let's download sore spots attached to this lecture and get started. 27. Slideshow - HTML Markup: all right, so we are prepared to still building our next project. Slideshow. In this lecture as usually, I'm going to create HTML markup for project as it so In Project Review. It will consist of too many parts. 1st 1 is going to be banner and 2nd 1 will be slideshow. Both parts will be wrapped by container, so let's open developments, which will have class name container. Next, we need another developments. It will rub elements off banner, so let's assigned to it class banner. Actually, banner will consist of just two elements heading and parts. Um, so let's insult your H one heading element with text code and create. And then, after it create bottom, it will have type, attribute, button and as a text right here, start slideshow. All right, that's all about first part. It is a small one. Let's go ahead and create second part open development. Actually, it will be a wrapper off second part that's assigned to it class slideshow Rapper. Next, we need another Deve, which will be the actual parent off slides assigned to a class name slideshow. All right, now it's time to create slight itself. Will have four off them. Let's open another development. It will have clustering slide so its slide will consist of heading paragraph and button. And also each of them will have full screen background, which actually will be added from CSS. So let's insert year another deep. It will wrap all those elements assigned to it class content than insert force element, which is going to be heading. Let's open H three heading element and insert text. London. Next, we need paragraph with some dummy text and lastly, after paragraph instant bottom. Actually, it won't be a usual button. We will use your phone. Awesome. Aiken at first let's assigned to it type. Attribute bottom that inserts and text Read more and open. I element. I'm going to use your Aiken off arrow. So it's assigned to with Colossus F A S f a a row. Right. Okay, so that's the way how our slide is looking at the sign. As we said, we need four off them. So let's go ahead and duplicate it three times. Change headings, right? New York, then for next one, right Rome. And for lusts like right, Tokyo. All right, that's it. We have created basic structure off our project. Next we have to start styling first part, which is banner, so that's move on to the next election. 28. Slideshow - Style of Banner - Part 1: All right, so market is ready. Everything is prepared to start styling. Our project has been set in previous lecture. At first we're going to work on Banner That's open style. That's his file and, first of all, reset default margin, imparting select elements using asked the risk and set margin and putting as zero. Next, we have to hide second part of our project for a while. I mean slideshow. So for that, let's elect element with class name slideshow, rapper and assigned to eat display. Not all right, so slides are hidden and we have here just heading. And But before we started working on banner, let's define within height for container And also as remember for first part, we need to set background color as black. So let's go ahead and do that select container. Set it with as 100%. That's for height. I'm going to make it 100% off Vieux Port and lastly, change background color make it black. All right. So, as you see, the whole page became black. Heading is no longer visible. So first of all, let's change its color Select banner H one and you see you called or 911 30 f. All right, so as you can see, your heading is visible, and now it's time to take your off layout off banner. I'm going to place it in the center, So let's select banner assigned to eat position. Absolute. Then I'm going to place it down. So let's define its top position as 35% that in order to center it horizontally set left position as 50% and then use transform, translate with X direction and with minus 50%. So banner is centered. And actually, I'm going to center elements inside banner as well. For that, we need to use text align center. So now you see that everything seems to be okay. Elements are aligned in the right way, and now it's time to sell both elements. I mean, heading and bottom individually. Let's start from heading. We have already define its color, and next I'm going to change its phone family. Let's use here you pronto San Sarif that increase phone size, make it 100 and 20 pieces, but right, so as the sea heading is already looking nice. Next, I want to create some space between heading and button, and I'm going to do that using margin bottom with value 100 pixels And lastly, let's create borders on top and bottom. Right property. Border top with values. Five pixels solid and with color. 91130 f, then duplicated and instead of top right bottom. All right, that's it about heading. It's ready. I think it's looking good. And now let's move on to but select button right banner button. At first, let's define its with. Make it 230 pixels, then creates imparting on all four sites. Right parting 10 pixels. Next, I'm going to change its default background color. I want to use linear, radiant, so right background linear great deals as a direction off color transition I want to use to right. It means that transition will go from left to right. Then I'm going to use two different red colors. 1st 1 is going to be for four zero for zero to esports. 2nd 1 That's right. See 01 20 C So as the sea step by step bottom is getting nicer, let's work on tax excited change phone family. In this case, I'm going to use phones called Does is Sanson Reef that increased phone size make it 25 pixels. Create some space between letters using letter spacing, two pixels and change color of texts. Make it white. All right. At this time, Button is looking much better, but still we have to add to eat more styles that's get rid off default, border and outline right Border None and outline none, and also make but surrounded using border radius 100 pixels. All right, actually, button is almost child. We have to do a couple of things. As you remember from Project Preview. Button has three D effect on hover, and you already know how to create a three D environment for talent we should use Transform with perspective. Let's be six year, 500 pixels and then rotate button according to white direction. Insert your argument minus 15 degrees so you see that button is rotated nicely. Next that I want to do is to create text shadow effect. Let's use property called tax Shadow. Actually, it works in the same way as box showed us it can take same values, so that's assigned to eat six pixels than three pixels, their right to pixels and, as I call the right are to be a 000 capacity point for. So we have here text shadow effect, which actually makes Button even more three dimensional. Okay, before we finish this lecture, let's change type, of course. Or make it a point. All right, I think that it's enough for now. Let's take a little break here and move on to the next lecture. 29. Slideshow - Style of Banner - Part 2: okay. In the last lecture, we finished Styling banner with its elements heading in button and before I might want to slide show. We have to do a couple of things here. I'm going to create some cool animations and effects when we reload the page. I want those elements to be heating and then appear with nice animations, All right. In order to hide banner initially and going to use after suit element, we will give some shape to after Element and define its positions in order to cover entire banner that using animation will change its position. It will move to the right side, and banner will be displayed smoothly. So that's what we're going to do. Let's elect banner with after suit element. First of all, let's define contents, make it empty, then said with as 250% and height as 100% then change background. I'm going to use linear radiant. Eventually we will use transparent and black colors, but in order to make element visible, let's use transparent and white collar for a while. Adversely defined direction, off color transition. I wanted to go from left to right, so insert here, too. right then as a first color, right, transparent, and then use white color twice as the sea for no after sued. Element is not visible, and it happens because we have to define his position. So let's go ahead and set its position as absolutely and then defined topping right properties as zero. All right, so now you see that after see, the element is already visible and it covers entire banner. Now we have to create animation and using that animation, we will move these element to the right side. So create key frames. Let's call it Banner and um, on 0%. Let's define its right position as zero. As for 100% at the end of animation, I want element to go to the white side by minus 250%. We use that value because entire after element will be fully gone to the right side. All right, let's assigned to element animation property insert name, banner and him than duration. Three seconds. And as a value off animation timing function, let's use linear. All right, reload the page and you see that element is moving to the right side. Banner is displaying But after finishing animation after sued, Element gets back to its initial position. We don't want this when the animation is finished. We want it to maintain its position on the right side. In order to do that, we have to use value called forwards. Actually, this value alos to element to maintain state, which is defined at the end of animation in this case position right, with value minus 250%. So if we reload the page but that everything will work fine. Actually, we don't want this white color, So let's change it and make it black, then reload again. Let me see that. No, we have nice effect, all right, We have to do here some more things. You see that when after element goes to the right side, we're getting scroll bar down below in order to avoid it. Let's assign to banner overflow hidden. Now it's looking much better, and we can say that his first animation, in fact, is created. Next, I want to add a little animation to button. I want it to be displayed after little delay, so we need to create another key frames. Let's call it, but Annie. So in order to display Button after little delight, we need to hide it on its own. Let's do that using opacity on 0% right capacity zero that duplicated this line and on 100% he said of zero right one. All right, that's a sign to butts and animation property Piece of your name button and him with duration one second and as a delay time. Let's write 2.5 seconds real haute, and you see that animation is not working quite good by default. Button is not hidden. So in other two picks that, as you already know, we have to use value called backwards, and now everything works perfectly. All right, that's it. We created several cool animation effects. Next, I'm going to add hover effective button. When we hover on it. I won't button to be rotated and also will add to it. Shining effect. Okay, let's do it in the next lecture 30. Slideshow - Style of Banner - Part 3: all right. The lasting regarding first part of our project is to add, however affected, but we're going to change several things on hover. I want Button to be rotated with three D effect than Texas Shadow will change its direction . Also, I'm going to change slightly linear Grady int. And lastly, we will create shining effect using before Sue Ellen. So that's it. What we're going to do in this lecture. At first, I'm going to create before Super Element. Select Banner button and add before then, make content empty, define within height. Let's make both of them 100%. Then change background. Use your linear Grady int as a direction I'm going to insert to right and as colors right, transparent, then white color and then again, transparent. All right, you know, to make element visible. As you know, we have to define its position. So that's sad position as absolutely so Here we have before Suitor Element. It's visible, but it's not a place in the right way yet. I'm going to place it on the left side of, but so let's define its position as zero. Not that left position as minus 100%. All right. So before pseudo element is aligned, last thing regarding it is that I'm going to little bit skew eat according to X direction. So right transport skew X and as an argument inside minus 30 degrees. All right, that's it about before pseudo element. It's styled and aligned, so it's ready. And now we have to create hover effect. Let's elect bottom at holler. First of all, I'm going to rotate it in order to make through the effect we need again perspective. So let's actually copy, transform property with its values from here and just change minus 15 degrees into 15 degrees. And also used transition with values all and 0.5 seconds. All right, so if we hover, then you will see that button is rotated with three D effect. So that's the first thing on hover. Next, I want to change direction off text shadow. That's again. Copy, eat and just add minus sign to first value. So if we hover and if you take a closer look, you'll find it on hover direction off text shadow is changed. All right. Next thing is to change linear Grady INTs. As you know we are using here different red colors and direction. Off transition goes from left to right on hover. I'm going to change that direction so transition will go from right to left. Let's grab linear Grady in from here and instead off too right? Right to left. So I see colors are changing and I think it's looking good. Now I have to work on that before elements on hover I want to change its position. It will go from left to right for that. Let's select banner button, then add hover and right before define its left position as 100% and also add transition to before Cito Element with values left and 0.5 seconds. All right, so when we hover, you said that before, See, the element is moving. Everything works fine. And last thing that we have to do is to hide before element, using overflow heating which should be assigned to. But okay, now everything works perfectly and we have here cool over effect on. But so the first part of our project is done. Banner is created and styled with some nice animations and effects. Next to have to move on to second part of our project, which is going to be slideshow. So see you in the next video 31. Slideshow - Create Slideshow - Part 1: Okay, We have finished working on banner, and as I promised, we have to start creating slideshow. Html markup is ready for it. It's just heating for a while. So, first of all, I'm going to display it back and hide banner for a while. After creating slideshow, we will manage switching slideshow from banner using JavaScript. For now, let's assigned to banner displaying None bent. Get rid off it from slideshow rapper. Also, I'm going to remove black background from container for a while. All right, so we're ready to start. At first, I want to build slide itself, and then we will work on layout. So we have development with class names light that selected define its with as 100% and height 100% off Buber. So as you see, each slide takes full with available on the page, and also their height is equal to 100% off Butte. Next, I think, will be better if we set images as background. Let's do that for first light for slides. We have common class and in order to select 1st 1 I'm going to use selector called F child Rights Light. If a child and for selecting first light, we have to insert year inside parentheses. Argument one then defined background in Euro Select image London dot j. Paige than as a position off background right center. You also know repeat and lastly, right background size with a value cover. So you see that we have full screen background for first light. Let's go ahead into the same for rest of the slides, duplicated this code for three times, then change slight numbers right to three and for and also changed image names for 2nd 1 We need New York, then roll and for last one talk You all right? So, as you can see, we have full screen background for all slights. Next step is to work on constant off slide. I mean, those three elements heading paragraph in button. First of all, let's define position off content. Let's selected, said it's with as 500 pixels, then defined position as a relative. Actually, I'm going to place content down from top edge and little bit on the right side from left edge. So right top position. Make it 35% Esport left right, 5%. So, as you can see, content is place in the right way. And next we have to style those three elements. Individual. Let's do it in Sequels. Start from heading selected Right Content H three. At first, let's change its phone family use here. Also Old San Sarif, then increased bone size. Make it eight pixels Change fund. Wait slightly. Make text lighter by phone. Wait with Value 400 and lastly, make color of text white. All right, so heading element for all sleight is ready. It's looking nice. Let's move on to paragraph selected Right Content P First of all again change phoned family in this Guys, I'm going to use phone called Doses Sand Saref that increased bone size, Make it 20 pixels and change color. Let's use your light, great right see etc. Etc. All right, so paragraph looks nice and it's time to make button looking good as well. I don't remember. Bottom includes text and phone also Michael, So we need to sell both elements. Let's start for a button. Selected right content bottom define its width as 130 pixels. Next minutes, imparting but not for all sides. Let's created just on top and on the right side right, parting 10 pixels on top. Then again, 10 picks us on the right side and right zero for rest off the sites. After that, let's create some space at the top of bottom using margin top 30 pixels. So that's the way how Button is looking for now. Actually, now I want to get rid off some default styles. I mean background, border and outline. Let's make background color transparent and then removed. Border and outline, right? Border None and outline. Not as well. All right now I think we should take here off. Content off button. Let's change phone Family. He's here all sold Some Sarif increased a little bit phone size. Make it 20 pixels, then make phones little bit lighter. Right front weight. 400. Create some space between letters using letter spacing with the value one pixel and change color. Make it white. Alright. Actually, we're almost done with button. I want just to create border at the bottom and also change course of type as Pointer. So let's write border bottom with the values. One pixel solid that why? It's color and also right. Coarser pointer. Okay, that's all about pots. Um, before we finish this lecture. I want to create some space between text and arrow, so select I elements right? Colton's I and give it marching. Left Eight Peaks is all right. That's it for now. Content off slightly style. Next, we have to take care off layout off those lights and eventually make slighter working. Okay, let's work on those things in the next election. 32. Slideshow - Create Slideshow - Part 2: all right. So after building slights, we have to manage their layout and then makes light. You're working using CSS animation. Actually, before we do that, I'm going to add linear Grady into background. I want part of image. I mean left side to become a little bit darker. So let's add to all slides linear, radiant. Then, as a first value, I'm going to insert direction off transition using degrees. In this case, I'm going to use 100 degrees. And then I want to mix three different values. First, you will use will be same color, but with different capacities. As for 1/3 1 I'm going to use transparent color, right RGB a 38 38 again 38 and opacity want next when it same color. So it's copy it and change the opacity. Right? 0.8. As for third caller, right, Transparent. So you say that we have here Nice effect left. Part of image became darker, and actually, it helps us to read the tax easily. As for right part, it's transparent. All right, so finally, slides are built. Let's go ahead and take care of their layout for now is a C sleights of placed vertically in a column, but we need to place them horizontally in a rope. For that, I'm going to use flax books. Let's select development, which has class, name slideshow and assigned to eat, display flex, so slights are placed horizontally in a row. But as you see, they lost their with. In order to fix that, we have to define with off slideshow. As for 100% we use this value because we have four slights. Each of them has with 100%. So entire with off slideshow is distributed equally and each flight takes up with off entire page. Besides that, let's define height as 100%. So you see that now? Problem is fixed slides are placed horizontally in a row. But now each slide takes up full with off page. All right. Actually, the main idea off slideshow is to move entire rapper with some intervals using CSS animation. So we need to create key frames. Let's call it slideshow. So we will move slide by manipulating on positions off slideshow. And in order to do that at first we need to define position for it as relative. It will. Hello us to use top left, right and bottom properties. All right, let's go back to animation. During slideshow, we will have several steps from 0 to 10%. I don't want to change positions of slides so right 0% and define left position as zero, then duplicate eat and instead off zero right, 10%. Next step will be 15% on which first light will move to the left side and will be changed by a 2nd 1 So we need to move slights to the left side by minus 100%. Then from 15% to 25% this position will be maintained. So we need the guy left minus 100%. Next step is 30% on which we need to change again. Slide. So let's right. Left position in a sign to eat minus 200%. Let's duplicate this line and change 30% into 40% after that on, 45% win it again to change slight. So let's increase value off left position and make it mines 300% that duplicate and rights here, 55%. All right, so at this point, all four slides are displayed, and now we need to move them back. Let's duplicate this line five times and then change values accordingly on 60% right minus 200%. Then next step is 70% on which we need same value. Then next one is 75%. Let's make left position minus 100%. Then we have 85% with same value and lastly, right, 90% and assigned to left position. Zero. All right, so that's all about key frames. Let's assign to slide, show animation, property. Insert your name off animation slideshow, then as a duration right, 24 seconds and in order to play slideshow infinitely right, infinite. So as the sea slides are moving and actually slideshow is working fine, as in noticed. We have down below scroll bar because with off slideshow is 400%. In order to fix that, we have to use overflow heating, and we need to assign eats to slideshow rapper. All right, so for now, everything works perfectly. Now it's time to write little JavaScript, as I remember from Project Review. By default, we need to display banner, and when we click bottom, then banner should be hidden and slide show should be started. First of all, let's display back banner, get rid off display None. Then we need to hide slice, show rapper For that, we can use display none, but I'm going to create a fade effect, therefore less use here. Opacity zero and his ability he did. And also we need to do one more. Think we have to get back black background. All right, let's open after Js file. We need to create click event. So at first, select Button Element right document dot query selector inside parenthesis. Select button right banner button, then attached to it. Event Listener Right at event Listener Defying Click Event and also means a few aero function. So on Click we need to hide banner using display. None. Let's select banner right document Dr Query selector and he's a few class named banner that use style property with display, which should be equal to Not Next. On Click we need to display slideshow rapper, so let's select it right documents dot query selector and indicate here fast names like Show Rapper that use style and also the property called CSS text because we need to change multiple properties in order to display Rapper, we need to write capacity with the value one and also visibility visible. All right, let's click bottom and you see that it works. Banner is hidden and slight show is displayed, but without any faith effect. It happens because we need to use transition. So let's go to style that ceases file and a signed to slideshow rapper Transition with Value opacity one second. So now it works. We have here fate effect. And actually everything seems to be working Fine. Except one thing. I won't slide show to be working. Not always but after clicking. But so instead of using animation property in CSS file, we need to assign 18 slideshow from JavaScript. So let's grab this property, then go to Abdel Js file. Select slideshow Right documents, not query selector. Instant here. Class name, slideshow, then right style event. Insert your animation property with its value. Let's change your Centex. We need to use equal sign instead of column, and also that's enclosed value with quotes. All right, let's click, and now everything works perfectly. Actually, we can say that our project is almost finished as usually we need to make it full of responsive on different screen sizes. So for that, let's move on to the next lecture 33. Slideshow - Make Project Responsive: OK. Only thing that is left to do in this project is to make it responsive on different screen sizes. Actually, it will be a simple because we don't have lots of elements in the project. Let's open inspector and turned on responsive mode. So the first break point on which we need to make some changes is about 1000 pixels. As the sea heading spawn sizes bigger, so we need to decrease it. Let's create CSS media query as a marks with indicate 1000 pixels than select heading right banner H one and decrease phone size. Make it eight pieces. All right, so regarding banner, we don't need any other changes. Let's check slideshow so you see that it's looking good as well. Okay, let's go back to Banner and find another break point. So as the sea when we make window smaller again, size of heading and also button are bigger as a second break point. Let's define 650 peaks is so create new media and right Max with 650 pixels, Select again heading right banner H one and change phone size. Make it 40 pixels, so heading is ready. But as we said we need to decrease size off button as well. So that selected right banner bottom. At first, let's change with Make it 100 and 80 pixels that decrease parting right Seven Peaks is and set phone size as 20 pixels. All right, so on that break point banner is looking good and actually with banner were done because it's responsive on all screen sizes. Let's check again. Slideshow. As you see, we have to make here some changes. We have two degrees with of content, and also we need to decrease phone size for heading in paragraph. So let's select content that change with Make it 300 pixels, then select heading elements right content. Age three. Make phone size 30 pixels and also did the same for paragraph selected and set phone size as 15 Peaks is all right. So slideshow is looking good as well on smaller screen size. And like banner, it's fully responsive on all screen sizes. Okay, that's all about this project. We have finished working on it. I think that it's looking really nice. We created several cool effects, and I hope you enjoy this project. All right, let's move on to the next one 34. Project - Hamburger Menu - Overview: hello and welcome to our new project. I hope you're still with us and enjoying projects which are building throughout this course . Our next project is going to be hamburger Menu, in which you will learn about how to create some cool three D effects. Project consists of two parts. First part is banner, which you see on the screen we have here three d button. It's placed in the center, and when we hover on it, it's rotating and actually creates really beautiful effect. Besides button we have here logo and on the right side there is a menu like Banner itself has full screen background image. If we click on menu, I can. It will be transformed into acts. We will be navigated. The second part of our project, which is now for it, consists of two different parts we have here top now and bottom. Now, as you noticed, each of those parts has its own background By default. There, he'd, um, and when we click menu, I come there displaying from top and bottom size. Also, they create one full screen background image effect. All right, besides that, if we hover on now items you will say that we have here nice three D effects. This project will be based on HTML, CSS and JavaScript, and you will learn about how to create such type of three D effects. Project is going to be responsive on different screen sizes if we inspect the page and check it using responsive mode that you will find that both parts off projects are responsible. All right, I have created new folder on desktop called Hamburger Menu three D, in which we have files for HTML, CSS and JavaScript. And also we have here folder called Images, which includes images that we're going to use. Let's open this folder Envious code as usually in index, the esteem of file. We have basic structure off HTML documents. We have here some links for Formosan likens for Google phones and also for CSS and JavaScript files. All right, so we're ready to start building our new project. You just need to download source fast, which are attached to the lecture, and then move on to the next video 35. Hamburger Menu - HTML Markup: but right, Once we're prepared to our new project, it's time to create. First off, all H demon structure off project. So we have here basic HTML document. As remember from Project Review, it consists of two main parts. We will have banner with three D button and logo. As for second, part between consists of hamburger, menu navigation and social media sites. All right, let's go ahead and start creating markup. Those two parts will be wrapped by container. Let's open developments and assigned to eat class container. Next, we need to create banner so open and other development with class Venner. It will consist of two elements logo and button. Each of them will be wrapped by deep, so let's open 1st 1 assigned to each class logo and inserting it. Link elements which itself will wrap image in source. Attribute. Let's indicate part off image. We have images folder and then select logoed of PNG. All right, let's create second developments for bottom assigned to eat class BTM rapper and insert in it. But, um, element with close banner Bt again and with text explore more. All right, so that said what we have so far next I'm going to create second part. It's going to be enough bar that's open development and assigned to get close enough. Rapper first member off this part is going to be many. Aiken. Let's open developments in a scientific class name hamburger. Many I couldn't will consist of three lines, and they will be represented by developments. So let's create 1st 1 It will have two classes. 1st 1 for common styles, right line and 2nd 1 for individual styling. Right line one. Let's duplicate this line twice and change class names right? Two and three All right. Next, we should create two different navigations 1st 1 for menu items and 2nd 1 for social media icons. So let's create HTML five non elements and assigned to it class top enough. Actually, menu items will be represented by least element, so let's create you'il with close enough. At least then insert in it. Ally, I'm not going to assign to class because we won't use any styles for it. Now that elements will be followed by link. It should have class, not link, and also inside constant right hope. We will have five menu items, so let's duplicate Ally Element four times and change items. Let's right here about us. Next one will be our team, then services and for last item, right content. All right, so here we have first navigation. Let's move on and create 2nd 1 Open again enough elements. And now let's call it bought enough. Then create again Hugh Elements assigned to it class icons. So SB said in second Navigation will have social media icons. Let's insert here, Ally Element, which will have class name I could item. Then we need link elements with class name I can link and lastly, insert earphone. Awesome Aiken assigned to it closest F A B. If a Facebook F, we'll have four social media icons. So let's duplicate this line three times and change colossus rights for 2nd 1 YouTube, then Tweeter. And for last one, right bugle plus G. All right, that's all about HTML markup. We have created all the elements. Now it's time to start stalling them. At first we will create banner for that. Let's move on to the next lecture 36. Hamburger Menu - Style of Banner: all right, so we created structure of project. And as we said in previous lecture, we need to start working on Banner. Actually, before we do that, I think will be better. If we hide those two navigations for a while. I'm going to do that using a steamer attributes called Hidden. So that's a sign aides to both now elements. Okay, so as you see, they are hidden. Let's go ahead and open style dot CS is far principle as usually. Let's get rid off default margin and parting for all elements. Select them using asterisk and set margin and parting as zero. Then I'm going to set phone family for container. Let's select it, then write phone family. In this case, I'm going to use monster right sensory, so it means that all the elements inside container will inherit this fault. All right. Next we have to start working on Banner. Let's select this element. Define its width and height as a wit. Let's use 100% and then said height as 100% off beauty. Okay, so for Banner, we're going to have a full screen image as a background for that. Let's write background, then in here. L That's insert part off Image Select Image called Banner BG. Thought Jay Pek then defined position as centre and also use no repeat. Next thing regarding banner is to use background size, color. All right, so we have here full screen image as a background. It's looking good, but in order to make it better, I'm going to use linear radiant. Let's insert your black colors with different capacities, right? RGB a 000 capacity 00.7 and then again RGB a 000 0.8. All right, so now it looks much better and we have to move on and start styling experts logo. And then we should work on menu Ike. In this lecture, we will create just it's designed. As for its functionality, we will take you off that later. So let's select logo. First of all, define height and width, make both of them 80 pixels. So as the sea size of images still the same, it hasn't been decreased because we need to define the widow of image as 100%. In that case, it will inherit with off its parent owned, So let's select image right logo. I'm G and said it's with as 100%. So now the problem is fixed. Size off images decreased. All right now we need to take a year off. Position off logo. I'm going to use position peaks. We are using it because position fixed alone just to maintain logo at the same place while we scrolled the page. Let's move image little bit down from top edge and also to the right side for that right top with the value 20 pixels and left what started as 50 pieces. All right, so for now we are done with logo. Let's move on and work on menu Eichel. For now, it's not visible because it's created using empty developments and without content, they are not visible. That's select development, which has class, name, hamburger menu at first define its width and height. Set with as 35 pixels. As for height, right, 30 pieces. And in order to make element feasible, let's define his background caller for a while. Use white collar that, like logo defiance, position is fixed as well. We're going to place I can at the top right corner of page. So let's define help in the right positions in the following weight as a top position, right? 40 pixels. As for right, 50 pixels. So here we have menu. I come for now. It's not looking as a menu Aiken, but we will take care of that soon. Let's go ahead and create lines. Select them using common class line. Let's define a width and height for lines. Win it with equal to their parent elements with, I mean 35 pixels. So instead of defining it manually, we can use here Value called Inherit. That's for height. Let's set it as five pixels and then change background color. I'm going to use here called 16 c three cf. So, as you see, we have here lines, but they are stick to each other. We have to create some space between them, and also we need to get rid of that temporal white background color. So in order to create space between lines, I'm going to use flax books. Let's make hamburger menu flex container when it lies to be placed vertically in a column. So let's define flex direction as column and for creating space between lines used justify content space between and lastly, change course, the type making a point. All right, so here we have our lines. And actually I couldn't looking all of the good. I want to make them little bit rounded. And also, I think, will be nice if we decreased slightly height off, second line. So let's right here. Border radius with the value 25 pixels that select second line using cross name line to and said its height as three pixels. So now you see that I come is looking much better. All right. Before we finish this lecture, I'm going to align, but, um, perfectly in the center of banner. So let's elect its parent elements, which is beauty and rapper. Then define his position as absolute. And, as you know, for perfect centering, we need top position, 50% that left 50% as well and transform with translate and with the values minus 50% and again minus 50%. All right, so bottom is placed in the center. Let's stop here and move onto the next lecture in which formal style and transform this bottom into three D l. Let's go ahead 37. Hamburger Menu - Create 3D Button: Okay, So as be said in previous lecture in this video, we're going to style and also transform banner bottom into three D out. So I think it will be really interesting because you will be able to learn about some cool tricks and techniques using CSS. So let's get started. Select button Right Banner Beauty in at first assigned to eat some usual styles. Defined wit. Make it 350 pixels, then said Height as 100 pixels change background color. In this case, I'm going to use linear radiant as a first color insert. Year. 16 c. Three cf. As for 2nd 1 right, 156 469 So that's the way how our button is looking for now. It's really huge, but actually we need this. Let's go on and add some more styles. Get rid off default, border and outline, right border? None. Then I would like none. And then let's work all text change phone family in this guy's let's use phone called Slobo , 27 pixels, Sarif and increased phone size. Making 35 peaks is all right. Next, I'm going to make a veteran uppercase using tax transport, Upper case also create some space between them using letter spacing with the value of four pixels and then change Caller, make it white. Okay, so is the see. Step by step or buts, and it's getting nicer. Next, I'm going to add shadow to text. Let's write text Shadow and assigned to it values zero 10 pixels, 10 pixels again and call or black and also changed type. Of course. Er making a point. All right. At this point, with Barton styling were done. It's time to move on and start making 83 D Element. First of all, we need to create a three D environment for button, and for that we have to assign to its parent elements property called Perspective with Value 1000 pieces. As you see at this time, perspective, property doesn't have any effect on element. Now we need to rotate, but according to X and Z directions. So let's assigned to transform at its first rotated along X access means if your value 70 degrees so you see button is rotated. But besides X direction, we have to rotate it along the Z axis as well. So right? Rotate Z and insert argument. 30 degrees. All right, so that's the position which we want button to have by default. Now we need to give button shape off. Q. Boyd Actually, que boy is like you, but it has shape of rectangle. We're doing that in order to transform it into even more three D dealt. I would like to note that this is going to be not quite simple stuff. We will use some advanced things from CSS, so I recommend to be more concentrated and focused on things that were going to do. So we're going to achieve above mentioned using before and after Sudan elements. So let's select button with before pseudo element, then league content as empty. Define with as 100% and height as 15 pixels in order to make element visible. Let's assigned to eat background color and make it to read for a while for better demonstration. Also, we need to define its position because otherwise heightened with won't be applied to it. So right position absolute. So here is before super element. We need to change its position and place it somewhere here in front off bottle. So let's set bottom and also right positions as zero. So as the sea element has changed his position, but that's not what we want. Eventually, we need to rotate it along X axis by 90 degrees so right to transform rotate X and in severe 90 degrees. All right, so as you can see at this point, element is no longer visible. The reason is that it doesn't have its old three D environment because it is a child element off battle and it dozens inherit three D space for buttoned rapper. In order to achieve that in CSS, we have property called transform style, which should have value preserved three deep, and we have to assign eight to But so right transformed cell with value preserved three D. Okay, now element is displayed back, but we have here another problem by default origin off transform is center. In other words, you can imagine that X axis goes in the center of element. In this case, we don't want it. We want to make origin off transform. But actually, I know that this stuff is a little bit hard to understand. But that's the way how it works. If you have any trouble to understand, it will be better to test those things on your own. So right transport origin and assigned to its value. Bottom. All right, So that said what we wanted to get step by step. We're getting shape off Q boy for But now let's change background color. Let's use colors from linear Grady in combination. A copy of the 2nd 1 and pasted here. All right, now it looks much better. So, like front sight, we need the same on the right side. We have to create it using after City Element. Actually, we're going to need same properties, so that's duplicate this entire code and then change before into after. First of all, let's change position instead of possum. We need here top. So you see element end up behind button. We need to rotate it according to white access with value minus 90 degrees. So right here rotate Why minus 90 degrees. Now you can see where element has been ended up at a glance. It looks weight, but reason is that we need to change values of heightened with in case of after Syria element. We need to switch values for heightened with for with win it 15 pixels and for height 100% . So now we're almost there. The only thing that have to do is the change origin off transform in this case instead of bottom, we need to make origin. Right? All right. So finally we got here. Needed shape. Last thing regarding its style is to change background color off after pseudo element in this guy's let's grab first color from linear Grady int. And it's I need to after city elements. Okay, that's it about button. Now we need to make it working. I mean, we need to create hover effect on hover. I'm going to rotate it along X and Z excess. So right, banner bot n with Hohler. Then we need transform. Rotate X with the value 30 degrees s fault rotates seat We need here to insert zero degrees and for smooth effect used transition, right dress for with duration 0.5 seconds. All right, let's hover. And you see that we have here really awesome effect. And I hope you like it. Actually, I want to say again that this wasn't simple stuff. It's kind off advanced things from CSS. I tried to explain, but if you still have any trouble in understanding it. Then I recommend to re watch the video test things on your own. And also you can post your questions in Q A section and we will try to help. All right, that's it. See you in the next video. 38. Hamburger Menu - Layout of Top Nav: all right, we have finished working a banner in previous lecture, and it's time to move on and start styling and creating some cool through the effects on second part of our project. In this video, we're going to start helping navigation for now, both navigations air heating from HTML. So it first, let's display top enough, get rid off hidden from here. And also we need to hide banner for a while. So that's a sign to eat. Attribute. Heating. Actually, we could leave banner as feasible, but I want you to be more concentrated on navigation at this time. All right, so here we have top enough, just pure HTML. Let's go ahead and start styling it. Select top enough. First of all, let's define this height and weeds, right height as 15 view put height and with as 100% then change background in you Earl Select image called enough dg dot jpeg, then right, No repeat. And now we need to define position off background. First, we need to define X axis. In this case, when it acts access to go in the center, I mean for horizontal direction, we need position to be center For that, we have to write 50%. As for white access, right zero, because I won't image to start displaying from top edge off navigation. Actually, why do we use here? Zero will be clear when we create second navigation. All right, let's go one. We need to your background size with value cover and also at Linear Grady Int. Let's use here. Black color, right? RGB a 000 No passage 0.8. No. Then again, right, Aren't you be a 000 0.8? All right, so that's the way how navigation is looking for now, let's define its position as fixed and also set top position as zero now, as the sea hamburger menu is hidden. Actually, you may wonder why it's happened because both elements have position fix. The reason is that HTML document top Enough is placed after hamburger menu, and it gives higher precedence to talking up in order to make Aiken visible. Let's manipulate on using the index property assigned to hamburger menu. The index with higher value let's 100 and also define the index for top love with lower value, for example, 50. All right, so for now, problem is fixed. Let's go ahead and start styling navigation items. Select you Element, which has class name novelist at 1st 4 demonstration. Let's give it background color. Right seat seat C. Then get rid off default bullets from list items using least style. None defined with us 80% and plays least in the centre using marching photo. All right, so now we have to define height for least actually, when it hides equal to least parent elements height, I mean height off top now, which is 15 VH. So instead of defining it manually, we can use inherit now. As you can see, it takes full height available inside, topping up All right. Next I'm going to place items horizontally in a row. And for that, as you guessed, we have to use display flex. So as you can see, they're placing a role. But we need some space between items. And besides that, I'm going to place them vertically in the center. For that, we have to use justify content space evenly and a line items with the values center. Okay, so with layout, we are done. It's time to style individual navigation items. And also we're going to create some three D effects for that. Let's take a little break here and move on to the next election. 39. Hamburger Menu - Create 3D Navigation Items: all right once we managed layout off top navigation. Now we have to style individual navigation items, and then we will create three D effects on hover using some sees the tricks. Let's go ahead and select nav link. At first, let's get rid off default styles from link using text decoration. None. Then change its phone family in this guys, I'm going to use phone called slab Oh 27 pixels. Sarif that increased phone size. Make it 30 pixels. Transform text into uppercase that change color. Use your call or C C C and then define background color as black. All right, so that's the way how items are looking for now. Let's create some space between letters using letter spacing one pixel and create potting on top and bottom right, five pixels and then 10 pixels on left and right sides. All right, for now we're done with Now Link. It's time to start creating some three D effects for that We have to use after suit element , so let's select novel ing with after super Element as a continent, we need to insert text off each navigation item. We can do that manually by using F child selector, but I have a better solution for that. As a value off content property, we can insert the value off HTML attribute. In this case, let's add to each link element attributes called day to text and assigned to them proper values. For first want, we need hope. Then write about us. Next one is going to be a war team that we have services and for last one right conflict. After that, as a value off content, we need to instant method called attribute with arguments day to text. So as the sea after each navigation item, we have appropriate content. Next we need to define position for them. I'm going to place them down below at the bottom of items. So let's define position as absolute that in order to manage layout according to Link Element, Link Element is a parent element to you that's assigned to read position relative, then set left as zero for after pseudo element and also bottom as minus 100% and also, in order to make contact visible. Let's define background color and make it black. So is this. See elements are placed at the bottom. Actually, you can notice that all the properties which refer to text I mean phone, family, phone size, tax transform and so one are inherited from parents out. As for elements box properties like parting, it's not inherited. So we need to set it manually, right? Padding inherit. All right, now we see that we have to similar elements here. Let's change color off after CDO element. I'm going to use your color 16 c three cf. So now everything is ready to start creating three D effect. Let me explain what were going to do on hover after pseudo element will be rotated and placed under item. And instead of content of item, it will be displayed with cool three D effect. All right, First of all, let's prepare three D space for item and for after pseudo element as well. For that, we need to select ally elements right now at least, well, I and assigned to it property called perspective with the value of 500 pieces. After that, in order to create three D space for after super element we need to assign to its parent, I'm until link element property called transform style, with the value preserved three d and now, in order to place after Syria, element under item, we need to rotate it along X excess by minus 90 degrees. So right transform rotate X and in answer to your value minus 90 degrees. So, as you can see, elements are placed down below but far from items. It happens because origin off transform is center and they are rotated according to that. So we need to change, transform origin and make it top. Now the problem is fixed after see the element is ended up under item. All right now we have to create hover effects. Let's select novel ing with hover so on hover. We need to rotate item along X axis by 90 degrees. So right transform rotate X And he's a few value 90 degrees, also assigned to link transition property with the value stressful and with duration 0.3 seconds. So if we hover, then you will see that nothing happens here. And actually reason is that by default, link is an in line element, and two in line elements transform. Property is not replied, so we need to make link element as a block level elements, and for that we have to assign to eat display block now, however, and you see that elements are rotated. But actually that's not what we wanted to get in. This guy's element is changing its position because once again, origin off transform is center and we have to make it top. So that's right. Fastball origin with value top. Let's hover again and you see that everything works perfectly. We have here cool three D effect, all right. Before we finish this lecture, let's get rid off this light gray background from now, at least let's related. Now everything seems to be fine. We have finished working on top navigation. Next, we need to move on to second part. I'm into bottom navigation. And for that, let's move on to the next lecture. 40. Hamburger Menu - Layout of Bottom Nav: all right. In the last video, we finished working with first part. I mean, with top navigation. We created some cool three D effects with navigation items and now we have to move on to bottom navigation. At this time. As remember, it's hidden from HTML document. So first of all, we need to display it. Let's get rid of heat and a tribute from here. So for now, social media icons are still not visible because they ended up behind topping up. The reason is that top now has positioned fixed. We will take care off that soon before that night's at some stars to bottom now selected right bottom Now, first of all, define width and height as a with right 100%. As for height, I'm going to use 85 VH. I think he already got Why do we use this value here? Top navigation has height. 15 VH overall containers Hide is 100 VH. So, in order to cover entire page, we used to year 85 pH All right, next minute to set image as a background, and I'm going to grab background property with its values from top now also, background size property Let's paste them here. So we need those values except last one, because we need to make those two backgrounds as one background image. So for top enough background image, we defined position off white access as zero. It means that part off images not hidden outside of page, and it's starting from top height of top. Enough is 15 VH. So for bottom navigations background image, we need position off white access as minus 15 VH. It means that from 0 to 15 VH first background image will be displayed from 15 VH 200 VH. Second background image will be displayed, and eventually they will create together the fact off one background image. I hope that it makes sense to you. Actually, if you take a look here, you will see that still, we don't have mashing effect because we need to define position off bottom. Now let's make it fixed and also defined bottom position as zero. So now problem is fixed than we have here. One whole background image effect. All right, let's move on and work on icons in order to make them visible. Let's change color and phone size select. I can link, then I element change color, make it white and also increased phone size. Make it 60 pixels. So now they are visible. And next I'm going to take a year off their layout. I want to place them perfectly in the center inside bottom now. So let's elect you elements, which has class name icons assigned to eat position. Absolute. Actually, this element will be positioned according to its parent element. I mean bottom now because it already has set position as fixed that in order to center Aiken, let's use again following properties when it top 50%. That left again 50%. And also we need to press for with translate and with arguments minus 50% and minus 50%. All right, so I consider placed in the centre. Next, we need to place them horizontally in a row. I'm going to do that using flax spokes, but before that, let's get rid off default bullets from list items, right least style none, and then use this plight flex so as the sea elements are placed horizontally in a row, next I'm going to define with off least, and also I want to create some space between icons so right with and make it 60%. And for creating space. Use justified content with a value space between All right, that's all about layout of icons. We are ready to start selling them and also creating some more cool effects again. So see you in the next video. 41. Hamburger Menu - Prepare Social Media Icons: Okay, So after placing social media icons in the right way, it's time to start styling and preparing them for some nice three D effects. At first we need to give some stuffs to link Element, which actually wraps phone. Awesome, Michael, So select. I can link. First of all, let's define its width and height. We need for both of them 200 pixels and also create border assigned to it values eight pixels solid and the color white. So, as you can see, icons are not surrounded by border. And it happens because, as with other dimension for several times by default, Link element is an in line out and two in line elements within height. Properties are not applied, so that's assigned to it. Display block. Now we have different result. All the properties are applied, and, as you see social media icons ended up at the top left corner off Lincoln. I'm going to place them in the center, and for that, one of the best solutions is to make a link element flex container and use some flex books properties. So let's change block into flex, and in order to place I causing the center use, justify content center and a line items center, and also in order to get rid off default styles. Let's use text decoration with the value. Not all right, so no, everything seems to be okay. Last thing regarding of ink element is to make its corners little bit around it. So let's use for the radius with the value of five pieces. Okay, with link element, we're done. Let's move on to Aiken itself. We have already selected it. I can have two styles, Caldor and phone size. And next I'm going to define width and height for it, right with an assigned to it 150 pieces and then height right there. Game 150 pieces and also changed background color. Use your 555 So that's the way how I can start looking for now. After increasing height and width, they ended up at the top left corner off box. So we need to place that perfectly in the center. And for that again, let's use flex books. It's kind of different situation in general. We used flax books when we want to ally child elements inside container, but besides that, you are able to use flex books in order to manipulate on content off element. Actually, we need to your same properties which were useful link. So let's grab them and paste you. So now content of Aiken is placed in the centre and last things regarding icons is to create border and also shadow. So that's assigned to eat border with the values three pixels, solid and white collar and then create shadow. We need here text shadow with the following values right. Zero that 10 pixels, 20 pixels and as a collar right are to be a 0.5. All right, that's it about icons. Next, I want to create something like access. Later along this Axis link and I elements will be rotating and they will create three D effects and going to create access using before and after suit elements. So let's select. I can link with before then make content empty set hide and with, as I hide we did 30 picks is asked for with let's assign to it. Five picks is then set background color as white. Next, we need to set position as absolute because for now, without eight element won't be visible and, lastly, defiant opposition as zero. So here we have half part of access we need to create same down below. Let's do that using after super element actual. Win it the same properties. So let's duplicate this entire code and then make some changes he set up before right after . And then we need to change top position into bottom. All right, that's its access is created. And actually, icons are prepared to build some nice three D effects for that. Let's move on to the next lecture. 42. Hamburger Menu - Create 3D Effect with Social Icons: okay, we're ready to create another three D effect with social media icons. When we over on them. I won't. I consent link elements to be rotated with opposite directions, and also I'm going to change background colors for that. So first of all, we need to create three D environment for those elements. For that, let's select a light element, which has class name I can item and assigned to each perspective with the value 1000 pieces . Besides that, in order to create three D space for child elements, as you already know, we have to use another property called transform Style, and we have to assign it to I can link so right transport style with the value preserved. Three D. As you see we have here little problem with after and before see the elements because off three D environment, it seems that their sizes increased in order to fix that, let's just decrease Hide off those elements instead of 30 pixels, right? 25 pieces. All right, so everything is ready and now it's empty. Create homer effect. Let's select at first link element with color, so on hover I'm going to rotate link along. Why access I mean vertically by 35 degrees. So writes transform, rotate why? And as I value right, 35 degrees and also for smooth effect. Let's use transition with the values transform and 0.5 seconds. So when we hover, you see that element is rotated nicely. That's what we wanted for Link. As for I can. I'm going to rotate it with opposite direction by same degree. So let's select. I can link at Holler and then select I. Then we need transform. Rotate. Why? So you may think that we need here. Same amount of degrees, I mean minus 35 degrees. But it's not going to work in the right way because we need to take into account a rotation off think element. I mean, when we rotate, Link Icon is followed and it's rotated as well. So instead, off minus 35 degrees. We need here minus 70 degrees. In order to compensate. Degree off link rotation makes sense. All right, let's use again. Transition, right. Oh, 0.5 seconds. I'm using here all because besides transform, we're going to use another property. At first, let's check what we have. So when we hover, you see that both elements are rotating with opposite directions and actually creates nice three D effect. We're not done here because we want to add some more effects. At first, I'm going to change directions off text shadow dynamically on hover. Let's copy it from here and as a first value instead of zero right. 10 pixels. As you know, first, Value Llosa's to create shadow on the right side of. So when we hover again, you see that Shadow is moving nicely according to Rotation off Element, and it creates more dynamic effect. All right, the only thing that we have to do is to change background colors for icons, hover in order to make this effect nicer. I'm going to use after super element. So that's right. I can link I after that, make its content empty, said height and width as 100% and inside to eat temporal big grown color. Let's say Rhett, in order to make element visible, let's define its position as absolute, and also in order to align element according to its parent, Let's assign to I element position morality. So here we have after pseudo elements and let me explain what were going to do here by default, we will place after pseudo element outside of I element I mean somewhere here and then when we hover, it will be moved down and will become background off. I'll so let's define position off after see the element in the following way, we need top position with a value minus 130% and then the right position with the same value we use here. Such big values because we want to place shapes outside of I element. So as the sea position of element has changed its placed outside of I element and in order to make effect nicer, I want to change shape of element and make it circle. And then I will give back shape of square to eat on hover. So let's use for the radius with the value 100%. So now shape of after cedar element is circle and we need to create over effect. Let's select. I can link with hover and then right eye with after city element. In order to place element as a background, we need to define positions as top zero and right zero also on hover. We don't need shape of circle anymore. So right for the radius with value zero and lastly, used transition with the values all and 0.3 seconds. Let's hover and you see that element is moving. But we have here a little problem. It covers social media Aiken. So in order to fix that, we have to use Z index property with lower value, Let's say, minus one. All right now, everything works perfectly. Last thing that we're going to do is to remove red color and instead of that, use original social media colors. Let's get rid off background color from here, then select after City Element for first Aiken. For that, we have to write the following, but I can item and use your selector called F Child for first element we need to use if you want. So now we selected first Ally Element and in order to access on after suitor element off first cycle, we have to write I can link and then I elements with after pseudo and then assigned to the proper brake on color. First social media icon is for Facebook. So right. Three B five, 999 Let's duplicate this coat three times changed numbers a year, right to three and four, and then change colors for 2nd 1 Right? See the 201 F that we need 55 a c e. And for last one, right D d for B three night. So as a see, colors are changed, each icon has its original background. The last thing is to hide those shapes. For that we have to use overflow. Heated. All right, so everything works fine. We created several nights effects and actually with social media icons were done. Next, I'm going to make hamburger menu working. Actually, it will follow us to navigate from banner to number and then back. Okay, let's do it in the next lecture. 43. Hamburger Menu - Make Hamburger Menu Work: all right, so in this lecture, we're going to make hamburger, Many working. We will do a couple of things when we click menu. I can. It should be transformed into X, and also it will have underlying. Then, by default, we will display Banner. And when we click Aiken, it will become hidden and now, but will be displayed with nice effect. So that's all about what we're going to do. In order to create click event, we will use a little bit off job. All right. First of all, let's transform Menu Icon into X. For that, we need to rotate lines with different directions. Let's select line first. Using class name line one first line should be rotated along Z axis by minus 45 degrees. So right, transform that used rotate, see and insert your arguments minus 45 degrees. So is this. The line is rotated, but actually that's not what we wanted by develop its rotated according to Transform Origin Center. And in this case, when its origin to be right, so right transform origin and make it too right. So after that, Z axis will go to the right side off line instead of center and line will be positioned in the right way. So as the seat, no problem. It speaks. All right, let's go ahead and move on to line three e. I'm not going to Stella line to yet, because at first I'm going to create X. I think it will make more sense, So let's select Line three regarding Line three. We need to rotate it along the axis as well, but with opposite direction. So we need to hear the same style. Let's grab it from line one and just change minus 45 degrees into 45 degrees. All right, so here we have X, and now it's empty. Move on to line number two. Actually, we have already selected it, but we need to select it once again because we have to adhere some other class, which you will see soon. Actually, lying to you will be moved down below. I mean, it should be underlying for X. So, in case of lying to, we need to transform with translate for X direction. We need here five pixels. It's well, hello us to center line. As for vertical movement, that's right. 20 pieces. All right, that's it about Menu Aiken. We have transformed it into X, but actually, we need this to happen when we click that like, in order to achieve that, I'm going to use JavaScript. We need to add two lines class, which for now doesn't exist. And then we will add this class to not rapper on Click. So let's add it to those lines. Cross and call it change. So you see, we don't have here X anymore. Let's open Apple Js file and select many Aiken right documents dot query selector and instead he Rick last name Hamburger Menu than attached to it. Event Listener. Right at even listener. We need to your click events and then pero function. So as we said when we click, I can. We need to add it to enough rapper class change. Actually, no rapper is a parent element for Aiken and also for both navigations. So let's select it right documents that query selector and instead, hyuk Last name, not rapper. When we click Aiken, we need to add class, and when we click again, we need this class to be removed. In order to achieve that in JavaScript, we have method called Tuggle, as its name suggests this method. Hello says to add class on first event and then remove eight on next one. Before that, I'm going to use property called Class least which Ritter's existing fusses off enough rapper. And also it has access on different building methods like Add, Remove, Tuggle and so on. In this case, we need Tuggle and that he's a few class name change. So when we click, you see that Aiken is transforming into X and then on another click, it gets back its default shape in order to make this change nicer. Let's at transition to line. We need here. Try us for and duration 0.5 seconds. All right, now it looks much better. And next we have to work on navigating from banner to Knopper and then back. First of all, let's get rid off. He didn't attribute from HTML. Next, we need to hide both navigations. 1st 1 will be heating up. As for 2nd 1 will hide it down below. For now for top. Now we have position top at zero. Actually, it's height is 15 p. H. So we need to move it up by 15 VH. So as a value of top position. We need to right here, minus 15 VH, then saying we need for bottom enough As you know, it's height is 85 VH. So as a bottom position, we need minus 85 VH. All right, so now both navigations are heating and we see here banner as we said, we need to display them when we click Menu Aiken. So on Click we need to make their top and bottom positions as zero, and we will achieve that again using class name change. So we need to write change. It's hope enough, and we need to make its top position at zero. Then, for bottom love, we need change, but enough and bottom position as zero as well. Besides that, we need transitions for both navigations. So for top now, right transition with values top 0.4 seconds. And for bottom navigation, we need transition bottom 0.4 seconds. So let's click, and you see that everything works fine. Now for is appearing with cool effect. The only thing that we have to do it to keep logo displaying, and we can do that using Z Index property. So let's assign to logo, the index with higher value. Let's 100. All right now. Everything works perfectly. Actually, we have finished working on styles of project and also on three D effects. The only thing that we have to do is to make project responsive on different screen sizes, and for that let's move on to the next video. 44. Hamburger Menu - Make Project Responsive - Part 1: all right, As I promise in the last video, After working on styles and three D effects, we have to make our project responsive on different screen sizes. So let's inspect the page and switch window into responsible first break point on which second part off project I mean now part needs some changes is about 1600 pixels as the sea . After this break point, I considered getting too close to each other, so we need to do here something. Let's create first CSS media query indicate Marks with as 1600 peaks is in order to fix that problem, I'm going to increase with off least elements by default, as the sea with off icons is 60%. So let's select this element, right icons and increase weeds make it 80%. So on that break point, we don't have any other issues until with a window becomes less than 1200 pieces after that , as the sea backgrounds of navigations are getting messed up. So on the break point, I'm going to change background color off top enough. Let's create new media query as a marks with right 1200 pixels that select hope enough and change background color. Let's use your collar. 010101 Next, we need to work on navigation items. So let's select least Element, which has class name now. Police. For now, it has said, justify contents, property as space evenly. And now let's make it center. Also, I think we need to decrease phone size of items, so select a novel ing and set phone size as 25 pieces. All right, so top enough looks good. Let's move on and work on bottom Enough on that screen size, it's time to wrap the icons. At first, let's decrease their wits. So select, Aiken's said, with US 70%. And then, in order to rob elements, I'm going to use flex books, property flex rep with the value or up so as the sea elements erupt, but we need to scent of them for that. Let's use a line content with values center and justify content with the same value. All right, so we lay out. Everything seems to be okay, I think would be better if we decrease size of elements and also create some space between that, let's select Eichel, Link said width and height as 180 pixels and then, in order to make some space between them, use margin with the value 20 pieces. All right, so wrapping off elements is going well. We have space between them, but we need to take a year off social icons because they're not looking good. We need to decrease their sizes well. So select ICA Link. Then I element decrease within height, make both of them 130 pieces and also change phone size. Said it as 40 pieces. All right, so on the break point, everything seems to be working perfectly. Let's go. What? I didn't find the next one as the sea After 900 peaks us again, we need to make some changes. Besides now BAR, I think, will be better if we decrease size off banner button. So let's create new media query with Max Wits 900 pieces Select banner bot n Decrease, Width and height for with I'm going to use value 300 pieces. As for height, that's right here. 80 pixels and then change phone size. Making 30 pieces okay with banner were time. Let's take a look at number. As you see we have here Some problems with top navigation. We need to wrap knave items here a spot before that. Let's increase height off it. So Select Top Enough said its height as 25 the age and also we need to change value off top position because for both properties, we need sent values. So right top on a scientific minus 25 th so height of top enough is increased. But now items are placed little bit down, and actually it doesn't look good. Before we fix that problem, let's change height off bottom now as well. Let's select it, then set height as 75 the age and also like top melt. We need to do the same with bottom position that's assigned to eat minus 75. You put height all right now, As you see, we have better results. Let's go ahead and work on, not items. Select not the least. Decrease its with and make it 70% and also on the screen size when it items to be wrapped. So use your flex rap with the value up, so items are reupped. But as you see, we have here big space between them in order to fix that. I'm going to place them vertically in the center. For that. Let's use a line content with values center. Now it looks better. Next, I'm going to create some space on top and bottom off items, so select nav link and right margin on top and bottom. We need three pixels and zero on the left and right sides. Now it looks better. All right, that's all about top navigation. Let's go. I had in the work on 2nd 1 I'm going to decrease lightly sighs of Social Aiken's actually when it here to use same properties, which we used in previous break point. So let's grab them and then make some changes as a with off icons less right, 95% then decrease. Heightened wits make them 140 pixels. As for margin, we don't need to change its value, so let's get rid of it at all. As for Aiken's, let's make their wits and height as 90 pixels and lastly, changed phone size make it 30 pieces. Okay, so everything works and looks perfectly, and on that break point, we don't need any more changes. Let's stop here, take a little break and continue making project responsive on other screen sizes in the next election, 45. Hamburger Menu - Make Project Responsive - Part 2: all right, let's continue making Project Responsive. We have done it on several break points. Last one was 900 pixels. Let's make window smaller and find next break point. So as the sea after 750 pixels, project needs some changes. So let's create new CSS media query and indicate Marks with as 750 Peaks is on the break point when it's decreased slightly with off novelist. So let's select it right now at least and said with as 60%. Also, I think will be better if we make social. I consulted with smaller Let's copy this code from here that decrease within height off. I can link right here 120 pixels and do the same for I element Change with and Hide as Seven Peaks is. As for phone size, we don't need to change it, so let's get rid of it from here. All right, so for now everything looks good. Let's make windows smaller after about 550 pixels. Now, bar is not looking quite good, and also, if we check banner, you will find that would be better to decrease size off button and also logo so create new break point with Max, with 550 pixels that select banner DTN change its with and make it 280 pixels. Then send height as 70 pixels and for a phone size right, 25 pixels. So button is looking good. Let's select a logo, decrease its within height, make both of them seven pieces. So as you can see, size of logo is decreased. It became smaller, but I think will be better if we place it a little bit on the left side. For now, left position is satis 50 pixels. So let's go ahead and decrease it, right? Left with value 30 pieces. Now you agree that it looks better. All right. Next, I'm going to increase height off top now. Therefore, after that, we will need to decrease height of bottom navigation. So let's go ahead and grab this code from here. Then change 25 VH into 30 VH for height. As for top position when it year minus 30 VH and for boats Enough right height. 70 VH. As for bottom position, right minus 70 VH. All right, so with top now we're done. Let's decrease size of icons grab again code from previous break point and change values and following weight for leak elements. We need width and height as 110 pixels. As for I Element, let's change those values and right 60 pieces. So on the break point we have finished working. I think we don't need any other changes. Let's make browser smaller. So after about 450 pixels again, Project needs some change. Actually, it's going to be the last break point. So let's create new media than indicate marks with as 450 pixels at first. Let's make Bonner button smaller. Let's copy this code and change values for width and height, right, 260 pixels and therefore height 60 pieces. As for phone size, I'm going to leave it as it is. So let's remove this light so banner is looking perfectly and it's already responsive on all screen sizes. Let's move on to not far here. We need to increase height of top navigation and decrease height off bottom number. Accordingly, let's again copy code from previous break point Change values right? 35 VH that minus 35 we age As for partum navigation, we need 65 the age and then minus 65 b age, all right. As the see no items are too close to logo. So it's decrease with off Novelist selected right now at least, and make its with 50%. All right, so we actually finished making Project Responsive. It's responsive until 360 pixels devices with less, with Israeli rarely used today. So I'm not going to create another break point for smaller screen size. So we have finished working on the project. I'm sure it was interesting because we create several cool three D effects and I hope you liked it. Let's move on to the next project, which is going to be more interesting, and you will learn about lots of cool stuff in CSS. So let's go ahead 46. Project - Cube - Overview: hi and welcome to our new project. So finally, it's time to build the most interesting and actually the most advanced project in this course. We're going to start building three d slideshow, which will be represented by Cube. And here we see on the screen behind the Cube, there is full screen background image and also don't below. We have nice shadow effect. Cuba has images on all four sides. Also on left and right sides. We have controls. I mean those little arrows. When we hover on them, Cuba is slightly rotated. But when we click on them that slide show. So it's working as the sea coupe is splitting three parts, they're moving separately with little intervals. And actually it creates really nice effect. Besides that, we have here down below another control which allows us to make cube working automatically . And also we're able to pose slideshow by clicking it. All right, so that's the way how our cube is working in this project. We're going to use HTML, CSS and JavaScript. Actually, to be more precise, we will use some advanced stop from CSS, so you should be more focused and concentrated because it won't be quite simple. Also west. We said we will use JavaScript, and in this case, it will be much more than it was in previous projects. Okay, so on desktop, I have created new folder called Cube, in which we have files for HTML, CSS and JavaScript. Also, we have folder here for our images. Let's open this bowler envious coat. Like previous projects in index dot html file, I have inserted some basic structure off HTML document with some usual links. All right, let's download source files, which, as always, are attached to this lecture and start building our new project. So see you in the next video. 47. Cube - HTML Markup: Okay, so it's time to start building our coop. In this lecture. I'm going to create HTM a structure off our project. So, as remember from Project Review, Cube consists of three parts. They are similar to each other, and besides that, we have controls arose on the left and right sides and also play pose button down below. Let's go ahead and create those elements. They will be reupped by developments, which should be container. So it's opening and a science class container. Next we need and other developments which will be used to create a three D environment for cube. That's a sign tooth class view boat. Okay, so now it's time to start. Creating Cube itself, as beside it will consist of three parts. So let's create 1st 1 open development and a scientist to classes. 1st 1 is going to be for coma styles, right cube, and also I signed to it. 2nd 1 for individual styling. That's a cube one, so each cube will consist of six parts. I mean front, back, top, bottom, left and right, and each part will be represented by Deep aunt. So inside coop, we need to open development. It will have two classes. 1st 1 for coma styles. Let's a face and 2nd 1 for its individual styling that's right year front. And also, in order to make working process more convenient and simpler as a constant. That's insert here front as well. So s percent. We will need six parts. Let's duplicate development five times and change class names and also constant for 2nd 1 right back that next one will be top that bottom. Then we need left. And for last one, right? Right. Okay, Next minute to duplicate entire cube twice and just change individual class names. Right? Cube, too. And Cuba three. All right, so market for Coop is ready. Now it's time to create controls for that. I'm going to use for awesome Michaels at first create a role for the left side. I'm going to insert it before Cube, So let's open development. It should have two classes. 1st 1 is going to be for common styling, right control and for individual styles assigned to it left arrow inside developments I'm going to insert for also Michael. So it's open I elements which should have classes, have a s a Pero left all right. We need similar arrow on the right side. So let's copy entire development and pasted after coops. Then change class names 40 and four elements we need to you. Right. So here we have arrows. And the last thing that I want to do in this video is to create last control. I mean, play post bottom. So let's duplicate these developments, then, as a second class name insert here, play post and also for phone. Awesome. Aiken, Right class as have a play. All right, so that's it about html markup. All the elements are created. And in order to start building up Cube, let's move on to the next lecture. 48. Cube - Style - Part 1: All right, so in the last video, we have prepared basic structure of our project, and now we have to move on and start building three D Cube in order to make working process more convenient. At first we will build one part off our Cube. So let's comment Cube two and Q three out for a while. Also, we don't need those controls at this time, so let's comment them out as well. All right, First of all, as always, let's define common styles for all elements. I mean, let's get rid off default margin parting select albums using as the risk and set margin and potting as zero. Next, I'm going to set as a background off container, full screen image, so select container. First of all, let's define height and width as a hide. I'm going to use 100 b age. Does that define a with make it 100% and then we need background. I'm going to use your linear Grady int. You see, er, black colors right are to be a 000 capacity 0.6 and then again, aren't you be a 000 well past the 2.8 next Let's insert here you are out Select image BG dot jp g and that we need to use here. Value no repeat. Lastly, let's make back our own size. That's cover, All right. So, as you see, we have here full screen background and now I'm going to work on view port. I'm in the element which we created in order to build three D environment for Cube. So let's select this element right view port. First of all, let's define with and height as a with I'm going to use 40 to view, but with it means that with off, this element should be 42% off viewpoint with. As for height, let's use here 21 we put with Actually we're using here view, but with for height is well because it will hello us to make Cuba responsive. In very flexible Wait. Those two properties will be connected to each other. For example, if with a view port is decreased, then size of height will be decreased accordingly. In order to see it clearly, let's give to view port background color make it white than Inspector page switch responsible. So if we make, we know smaller Then you will see that width and height off you. Port Arctic raising accordingly. So that was the main goal. Why? We used viewpoint with for width and height as a measurement unit. All right, Next one is a sensor Vieux Port. Perfect meat. Let's do that. Using positions and transform, make position Absolute. Then defined top and left properties and assigned to them 50% and lost Lewin It transform with translate and with arguments minus 50% and again minus 50%. So is the sea element is placed in the centre. And last thing regarding Vieux port is that we have to create three D space for Cuba. For that as remember, we need to use property called perspective with the value 1300 pixels. All right, so we created through the space. Actually, for now, nothing is changed here. But when we started rotating elements, it will be done in three D environment. So that's what perspective property can manage. Next, we need to work on cube itself. Selected using common class name cube at first define its with as 100% In general, each cube should take up 1/3 of view port because we will have three cubes. So as I height, let's right. 33 point and right here several threes. I'm using this value to divide 100%. I mean entire height of you put equally by three. All right. Next, let's define background color. Make it light grey using seat C. C. So that's the way how Cuba is looking at this time. Next thing that I'm going to do is to create three D space for view ports, child elements as well. For that, as you know, we need to use property called transform style with the value preserved. Three D. All right, for now, we're done with Cube, and we need to work on its different parts. I mean, front, back, left, right, and so on. First of all, I'm going to give some common stars to all those parts. They have common class name face. Let's define its width and height as 100%. Then change background color. Make it red for a walk. So you see how they look size off. Each part is increased and some of them are placed outside of Cuba. Let's define their position as absolute, and also in order to manage layout off each part according to their parent element. I mean, according to Cube, that's assigned to it position relative. So as you can see, elements of jumped out from normal flow and they take up same spot in Cuba. All right, that's it for now. Next, we need to define positions for each part off Cube and let's do it in the next video. 49. Cube - Style - Part 2: all right. Once we have prepared a three D environment for Coop now it's time to start building up it . I mean, we have to place parts of Cuba on their positions in three D space. First of all, I'm going to get rid off background color from View port. So let's remote this light. Let's start from for inside select this element using crossed in front. We need to move this face from Santa to front, and in order to do that, we need to translate this element along Z excess. So let's write transport that translates. See, actually, if we instant here positive value, that it will move element close to user and the opposite will happen in case off negative value. So as a value we need to insert here 21 viewpoint with. So let me explain, Why do we use here? This value by default face is placed in the centre off three D environment we defined with off Cube as 42 viewpoint with and actually length off cube should be 42 viewpoint with as well, in order to give it shape off Rheal Cube. In fact, this is going to be Q Boyd, not Cube, but for simplicity. I call it cute. So in order to make thanks 42 Vieux Port, please. We need to move front face and also back face by 21 view port with because again they're placed in the Centre Off Butte. Actually, it may sound a little bit complicated, so let's look at the project in browser, as you see from faces moved from center to front at a glance. It seems that it's sizes increased, but it's not correct. It's just in effect, off three D space. For now, it's placed closer to the user in order to see better. Let's decrease slightly capacity for each face. Let's set it as 0.7. Also increased size of phones make it 50 pixels and change color use here. White color. Now you can see how far is front face from other faces. All right, as we said, we need to move back face in the same way, but with opposite direction. So let's duplicate this coat. Change front into back, and instead of 21 viewpoint with we need minus 21. Alright, so back face is placed in the right way. For now, it's not quite visible and in order to see better, how those places air placed I mean for testing proposes. Let's assign to cube transform, rotate along why access and interfere value zero degrees. Then go back to browser inspector page and select cube from elements in order to rotate elements dynamically, we can place year cure, sir, and then using up and down arrows. We can change value off. Rotate so you see value is increasing and elements are moving accordingly in three D space . Now you're able to see where front and back faces are placed as the sea back face is placed in the right way. But element itself needs to be rotated in order to make content readable. We need to rotate it along. Why access by 180 degrees? So let's write it because then rotate Cuba again inside here 180 degrees. So you see that now Constant. It's readable and back face is positioned perfectly. All right, so with front and back faces were done. Let's move on to left and right sides. In this case, we need to move those faces again by 21 viewpoint with. But now along X axis. And besides that, we need to rotate them vertically along white access. So select left side, then used transport, translate eggs and inside here, minus 21 people with. Then we need to rotate. Why, with minus 90 degrees, let's rotate coop again. So you see that left face is positioned perfectly. Let's do the same for right side. I'm going to duplicate this code, then change values we need to your positive values, right? 21. You put weeks and 90 degrees. Let's rotate once again. Okay, so old four sites are placed in the right way. All right. Besides those spaces, there are left top and bottom sites. But in case of them, we need to do kind of different things. Let's select top. So top size length should be equal to length off cube itself because it should cover top off cube. So in this case, we need to define height as 42 of you put with and also changed background color. Make it darker, using color 111 All right, so that's the way How top faces looking now we need to move it up and then rotate along X axis to be cute, covered at the top, so we need transform. Then translate white with value minus 21 pupil with and also rotate X with the value in 90 degrees. All right, so top face is placed in the right way in order to see eat less. Rotate again, coop. But in this case, we need to rotated along X axis. So you see that Cuba's cover at the top site nicely knowing to take here off bottom side. Let's duplicated this code change topping to bottom. We need the same size here, so let's leave height property as it is. Also, we need saying background color. We just need to change values of transform property in case of translate why we need to insert year minus 40 viewpoint with We use here this value because, as you know, for now, we're building 1/3 off cube. Height off each part is 33% off entire cube height, which equals to seven viewpoint with, and we need to move bottom side, two up by value, which will be less than value off topside by seven Viewpoint with makes sense. I know that it sounds confusing, so try to think about it on your own, and I hope that you will get it. All right. Besides that, we need to disappear. Minus site. Let's rotate Coop. So you see, all the parts are placed perfectly. And actually, first Cube is built up. All right, let's stop here and continue working on Cube in the next video. 50. Cube - Style - Part 3: Okay, so we have already built our first part of Cubin Prince lecture, and now we need to do the same for rest off the parts of Cube. For now, they're heating because we commanded them out. Besides that, we're going to give each face its own background. So that's all about what we're going to do in this video. First of all, let's get rid of comments from those two deep islands. So as the sea we have here, all three parts off entire coop, I think would be better if we increase capacity. So let's remove this line at all. Actually, we have here a little problem. Top side of third coupe is visible. It happens because off three D environment. So in order to fix that, we can just simply use the index property. Second cubes should have higher value than the rest off the cubes. So let's select it right cube, too, and define Zeon next property. Let's say as 10. So now you can see that problem speaks and actually time to start working on backgrounds for each face. Let's start from front face. At first, we need to select from face for Cuba, one so right. Cute one front that defined background in Hugh Earl Select image called Slight and You Want . And then we need no repeat. So as you know, we have three different front bases and eventually we need to create one background image effect So all three backgrounds should be centered horizontally. I mean along X axis. And in order to achieve that, we have to write year as a first value 50%. As for white access, I mean vertically first background image should be started displaying from top edge. And for that we need here zero and also used background size cover. So as the sea we have here background for first front face. Let's do the same for second and third places. Let's go ahead and duplicate this coat that change class name. We need to your cube too. So for second front face, we need background image to be started displaying after seven Newport Beach because height off each cube is seven viewpoint with, So we need your minus seven view. But with now we have here background for second part is well, and actually they create one image effect. Let's duplicate again change class name we need here. Q. Three for third image. I hope you all of the guests we need minus 14. You put with because 1/3 image should be started displaying after 14 viewpoint with So everything works perfectly. We have background for all three parts and they look as one image. All right, that's all about front sight. We need to do the same for other sizes. Well, next, let's work on back side. First of all, I'm going to rotate Cube in order to see back face. For that, we have to easier here value 180 degrees. So we have here backside. But then let's go ahead and copy this entire code and paste it here after Beck. So we just need to change clothes, names and image names right here back. As for image, we need slight mg, too. So back faces ready. Next. Let's move on to the left side again. First of all, rotate cube. We need to your 90 degrees, then paste code here and again. Change class names, right, left and also changed image names we need here. Slight. I'm G three. All right, so with left site were done. And lastly we need to take care off right side. Let's rotate Cuba. Gain right here. Minus 90 degrees. That paste code after, right? We need to you class name, right. And also image name Slight and G four. All right, that's it. All four sites have their own backgrounds. Now we have to work on controls. And also I'm going to create shadow effects down below. For that, let's move on to the next election. 51. Cube - Style of Controls: Okay, so in the last video, we have finally prepared Cube. It's already built up. And before we make it working, I'm going to take a year off controls. And also we have to create shadow effects down below the cube. For now, controls are heating from HTML, and before we display them, I'm going to get rid of some off the styles, which are not needed anymore. Let's remove background colors from Cuba and from faces. Well, also, we don't need phone size and color because we're going to remove content from cute faces. Let's go to index of a steam a file and delete content from here. All right, now it's time to display controls. Let's remove those comments. As you can see, controls are not visible at this point. In order to display them, we have to define some of the properties. Let's select controls using common class name control, said position as absolute and also defines the index property assigned to eat 100. So as you can see now, controls are visible except the right arrow. It happens because it ended up right behind the play post bottom. So next thing that I'm going to do is to define positions for each control. Let's start from the left arrow selected using class name left Arrow said its top position as 30%. As for left property, we need to move element to the left side, so let's define it as minus 35%. So that's the way how left arrow is positioned. Let's do the same for right a row. Selected using class name right, Arrow said its stop position as 50%. As for left property, we need to move Arrow to the right side. So right here 135%. All right, that's it about right arrow. Let's move on to play Postpartum selected. It has class named Play Post, actually, but um will be placed down below the Cube and also on the right side. So let's define top position as 100 and 40% and left position as 120%. Lusting regarding layout of controls is to move them slightly up and to the left side. Let's do it using transform translate for both directions. I mean, for X and y axis, we need to use minds 50%. All right now it's time to give some starts to controls in order to make them looking better. First of all, I'm going to define wits and height. Let's make both of them 40 pixels, then create border right here. Values one pixel salted with white collar and change background color I'm going to use here are to be a value right 59 52 than 50 and capacity 0.7. All right, so that's the way how controls are looking at this time. They ended up at the top left corner off books, and actually, we need to place them in the center for that. Let's use flax books, right display flex. And in order to place controls in the center, we need the following properties. Justify Content center and a Line Items center and then change color. Make it white. All right. For now, controls are looking much better. Onley thing that I'm going to do is to make those boxes rounded and also change course of type. So we need border radius with the value 100% and also coarser pointed. So that's all about styling controls. Before we move on to shadow, let's create little hover effect on hover. I'm going to change background color. So select control with hover, then right background color. Again, I'm going to use RGB a value right here. 42 38 36 that capacity 0.8 and then at transition to Control. Assigned to it values background, color 0.3 seconds. All right, So finally, with controlled, we're done, they're positioned and looking good. Let's move on to shadow. Actually, I'm going to create it using after super element off Vieux Port. So right view port with after pseudo element. First of all, let's make contents empty, but then we need to define with height off after city Element. But in order to be those properties applied at first, we need to define position. Let's make it absolutely. Then write with for responsiveness. I'm going to use here percentage values so assigned to with 100 and 20%. As for height, let's studied as 20% and also changed background called or make it black. All right, so here is after seedy element. For now, it's not looking as shadow, but we will take a year off that soon. Next, I'm going to place it behind Cube, and also we need to define its positions. So it's assigned to eat Z index property with lower value, Let's say minus one, then right top position. As we said, we need to place shadow down below the cube. So I signed to it 140%. And also, let's place it a little bit to the left side, right, left with the value minus 10%. So after see, the element is positioned on the last thing that have to do it to make it looking as shadow . For that, I'm going to use property called Filter. Actually, this property loc to create some visual effects like brightness contrast below. And so one in this case, we need to use function called polar inside parenthesis. We need to insert value using it. We can manipulate on how glory shadow we want to be in this case. But insert here 50 peaks is which I think makes effect looking nice. So, as you can see, we have here shadow, which I agree is looking really good. All right, that's it. Everything is proof here to make you working for that. We're going to use javascript, So see you in the next video 52. Cube - Add JavaScript to the Project - Part 1: all right, so it's time to add some JavaScript your project and make you working. Unlike previous projects in this one, we will use relatively much more jobs. So let me explain what were going to do when we hover on left and right Arrows. Cubes should be rotated, and when we click them, slideshow should be started. I mean, on each click, you will be rotated once. As for play post bottom, it will manage to run slideshow automatically and then post it on quick. All right, let's go ahead and start working on that. At first, I'm going to remove transform property from Cube. We were using it just for testing proposes, so we don't need it anymore. Let's start programming left and right arrows. And then after that, we will move on to play Pose, but attach Click event to one of the arrows. Let's say two left one. Let's go to Abdel Js file and select this element. Right? Documents don't query selector and inside parentheses. Insert class name left arrow, then at event least there being searched your click event and also a row function. So before we rotate Cube, let's test if click event works properly for that. Let's running council clicked. Let's inspect the page and switch council tub. So if we click on left Arrow, then we'll get out. Putting council saying clicked. So it means that click event works good. Let's go ahead and rotate who, as you know, we have three different cubes. We need to rotate all of them. Therefore, we have to select all three coupes. Let's create variable cost cubes in order to select them. I'm going to use selector called Query Selector. All so right Document thought Choir it selector all. As you know, Cubes have come across Cube, so let's insult it and then seeing council what the selector returns. So right counseled a plug cubes. Let's click and you see that we have here in council noticed. Actually, no list isn't array like collection, but it's not array. So in order to rotate cubes, first of all, we need to transform no list into a right for that. In Essex, we have method called. They're rate thought from and inside parenthesis. We have to insert note least so right cubes. So now it already gives us array, and we need to look through items off all right and assigned to each item transformed property. In order to do that, I'm going to use Method called for H, which actually closer to execute function for each array item. Let's ease of year arrow function. This function should have parameter, and it's going to be current item off, all right. Basically, it's a good practice to insert your same name in singular form. I mean Cube, All right, So when we have only one parameter than we don't need parentheses anymore, let's get rid of them. So that's beside on Click. We need to transform Cube. We will need here on Lee one statement so we don't need to use coal embraces as well. Let's transform cubes right cube dot style dot transport, which should be equal. Rotate. Why, by 90 degrees? All right, let's go to browser click and you see that Cube is rotating, but it happens only once, we indicated. As a value, just 90 degrees on second Click Cube is already rotated by 90 degrees. So that's why we don't have any other rotation. We need to program is in a dynamic way, and by the way, in order to make rotation nicer. Let's use transition. Go 2000 seizes file Actually, we need rotation off cubes to happen with slight intervals, so we need to use different delay Time for that. Let's select Cuba one and assigned to transition with transport and as a duration right 0.4 seconds for Cuban one. We don't need any delay. Let's copy this line and pace it for Cuba to and at your delight, time as pulling two seconds. Then select cube three paste your transition and at delay time as 0.4 seconds. Let's click, and you can see that now Cuba is rotating and it creates much more nicer fact. All right, let's go back to Abdullah Js file. As we said, we need to program rotation in a dynamic way. For that, we have to create variable, which will store amount of degrees dynamically, so let's create variable outside of this code, right? Let X and as an initial value, let's right here. Zero so initially, X equals zero. But on each click we want it to be increased by 90 degrees, and then we have to use this dynamic value as an amount of degrees for Cuba in order to increase value by 90 degrees. We have to right here. Eggs plus equals 90. Then we need to insert X inside here instead of 90. I'm going to use your ear. Six. Symcox. I mean template little's for that. Instead of coats, we have to use tactics. We need to use a dollar sign and then inside curly braces, we have to use acts. So it means that on each click, cube will be rotated by 90 degrees for better understanding and for demonstration. Let's run this value in council right council that look X and also let's get rid of this line. We don't need it anymore. All right, let's click. And you see that cube is rotating and on each click value off X variable is increasing by night. Okay, so at this point, everything works perfectly. We have programs left arrow, but we need to do the same for right arrow as well. Let's stop here and continue working on that in the next video 53. Cube - Add JavaScript to the Project - Part 2: All right. So in the last video, we have programmed left arrow. When we click it, Cuba rotates and slideshow is running. We have to do the same for right a row in case of right there. Oh, we need to rotate cube with opposite direction. So we need same code for it. But in case of right a row, instead of increasing value by 90 degrees, we need to decrease it. All right. First of all, let's attach event listener to write a row. Select this element right document dot cleric selector. That's easy to your class name, right a row. Then use at event listener insert, click event, and pero function. As we said, we need the same code for right a row. But in order to avoid writing the same code over and over again, I'm going to create separate function in which we will insert this code and then we'll call this function for both arrows. So let's create function, expression, right? Cost rotate and assigned to it aero function. Then grab this code from here and pasted inside the function. And now we can call it from here. Right, Rotate. So if we click left arrow. Then you'll see that everything works good. So as we said, we need to call this function for right arrow as well. But before that, instead of increasing value by 90 degrees, we need to decrease it by same Valley. So we have to write X minus equals to 90 and also we need to call rotate function. So if we click Eros done, both of them will work properly. All right, so it's done, SB said. Besides click event, we need to create hover effect, which actually will follow us to highlight which slide is coming next. So when we hover in a rose, we want Cube to be rotated slightly. In this case, we will need different events like mouse over and mouse out. Let's go ahead and duplicate this code, then change event type Vincent year mouth over, and then instead of 90 degrees right, 25 degrees. Okay, let's hover. So I see Cube is rotated by 25 degrees. But when we mouse out from Arrow Cube is not getting its default position, and on next hover again, it rotates by 25 degrees. Actually, we need to fix that issue. But besides that we have here another problem when we most over element that event or cures . But if I shake slightly mouth that it secures again, we don't want it. So you know the fix, that problem. We need to turn off pointer events from I eloped for that. Let's go to styled with CSS File Select I elements right Control I and assigned to its property called Pointer events with the value. Not so now. You see that problem is fixed. Let's work on second issue when we mouse out from Elements, Cube should get its default position. For that, we have to use another event called Mouse Out. Let's duplicate this code, then change event right mouse out and also instead of plus equals operator when it here minus equals. So no, everything works perfectly. And actually we left Arrow. We're done. Let's do the same for right a row. Copy this code. Paste them here than change class names. We need to write a row in case of right arrow. We need to rotate Cube With up was the direction. So instead of plus sign right here minus now that the state of mind sign, we need plus so now everything works fine. And actually, we can say that we left and right arose. We're done next minute to program play post button. And for that, let's move on to the next lecture. 54. Cube - Add JavaScript to the Project - Part 3: all right, So in the last lecture we finished working on left and right arrows. They're all early, programmed and working perfect, as I promised. Now we have to move on and make play post butts and working. So using this button will be able to run slideshow automatically and then pose it. All right, let's get started. First of all, I'm going to select elements and attached to it. Click event. So right here documents Dr Query Selector. Insert your class name play post, then attach event listener with click event and also with arrow function. All right, let's test again in council if Click event works properly. Actually, I recommend to test always such things because it's a good habit. Let's running council clicked. Let's inspect the page and switch console top Click Botsan and you said that it works. We have clicked in constant all right. In order to make this button working, we need to create a new function. Let's call it play Post and assigned to it aero function. So in order to run slideshow automatically, we need to use JavaScript built in function set into a vote which closest to execute, function over and over again with some intervals. Actually, you have all of this in dysfunction in one of our projects. So right set into well as a first parameter, we need to insert your function, which will manage rotating off Cube. That's right here, aero function. So by default, when slideshow place automatically cube should be rotated from right to left side. So in this case, we need to decrease value off X variable by 90 degrees. Right X minus equals to night that in order to rotate Cube, we just need to call here rotate function as a second parameter. We need to insert time off intervals in milliseconds. I want to change flights in every three seconds. So let's right here. 3000 milliseconds. And the last thing that we have to do is to call this function. So let's right, you don't below play post, let's click, then wait for three seconds and you see that slideshow is running automatically. All right. Next thing is to post slide show when we click again on Aiken, and also we need to change in front play in two polls bottom. In order to do that, we need to create a couple of variables and also we need to use, if else conditional statement. Actually, we're going to many polite on by bullying values. I mean true and false. So let's create new variable. Let's write it here to avoid using, let keyword over and over again, call this variable boot and by default, make it false. So now we need to create if statement in which, as a condition, we need to insert variable boot by default. Boolean is satis falls, but in this case we need it to be true and in order to make it through, we can use not operator, which is expressed by exclamation mark. So here we say that we have as a condition through value. Now, as a statement, we need to insert set into a function so it's grab it and paste you. Let's click and you see that we have same result. Slideshow is running automatically, but on second click it's still not posing. In order to do that, we need else statement in which we have to terminate set interval function. For that, we will use another JavaScript built in method, which is called clear interval. Before we do that, I'm going to create new variable which will store this entire set interval method. Let's call it interval, then inside if statement right this variable and assigned to set integral function. So in order to make else statement working on second Click, we need to make condition off if statement false. And for that we have to change value off full variable and make it through. It's the right boot equals to true that inside l statement use a method called Clear Interval and as an argument he's that year interval and also in order to run slideshow again on third Quick, we have to make bull variable again. False so right boot equals two. False. Actually, I'm going to go to browser and test how those things work. But in order to avoid waiting for three seconds on each colleague, let's change three seconds into one second for a while. Click the button so as the seat works, if we click again, slighter will be stopped and or next click, it will run again, so everything works fine. So far as we said, we need to change button from fate into post. For that, we have to create another new function Let's call it change play post again. Use here. Ero function. In order to change, I can click. First of all, we need to select i elements, which is placed inside developments. It has class nameplate post, so create new variable. Call it I and select I Element right documents dot query selector that insert here. Class name, off development, play, pose. And then I yelled. So in order to change, I confront play to pose. We need to use another fun off Michael Play Button has class Name F a dish plate post phone . Also, Michael has class name F a dash post, so we need to get access on class name off, play button and then on click. Change it into class. Name off post. But so let's create another variable. Let's call it class, and I'm going to write it in this way. So in order to access on class name, I'm going to use property called class least which actually returns all the class names that element does have. Let's see what I'm talking about. Assigned to this variable I don't class least Then run this variable in council right consulate log. Insert your variable name and also we need to call dysfunction. Let's write it down below. Let's click bottom and you can see that we have here. Don't talk unleased, which actually is an array like object. If we drop down it, you will find all the classes that I element has. And if you take a closer look, you will find that those classes have zero based index numbers. Actually, in this case, we need to access on second class name. I mean, on F A dish play. It has index number one. So we need to indicated here inside square brackets. If we click again, then in council we will get class named F A display. All right, great. Everything is ready to change icons. We just need to use if else statement as a condition, we need to write close triple equals two f a dish plate. So if this condition is true, then we need to change Aiken for that. We need to remove current class. I mean f a dish play and add to class least class f a dish pulse. For that, we have to write. I got class least in order to remove class name. We need to use method called removed and as an argument when it is set class name, which we want to be removed in this guy's f A display. Besides that, as we said, we need to add another class to element. So let's duplicate this line, then change method name right here at instead of removed and change clothes name we need to your f a dish post. So in this case, if play bottom is displayed that it will be changed by post button. But then on next click, we need to change post button into play. I could. For that, we have to use else statement that let's grab those two lines, pays them here and change class names. We need to remove F a dish post, and we need to add a dish play. All right, so function is ready. We need to execute it. For that. We have to call eight inside. If statement Also, we need to call it in l statement as well. Right? Change play bowls and lastly gets rid off function called from you. All right, let's click button. So you see that I can has changed slideshow runs automatically. Then on next click play, Aiken is displayed back and Cuba stops rotating. Okay, the only thing that we have to do is the following. So if slideshow runs automatically and then we click arose then besides automates light show, it runs manually as well. And actually it doesn't look good. So if we click arose, that automates light show should be stopped. If it runs for that, we have to use if statements which will check its life show is running automatically or not . So let's create if statement in order to check if slideshow runs, we can use bull variable. If full variable is true, it means that slideshow is playing in automate mode and in this case we need to stop it. For that, we have to call play both function. So again, if bull variable is true that it means that slideshow is running automatically, this condition will be true and play post function will be executed. But if the value of full variable is satis falls, it means that slide show is not running automatically. Then condition is false and play post function won't be executed. Makes sense. All right, we need send if statement for right arrow as well. So let's compete and face it. You. Let's test how those things work. Click for a couple of times. So you see that everything worked perfectly. If slideshow runs automatically and we click arose that it stops automate mode and runs only manual. And actually this is much better user experience. All right, that's it. Everything works. Fine. Let's change time off. Interval back. Make it three seconds. So we have finished working on the project. I hope it was interesting and helpful because we used here Lots of advanced CSS stop with some javascript. Actually, I would like to say that when I started learning three core technologies off front and Web development I mean HTML, CSS and JavaScript. I always wanted to practice in them using building such little projects because it's really useful and helps to develop your skills. So that was main reason why we decided to create this kind. Of course. I hope you enjoyed it and learn lots of cool things in the near future. Other interesting courses and projects are coming. So stay tuned, keep learning and wish you all the best. Bye bye.