SASS - The Complete SASS Course in 2020 | George Lomidze | Skillshare

SASS - The Complete SASS Course in 2020

George Lomidze, Developer / Designer / Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
49 Lessons (5h 56m)
    • 1. Introduction

      2:50
    • 2. Setup

      1:55
    • 3. What is SASS

      3:10
    • 4. Let's Install SASS

      12:21
    • 5. SASS Variables

      9:24
    • 6. Nesting

      4:19
    • 7. Mixins

      7:12
    • 8. Extend

      4:27
    • 9. Functions

      7:38
    • 10. Placeholder Selectors

      2:37
    • 11. Imports and Partials

      5:23
    • 12. Project - Restaurant 'Georgia' - Overview

      6:21
    • 13. Create HTML Markup for Header

      3:51
    • 14. Add CSS to Header - Part 1

      14:39
    • 15. Add CSS to Header - Part 2

      7:58
    • 16. Create HTML Markup for About Us Section

      4:00
    • 17. Add CSS to About Us Section

      5:41
    • 18. Create HTML Markup for Gallery

      3:58
    • 19. Add CSS to Gallery

      11:47
    • 20. Create HTML Markup for Footer

      3:56
    • 21. Add CSS to Footer

      5:06
    • 22. Create HTML Markup for Navbar

      5:37
    • 23. Add CSS to Navbar

      8:49
    • 24. Make Hamburger Menu Work

      11:35
    • 25. Make Restaurant Project Responsive - Part 1

      11:12
    • 26. Make Restaurant Project Responsive - Part 2

      9:57
    • 27. Make Restaurant Project Responsive - Part 3

      7:39
    • 28. SASS Data Types - Part 1

      6:14
    • 29. SASS Data Types - Part 2

      4:40
    • 30. SASS Interpolation

      3:27
    • 31. Loops

      5:10
    • 32. Each Loop

      3:38
    • 33. If Directive

      5:33
    • 34. Project - Clothes Store - Overview

      8:49
    • 35. Create HTML Structure for Header

      6:41
    • 36. Style Header with CSS - Part 1

      6:20
    • 37. Style Header with CSS - Part 2

      9:13
    • 38. Style Header with CSS - Part 3

      6:11
    • 39. Dropdown Menu

      8:57
    • 40. Slideshow

      2:55
    • 41. Make Slideshow Work - Part 1

      5:54
    • 42. Make Slideshow Work - Part 2

      9:29
    • 43. Create HTML Markup for Products Section

      4:16
    • 44. Add CSS to Products Section

      12:23
    • 45. Create Button for Products Section

      12:23
    • 46. Create HTML Structure for Footer

      9:06
    • 47. Styling of Footer - Part 1

      5:28
    • 48. Styling of Footer - Part 2

      14:43
    • 49. Make Project Responsive

      20:49

About This Class

"SASS - The Complete SASS Course (CSS Preprocessor)"

If you want to learn about the most popular CSS Extension and build modern, beautiful and real-world websites, then this is the right course for you. The course covers all you need to know about this awesome technology.

INCLUDED:

1. You will start from SASS basic topics, such as how to install SASS compiler, how to create variables and mixins in order to write a more concise and flexible code. Also, we will cover topics like extend, placeholder selectors, functions, imports, partials and much more...

2. You will build a modern and beautiful website - Restaurant "Georgia". The project will be created based on the basics of SASS. You will learn about how to structure your code using SASS and you will be able to put all the learned stuff together and build the website.

3. Next, we will cover some advanced stuff in SASS. You will be able to learn about SASS data types, Interpolation, loops, IF Directive and much more.

4. After completing the advanced SASS section, we will build our next project - "Clothes Store" based on advanced SASS stuff. 

5. You will be able to make websites responsive to all screen sizes using some SASS techniques.

Throughout the course, you will meet detailed explanations about how SASS works, also, you will introduce to modern practices and solutions.

Get fast and friendly support from instructors 24/7.

JOIN US!!!

Transcripts

1. Introduction: Do you want to learn the most popular and widely used CSS pre processor suss that have come to right place? Welcome to the complete Cesc course created by code and create. Hi, I'm George and this is Lasha were the creators of this course, and we represent code and creating course to the complete Project based Guide Off Sussed, which is an extension to CSS. It allows us to write CSS code in more concise and convenient way, so this course will give you a solid knowledge off suss from basics to it. Last level course consists of several section school start from subspace six, in which you will learn about how to install suss compiler. Also, we will refer to topics like variables, nesting mixes, extent, functions, imports, partials and much more. After finishing this section, who will build? Our first project is going to be website about restaurant and we'll put together all this stuff which we will learn in our first section. So Project will consists of several sections. First thing that you see on the screen is banner. It contains several elements and we have full screen background. Vanner is followed by about a section next we have gallery which can see itself a couple of images and lastly down below, we have foot. Besides that, we have here hamburger menu icon. Click it, then we will get acts and also now but display. After building this project, you will have really good knowledge and experience incest. But in order to go even farther, you will be able to learn some advanced topics such as saw stated types, Interpellation Lopes. If directive and much more once you will be confident in advanced sussed stuff, will start building our second Project Clothes Store, in which we will use smashing things a little bit kind of complex project with advanced fast structure. So you will feel even more confident in this technology. So the project consists of several sections who will start from Header Heather is followed by slideshow. It consists of a couple of slides with images and some content. Next section represents some featured products and Russell at the bottom. We have food, all right. If you have any trouble and questions during watching lectures, don't feel free rich out and pulse your questions in Qiwei section, where it will be glad to help. OK, so we're ready to go. Let's get started 2. Setup: all right. So before we started writing coding Suss, we need to install and prepare some tools which are modern Web browser and code editor. Actually, I'm sure that you already have installed your favorite Web browser and code editor, but anyway, I will show you how to do that. So through all of this course, we're going to use mostly Google Crow, which is one of the best Web browsers. But also, when we start building our second project, we will work in Mozilla Firefox. The reason is that our second project will be built based on CSS greet and Far Force as the best developer tools for this CSS module. So I recommend to download those two were browsers. I'm not going to go through this process because it's really simple. All right. Next, Still, that we need is code editor. Throughout this course, we're going to use brackets. Actually, to be honest, my favorite code editor for now is obvious code. We used this editor in our other courses. The reason why we decided to use brackets is that at this point, Venus code has some problems regarding compiling SAS code. Sometimes you need to save code for several times, and it may cause some hours. Actually, it's not really a big issue, but anyway, we decided to use different code editor in order to avoid this problem. Brackets is absolutely enough for this course, so you can visit brackets that I owe download and use it. All right. Last thing that I want to do in this video is to create new folder on desktop. Let's call it says introduction. Okay, so, actually, if you have prepared off these stills, then you're ready to go, So see you in the next video. 3. What is SASS: all right. So before we dive deeper into different specific topics and features offsets, first of all, I want to talk about what actually says itself is So what it says. Abbreviation itself stands for sin tactically awesome style sheets. It's an extension to see Assess CSS pre Processor, which makes code more powerful and flexible So you can write C assess in much more is there . Wait says, gives us ability to write, sees his coat like programming language because we are able to use variables, functions, conditional statements. And so what if those things are not family for you that do not worry about it? Because throughout the coming lectures, you will be able to learn about them in details. All right, let's talk a little about some features off cess, as we already said, we were able to use variables, functions, conditional statements. But besides that, one of the most important things about SESS is that it gives us ability, displease our styles in different falls in more efficient and convenient wait so we can avoid to put all the styles in just one season spot. And actually it's very popular approach. No one days. Next thing that I want to talk about is how sex works. Actually, browser itself cannot read and understand SAS code. Well, right, Cesc. But eventually we need to translate it into standard CSS coat. This process is called trance piling. Sometimes you may hear compilation instead of translation. Actually, both of them are similar processes. All the difference is that in case of compilation, human readable code is translating into machine readable coat. In case of translation, human readable code is translating into another human readable language. In this case sets into CSS after translation browser will be able to read standard, sees his coat and render eight on the page. All right. One more thing that I want to refer to is an extension off cess file. You are able to use either suss or S C S s, which stands for sassy CSS. Both of them works fine, but there are some differences in Centex In case of suss, we need to protect some rules. We don't have any curly braces and semi colons and therefore coat is indentation sensitive . Besides that, there are others like differences. But I'm not going to go deeper because throughout the course we're going to use as CSS as an extension, which is more popular approach. And it's much like standard CSS, where we can use color braces, semi colons, and we don't have any strict rules about indentation and white spaces for your information , says was designed in 2000 and six by Hampton Catlin and then developed by Natalie Weiss, and Bomb increased upstate. So thanks to those guys, and now it's time to start writing some sauce coat for that, let's move on to the next video. 4. Let's Install SASS: all right, So Espy said in previous video, We have to start writing SAS code, but before that we need to set up some tools. Actually, there are several ways to install says we're going to use know J S and one of its packages called Notes Us, which is one of the most popular today. I would like to say that installation process might be a little bit complicated and confusing for you because you may see and use the tools that you have never used before. But I just recommended Follow us. It's not mandatory to know and understand in depth off. Those things were going to prepare our working environment. And after this video there won't be necessary any other set up or complex insulation? All right, So before we start installation process, I'm going to talk a little about no, j Yes. No. Js is JavaScript runtime environment. Before creating it, we were able to run javascript applications all the in browser, but now, using note, we can around them on the server as well. If you are not family with javascript or no Js again, you don't have to worry because we're not going to use them. I mean, we won't right any Jarvis coat, so we need to know j s because we should use NPM, which is note package manager. It is a simple command line program which allows us to install and manage some packages in this guy's been in to use it to install note sauce package. So, first of all, we need to download and install know J s, which will automatically include note package manager unit visit website called no Js dot park. Here you can see two different versions of note. 1st 1 is recommended for most users, as for 2nd 1 is the newest version with latest features, but it's still in sort off testing mode so you can download it at install, which is really simple process. Actually, For now, those are current versions, but when you watch this lecture, they might be slightly different, but it's not a problem at all. All right, I'm not going to East l note because I off course, although they have it. So let's go ahead, post the video download no Js and install it. Okay, once you finished installation process, let's go ahead and check how successful it Waas For that, I'm going to open command line on Windows. You need to search for command prompt. So here it is. Let's click here and open it. Besides that, you're able to press when those key plus R then type C empty and you will get terminal. In case of Mark, you can press command plus space and then search for terminal. All right, in order to check if no Js is installed, we need to type here. Note that dash dash version. If it gives us some version, it means that no J s is successfully in stop. Also, let's check if NPM is installed as well. For that, we have to type in PM dash dash version. So, as you see we have here, it's version, so it's installed successfully as well. All right now we need to create our working environment on desktop. I have created folder called Sauce Introduction. Let's open it in brackets. First of all, I'm going to create index dot html file then also, we need folder for CSS and then inside it create CSS file. Let's call the main built CSS. So this file it will be linked to index dot html file, but we won't be writing any coding here. We will write code in s CSS files, which then will be transport in that CSS file. And then browser will read it and out on the page. So let's create basic HTML structure. I'm going to use your Amit place exclamation mark, then press top. So we have here basic HTML document. Let's create link for CEASES file, open link talk and inside H reference attributes indicate path off ceases file. We have a fuller called CSS in which we have main. You'll see it's a spot. All right. Next, we need to create another folder for Suss. Let's call it s CSS Because, as we said, we're going to use s CSS extension inside that folder. Create file and call it main dot s CSS. All right, So this is the file where we will write suss code. Let's for testing. Proposes, right. Some styles select body element and change its background color, making the rhett then run in next of html file using life preview mode. So, as you can see, nothing happen here. We still have here default white background. If we check main dot CSS file. It should be empty because for now, sass code is not transpired into CSS. In order to achieve that, we need to install package called notes us. But before we do that, we have to create another file called Package Thought. Jason. We will do that. Using NPM actually packaged O. J. Some file is something like Manifest for entire project. It will include some properties and values. All right, let's create package, not Jason file for that. At first, we need to navigate to our working folder. It's placed on desktops, so we need to type here CD desktop, then slash and then name a folder suss introduction. So now we are in our folder and we can create package that Jason Fat for that. Let's typing terminal NPM in it. And for simplicity, we can use flag called Dash Dash. Yes, using it. We don't have to answer several default questions and file will be created directly. So here it is. Let's open it. Falcon sees off several properties we have here name of folder version, and so one. All right. Next step is to install finally notes us, which is a compiler, and it will translate Sasko into CSS. So let's type and PM install or instead of instead, we can use just I. Then we need cash. G hello. 16 style note says globally because it gives us ability to use this package for all other projects. Next, we need to type note cess, and then press enter. This process may take a while, so you need to wait for it. All right, so package is installed and now we need to compile SAS code into CSS. For that, we need another command right here. Note says that Dash Oh, which stands for out then we need to indicate folder in which we need to happen compiling in this case CSS. And after that, we need to indicate path for suspect. We have a folder called CSS and then file handled s CSS. So if we press enter, then code for a suss file will get compiled in CSS file. If we check see, it's a spell, then you will find that we have here same code which we wrote in suspect and also we go to browser than background color off body elements will be read. So for now, everything seems to be working good. Let's change background color. Make it, let's say green than save and check CSS file. As you see, we still have here red color and also in browser. Body element has rat background. It means that coat is no longer compiled because we need to do it manually if we use here. Same comment. Actually, you could do that simply using upper arrow on your keyboard. Thank code will be compiled and red color will be changed accordingly. Actually, using this comment over and over again will be really awful. So we need something that will allow us to compile code automatically. For that, we just need to add to this command cash W which stands for watch. So on each change, it will compile code automatically. Let's change again. Back on color. Make it blue SMS. We say file event code will be compiled and back own color will be changed. So now coat is getting compound automatically. No, right, actual. We're almost done in order to make our working process more convenient. I mean, I don't want to write this command over and over again when we start working on project. Instead of that, let's open package dot Jason file We have here property called Scripts in which we have test property so we don't need it. Let's change it. And right here, watch. And also instead, off this value, we need to insert command, which we have been using in terminal. I mean notes us. Oh, that CSS and then path for a CSS file. Right s CSS slash main Thought s CSS. And lastly, Tesh W All right, let's stop watch in terminal using control. See, then why and enter And finally youth commend and P m run watch, which actually will give us the same results code will be compound automatically, and we won't need to use previous long comment. So remember that every time when you stop working on project, I mean, when you close terminal, then started again and continue working. That's getting overworking. Folder might CD desktop suss introduction. You need to run this command. I mean, NPM run watch in order to get your suss code compound. All right, that's all about installation process. We are ready to go. Actually, I want to say once again that if you're not family with working with terminal or note than off those things might be a little bit complicated and confusing, but that was all about what we needed to start writing Sasko. And, of course, if you have any question, then you can feel free and post it in. Q A section. All right, that's it. See you in the next video. 5. SASS Variables: all right, So once we have installed South compiler, it's time to move on and start discussing on off the first topics, which is south. Variables. If you're enough family with variables, that's not really hard to understand. How they work In General Variable is like a container, which store some data values. And then those values can be used for multiple times variables existing standard CSS as well. But for now, they have partial support in modern Web browsers. And also, I think that using Suspiria Bols is more convenient and flexible than using standard CSS variables. All right, let's go ahead and start writing some code. First of all, I'm going to run Suss compiler. Let's open terminal that never guy to our working folder right CD asked up and folder Name says introduction and then type in PM Run, watch. All right, so in the last video, we have changed back on color off body elements, and actually, I'm going to get rid off the style. So in order to demonstrate how sauce parables work at first I'm going to create some HTML elements. I want to use Amit so it's create not element with class name enough in which we will have you elements. It will be followed by a lie. And lastly, I'm going to insert here Link Element. Let's press top And here we go. We have here our elements. Let's insert here as a condom. Let's say home. Actually, I'm going to duplicate Ally Element for three times. And then I will change content for 2nd 1 right about us, that services. And lastly, right contact. All right. Next we will have section elements with class stained banner. It will include adding H one, which will have content. Let's a page heading and also as its sibling elements create paragraph with some Domine text. All right, so the last part off html document will be footer. So it's create footer element with class footer and inside it I'm going to insert age three heading element as a content Right footer heading And lastly, create again paragraph with some Tommy tax. All right, that's all about HTML document. Now we can write some sass code. Suppose that this is our webpage and we're going to use several colors. I mean, primary, secondary and tertiary for multiple times and 44 ounce. So instead of writing them always manually as it happens, in case of standard, CSS were able to start color values into variables and then just use those variables when we need. So let's see what I'm talking about. Let's open susp file. I want to remind you that we don't have to do anything with CSS file. All the styles will be written in S CSS file, and then it will be compiled into CSS, which is length to HTML document. Okay, So in order to create Suspiria ble, we need to use a dollar sign, which should be followed by name but say color, primary and we need to assign to eat some color value. Let's say orange. I'm going to create two more color variables. 2nd 1 is going to be called a secondary. Let's use year great and then create 1/3 variable caller tertiary for the value Royal blue . All right, so variables for colors are created. And besides that, I want to create three more variables for phone sizes. 1st 1 is going to be for a large phone, so let's call it phoned LG and assigned to its value 40 pixels, then create another variable for medium size. Call it phone and deep with the value of 30 pixels, and lastly create third variable for small size. Right? Phoned as M 20 pieces. All right, so we have created a couple of variables, and now it's time to use them. Let's change back own color off enough elements selected using closely enough then as a background color. Let's use coal or primary. So as you can see, background color off, enough element has changed. And if we take a look at main dot CSS file, we will find that there are not any variables. We just have pure CSS code selected now element on its style background color orange. So our sussed code is compelled into CSS. Fine. All right, let's go back to s CSS file. I'm going to select first heading elements, right Banner H one and I'm going to increase its phone size. Let's use your phone's LG, and as a color, I'm going to use call or secondary, and also I will place it in the center. Let's use text Airline center. All right, So as you can see, all the styles are applied and we did that in more dynamic weight using variables. Let's go ahead and give some stuffs to second heading. I mean footer that's selected right Footer H three. At first, let's make its phone size medium right phone size and use variable called phones and D as a color use again. Call our secondary Let's company from here paste and lastly place heading in the centre using text Align center. So, as you can see, we used here same color twice, and I think it's a good moment to demonstrate how useful and dynamic sauce variable star. Let's say we want to change color for both headings, then you don't have to do it for each element. You can just change value for variable. Let's use here, for example, Green. So I see that color for both headings is changed. So that's the power off Suspiria, Bols. It makes code more dynamic. We can see it clearly on such little example, and you can imagine how useful it would be on March big projects. All right, next thing that I want to talk about his scope off suss parables. In general, we have global scope and local scope. In this case, those variables are created on global scope. But if you create variable inside cola braces event, it will have local sculptor. So I want to talk a little about relationship off those scopes. Let's create variable it with name again color secondary inside H one and assigned to it value Brett. So if we save, then color off first heading will be changed and will become red. But for second heading, which uses same variable color won't be changed. As you see, it's still great. It happens because we created new variable inside h one. It has local scope and therefore it doesn't have any influence on variable, which has same name and is created on global scope. If you want to use this variable on global Scopus, well, then you can add to eat exclamation mark and the key word global. So if we say then color off footer heading will be changed as well. All right, so I just wanted to show you how such variables scopes work. In general, I don't recommend to create local variables, always try to declare variables on global scope. But anyway, if you come across somewhere such things you won't be confused. Okay, Before I finish this lecture I want to show you one more thing. As you see, we have here desh signs in names of variables and you're able to use dash and underscore interchangeable. I mean, it would be clear variable with dash and then use it with underscore. Then Variable will work and will be still fell It It's kind of strange thing, but incest. It works that way. All right, that's all about Suspiria. Bull's eye help. Everything was clear. So see you in the next video. 6. Nesting: all right. So in the last video, we discussed what Suspiria bills are, how they work and how useful they can be. The next topic that I'm going to talk about is nesting. Actually, nesting is a really good and useful feature off suss because it's closest to avoid writing many lines of CSS. Also, it is very easy to use this approach. We can define nesting as a short cut off, creating CSS rules. All right, let's go to brackets and seeing practice how we can use nesting. First of all, I'm going to delete this line because we don't need it anymore. So suppose that we want to give some stuffs to L. I and link elements for that. As you already know, we can just simply select you. Will L I Let's get rid off those default bullets using list style. None. So that's standard CSS approach. We selected child off development outside of it. Incest. We can do it in more efficient way. Instead of writing this gold outside of nerve element, we can insert it inside curly braces. So let's grab this code and paced. If you as you see, we have the same result code is working. And if we go to Maine, don't CSS file. You will say that here we have standard CS coat. I was placed outside of now. All right, we can go deeper. As you know, Link Element is placed inside Ally so we can select it here. Inside Curly braces off Ally Element. Let's get rid off default styles using text decoration. None. So, as you see, this code is working as well. We don't have here underlies anymore. Actually, I'm going to grab this code and place it outside of Ally Element because we will go even more deeper. We will need to create another level inside link element, and so it wouldn't be quite a good practice. I don't recommend to create many levels off nesting because it will make your coat more complicated, and I think it will be no longer flexible and efficient. So add some more styles to link element. Increase phone size and going to use year phone sm. Also change color. Let's use caller secondary. All right. Actually, I'm not going to waste time on styling because the main subject of this lecture is to explain how nesting actually works incest suppose that we want to create hover effect on a link element. So I want to show you how to deal with Syria classes in case of nesting. You might think that we can just simply right here, over with some style. Let's say color with value called or tertiary. Let's hover and you see that nothing happens. Hover effect doesn't work, so something is wrong here. Let's go ahead and check compiled coat and see how it looks like. So he said, that we have here space. It's not sent tactically correct, and that's why hover of fact is not working. In order to fix that problem, we can use special character and percent, which indicates power element in this case link element. So if we hover again, then it will work. And also, if we check CSS file, you will find that space is removed. All right, that's the way how nesting works in suss throughout the course, we will frequently use it, especially in project, so you will definitely get good practicing it. One more thing that I want to mention is that during lectures, wheat sometimes check compiled code in maine dot ceases filed. I mean when it's needed. But I recommend you to check it frequently. Compare codes because it will become more understandable and clear how sauce actually works . All right, that's it. In this lecture, we have learned about nesting incest. See you in the next one. 7. Mixins: all right once were introduced to nesting incest, I'm going to move on and discuss another one of the great features of sauce, which is called mixing. Mixing isn't awesome till to protect one off the rolls off developers, which is, do not repeat yourself. So what is mixing? Mixing is a block of coat that the lows of two group CSS styles, which we may you reuse for multiple times. It's like variables, but it's more powerful and dynamic because you can use bunch of styles for different elements. All right, let's open brackets and start creating mixes. As you see, we gave some start to Bangor heading and also to foot or heading. They have some similar styles. I'm in color and texture line, and actually that's the case where we can use mix it in order to create. It went into place at Sign, which will be followed by keyword mixing. Also, we need to name it, but say having styles, and then we need to open curly braces where we have to insert the lock of coat so s beset. Both headings have same color and same text alignment so we can grab those two styles and place them inside, mixing that. Delete those styles for second heading in order to apply them to both headings when issued to the phone. We have to use keyboard. Include with that sign, which should be followed by name of mixing. So as you can see, color for both headings is changed back, and also they're placed in the center. Let's take a look at Main. Don't see this file so I can see that styles are assigned to both their mouth individually . Here, we do not see principle. Do not repeat yourself because it's compiled coat and in this guy's when we care about is only Sasko, which for now looks much more flexible and efficient. So that's the basic use case for mixing. Besides that, we can use them like functions. I mean, we can pass some parameters and arguments. As you can see, both headings have different phone sizes, but despite this, we can define those different phone sizes inside, mixing for that after name, off mixing, we need to place parenthesis and inside them we have to insert parameter. For that, we need a gang dollar sign, then name of parameters. This guy's phone size so you can consider it as a variable as well. All right, next minute defined font size and we have to assign to it parameter which we defined here. So inside mixing we created something like General draft for phone size. And then we will define specific values for each hiding element manually. First of all, let's delete those properties. Then we have to define arguments for mixing. For that, we need to open parentheses for first heading. We need to use phone LG as for foot or heading, insert phone and did so you can see that we have same result. But we achieved it in mortification and dynamically in CSS file. Again, we have all those stars assigned to headings individually like it happens in standard CSS. All right. I'm sure that step by step, you're getting how powerful and flexible is SAS and its pictures. We can go even more, Father, you're able to define default parameters inside mixing. And actually, this feature makes suss code like coat off program Lynch special like JavaScript. Let's see what I'm talking about. If we assigned to this parameter some value but by 50 pixels, then it will be applied to elements wherever you don't define arguments. Manual. So if I delete argument for food or heading, then it's phone size will be increased and became 50 pieces. As for banner heading, his phone size won't be changed because we define argument for it. Manual. All right. Before I finish this lecture, I want to show you one more feature regarding Nixon's. If we're going to use property, which may have more than one values separated by coma, then parameter inside mixing should be followed by three dots to demonstrate that use case of mixing. I'm going to write following suppose that we want to create hover effect on foot or having and on hover when it's changed. Color and background color. And also, besides that went to use transition. We can do it like this. Let's at hover to age three. Use nesting right and percent over, then define Caldor and assigned to eat, call or tertiary and also right background color and in this case, used color primary. So if we hover, then styles will be applied. But as I said, I'm going to use transition for that. Let's create new mixing. Call it transition. Of course, it's not mandatory to use this name. It's optional, and you can use whatever you want. Next we have to instant parameter, followed by three dots and then use transition property and as a value assigned to it parameter. So in order to apply transition to food or heading, we need to use this mixing. Using include right include transition and inside parenthesis. We have to insert values off transition property. 1st 1 is called or with duration, pulling five seconds and then background color with duration. Let's say one second, let's safe, then hover, and you see styles are changing smoothly, so it means that transition is working. So remember that when you're going to use property, which can take several values separated by coma, then inside, mixing parameter should be followed by three dots. If we removed them and safe, does that mean terminal? We will get an error, so do not forget to use those three dots with parent. By the way, if something doesn't work for you than always, check terminal rate text of error and it may help, all right, that's all about mixes incest again. It's really powerful and useful feature, and of course you will make it throughout projects many times. Okay, let's move on to the next lecture 8. Extend: all right, so improve its lecture will learn about mixes incest, which are really powerful features. And in this video we're going to talk about another really useful tool off SAS, which also to avoid writing many lines and reused some coat. So we will discuss what extent is how it works and how to use it. So as a definition, we can say that extent ellos one selector to inherit styles off another selector. It avoids code bloat by grouping selectors, which have the same cells like mixing extent gives us ability to write cleaner and concise coat. All right, in order to understand better what extent can do, let's write some code. First of all, I'm going to delete some code from previous lectures because it's getting bigger and it might confuse you. Of course, you are able to get sore spots for each lecture in case if you want to recall something, let's delete those mixes and also the lock of code for heading elements. No, I think it's much more cleaner, and we can start writing some new examples, as it was in case of makes sense, we can create separate block of code, which then can be used wherever we need it. For that, we can create new class. Let's call it having and then let's add to eat some styles right color. Use your color primary, then phone size and assigned to it. Phone LG Next one is going to be background color with color secondary and lastly, right text align center. So we created a couple of styles and now, in order to apply those tiles to heading elements, in other words, to inherit those tiles, we can use extent with that sign. And then we need to indicate selector from where we want to inherit stars in this case heading Let's copy this line and pays it for food, heading as well. So here you can see that styles are polite to both Having governments also who checked CSS file, you will find that all three selectors share the same style and they're separated by coma. So we used a less code and manage styling elements and more concise and dynamic Wait like mixing extent alone see you to re use some styles and gives us ability to protect rule. Do not repeat yourself. All right. Suppose that we have hover effect on banner heading right and percent hover. Then insert here, background color, Kareen, and also assume that we want to extend this style two footer heading as well. You may think that we can do it in the following way instead of class heading, we can right here banner H one. But actually this is not quite correct because if we save, we will get an error in terminal. The reason is that combination off those selectors cannot be used with extent. So you can leave here either h one. But in this case, you need to delete class banner from here as well, because selectors should be matched. Or you can just simply assign some class to H one and use it in both cases. So for h three had in government, all the styles are applied from heading and also color effect works fine. If we take a look at main dot ceases file, you can see clearly what's happening here again. Styles off heading are applied to H one and H three elements and also, however, works for those £2. All right, so that's all about extent in practice. There might be some cases when you should prefer to use mixing or extent. It absolutely depends on situation. The fact is that both of them are really powerful and useful tools. Okay, that's it. See you in the next video. 9. Functions: all right. So in previous lectures, we've been talking about variables mixing send extent. They're somehow related to programming languages, and the next topic that I'm going to discuss is actually part of any programme lynch. So in this video, you will learn about functions and sussed. If your family with at least basics of any program language, then you should know what functions are. But if not, that's a problem, because it's not really hard to understand incest. You are able to create your custom functions, and also we provide some built in functions before we write some code. Let's talk a little about what function itself is when you want to run some code over and over again that each time you can execute or Iran function, so you create function. Once with some statement, for example, you can make some calculations or many polite on colors, and then, when you want to use it, unity, call this function all right. Actually, it would be better if we see all of those things in practice. Let's go to brackets. So, in order to create function unity place at sign with keyword function that it should be followed by name of function, Let's say full size. Actually, name of function can be optional. You can call it whatever you want Is that after name? We need to open parenthesis, and then Kohli braces, in which we can create some statement before we write any statement, I'm going to insert parameter inside practices. Let's say size. So using this function, we will double size off phones in order to do that when it size, multiplied by two. But actually this code is not quite enough. Function will not give us any value until we use keyword return again with at the site. So in order to work dysfunction, I meant to double phone size unity. Call it, and whatever we insert as an argument, it will be multiplied by two. So let's select paragraph off banner right batter P in the scientific phone size. So here we need to call function. For that. We need to write name of function, phone size with parenthesis inside parenthesis. We have two incident arguments. You can write your some value like 10 pixels, 20 pixels and so one. But I'm going to use your variable phones as, um as you know, it equals to 20 pixels, so phone size of Banner Paragraph will become 40 picks. Actually, you may think that there is no need to use function here. We can directly assigned to eat 40 pixels. And actually, that's absolutely right. But as I said for several times when you work on big projects, that function could be very useful. Now. I just showed you how to create them and how to use for just demonstration proposals. Okay, like it was, in case of makes sense, we can define default values for parameters. For example, if we assigned to size some value, let's say 25 pixels and then we select footer paragraph, define phone size, in which we just cold our function. That phone size of Pooter program will become 50 beasts, because by default, size equals to 25 pixels and that it's multiplied by two. So it will happen until we define argument for function manual. If we interfere, let's say 30 pixels, but then phone size will be increased and become 60 pixels on default. Value will be no longer applied. All right, that's all about custom functions as beset at the beginning. Off this lecture, Suss also provides several built in functions. I'm not going to go through all of them. I will show you just a couple of commonly used building functions. Let's use the 1st 1 which is called Lighten. I'm going to work on navigation, which has background color orange so function called lighten losses to make color lighter by some specific personage so we can write. Lighten. Does that wrap color by parenthesis, So color is going to be first argument. As for 2nd 1 we can indicate you specific person future value, Let's say 20%. So as you can see, background color off enough became slightly lighter. And if we checked CSS file, then no element will have proper call in the same way we can use function called darken, which actually does the opposite. It makes color darker with specific percentage. So you see that in this case, back on color became darker by 20%. All right, so those functions, I mean lighten and darken our frequently used with hover effects. But besides that, we have some other functions, which we use with colors. Next one is transparent eyes. It yellows has to make all orders parents by some specific value. As a second argument, we can indicate here value from zero to what? Let's say, 0.6. So as you can see, collar became little bit transparent. Let's check compiled coat and see what we have here. So as a C collar is convicted into RGB, a value which has capacity point for if we change value and make it one, then background off enough will be 100% transparent. And also, if we check CSS file capacity will become zero. All right, that's the way how transparent ties function works. We have another function called Mix. It allows us to mix two different colors. For example, let's insert here blue and green if we save, but then we will get mixed caller. Besides that, we can insert your third arguments percentage value, which will belong to first color. So if we insert here, let's say 10% that in mixed color, 10% will be blue and the rest off 90% will be great. So using third argument, you can define a ratio off colors in mixed color. All right, so I have showed you some of the commonly used functions. But besides them, there are lots of built in functions. Incest as a reference. I'm going to leave the euro, which you can find in source files. You could visit it and go through some off those functions. All right, that's all about functions in sussed. See you in the next video. 10. Placeholder Selectors: all right. So in one of the previous lectures, we talked about extent which ellos is to reuse bunch of stars for different elements for multiple times. But as remember in case of extent, we created a new class assigned to it some stars, and that extended them to different out. So in that case, we created class. But what could we do it? We didn't need to create new class. One of the solutions is to use placeholder selectors. They were created to salt this exact problem. Okay, let's open brackets before we use placeholder selectors, I'm going to clean up a little bit our coat. Let's delete those paragraphs and also remove function. So here we have class heading, which then is extended for H one and H one itself is extended to foods or heading. If we check main dot sys file in compiled coat who find that here exists class heading Even if we don't extend its to any element, then close heading will still exist in compiled code. But in case of placeholder selectors, we have different situations in order to create placeholder selector here instead of dots, we just need to place person to sign. So if we save and check may notice filed, you will find that place on the selector with it starts doesn't exist you. But if we get back extent, let's change dot into presentation. Then those tiles will be applied to H one and two H three as well. And if we go again to see us a smile, then you will see that H one and H three share the same styles, and we now have here class or any other thing anymore. So placeholder selector closest to create cleaner and concise coat in case of creating class, if you need it just to extend some styles to other elements, and class itself is not used anywhere else. That is much better to use placeholder selectors. It creates more readable code because when you see it, you get that it's created specifically to extend some start to ELT or Allen's, so that's the little advantage off using them. All right. Actually, that's it about placeholder selectors. There might be some situations where you could use them inefficient. Wait, so you need to know how to work with placeholder selectors 11. Imports and Partials: All right. So at the beginning, off this section, we talked about some of the features offsets, And one of the most important and useful feature which susp, er whites, is that we're able to split our entire suss code into different files and make project much more well structured. It's really a big advantage of this technology. It's important, especially when you work with big projects. Instead of having just one file in which you put toss off lines of code, you can split it in different files. It will cause less confusing and complication and will make your file structure more convenient. So in this video, we're going to talk about imports and partials incest. All right, let's go to brackets. As you know, we have here just want a CSS file. I mean, main dot s CSS in which we put all the coat. Suppose that we want to create new s CSS file, just more testing. Let's call it test the S E s s than inside. It falls like one of our elements. Let's say foot, they're heading right footer h three and change its phone style. Make it italic. So if we save that nothing will be changed on the page. And even if we restart terminal using control, See, then why and the run Command and PM Run, Watch still, we will have same result. The reason is that compiler watches Onley mangled SCS is felt. If we open package, does Jason file? You can see that we indicated here on Lee Main Don't s CSS file. In this case, we need compiler to watch entire s CSS folder. In order to achieve that, we need to get rid off main dot SCS fell and least slash is well, then restart terminal again. So in order to compile code, we need to make some change. Let's at here border three pixels solid on Rhett. Let's safe. And they said that in CSS folder we got new file called test dot CSS, in which we have compiled cold from test dog SCS is felt. But despite this, still, we have same results on the page. Of course, it happens because that new CSS file is not linked to ht mofo. And actually, we don't need to do it. We will fix that problem exactly. Using import so we don't need those new CSS files When we create new CSS Falls, we want to compile off the coat. I'm in code from different assistance falls in sight main dot CSS All right, First of all, let's delete test the CSS file, then, in order to avoid creating new CSS files each time, we just need to rename test thought SCC's fall and place your underscore at the beginning. Now, if we checked our meal, we'll get an error. Actually, it happens because we just changed name or file. So let's round this common again. Then make some change in here. Change color, Let's make it blue. So if we save is that but will no longer get new filing CSX folder And also, if you check terminal, we will find that even compiling didn't happen. The reason is that underscore, which we added here to test a CSS file. All right, the only thing that we need to do is to connect this coat two main dot s CSS file. For that, we have to use import. So let's go to maine dot s CSS file and at the beginning, right at sign, then import and inside quotes. We have to indicate path off five Actually, we don't need to indicate for their name because both falls are placed in same directory, which is need to write name off file without underscore and also without its extension. In general, you're able to use them, but it's not. Manager compiler can look for files without underscore and without file extension. So if we save that, everything will work perfect. As the sea footer heading, got new styles and also check main dot CSS felt you'll find compiled code from test dot s CSS pot. All right, so this is a little example How important works Incest files like test don't CSS. And also other files which might be created except mandala ceases fell are called partials . Actually, throughout the projects will create much bigger fire structures where you will learn about how to separate files. You will see modern practices and solutions. Okay, that's all about important partials and suss. See you in the next video 12. Project - Restaurant 'Georgia' - Overview: all right. So once we got some knowledge about Suss, it's time to use this knowledge in practice and start building. Our very first project is going to be website about Restaurant, which I decided to call Georgia actually is the name of my country. So in this video, I'm going to describe project itself and also will set up our working environment. So project will consist of several sections. First thing that you see on the screen is banner. You can see so several headings. Also, we have here Logo button and Banner has full screen background. Banner is followed by about a section we have here, two parts on the left side. There is an image. As for right side, we have here headings paragraph and but next we have gallery, which consists of six images. They are placed in two rows, and when we hover on each image, image overlay is displaying with nice effect and lastly, down below, we have footer with logo, social media icons and copyright paragraph. Besides that, as you see, we have here on the right side fixed hamburger menu icon. If we click it, then we will get X with a nice effect and also now put with display. Actually, an apple will consist of two parts on the left side. We have some images. As for right side, we can see here a couple off menu items which on, however, have nice looking effects. All right, that's all about our project. Besides building those sections, we will make it responsive on different screen sizes. If we inspect the page and switch on responsive mode, you will see that project is responsive. Actually, this project is built on a larger screen size. I mean screen size with with off 1920 pixels and with height 10 80 peaks is that kind of screen sizes mostly used today. But if you're using smaller screen size than sometimes, the project might not be looking quite good. But no more worries of the and we will make it responsive for all screen size. All right, so I have created new folder on desktop called Project One Restaurants, Georgia, in which we have a couple of folders and files. Let's go ahead and open it in brackets. So we have here index dot html file package dot Jason and folders for CSS for images and also for s CSS files in CSS folder I have created main dot CSS file, in which suss code will be compiled. For now, SCS is folder is empty and I'm going to create a couple of falls, improve its lectures. We use just main dot as CSS file, But in this case, when we start building project, I'm going to use different file structure For this project, we will use kind of simple fall structure who will have just couple of CSS files. But in the next one, we're going to use relatively complex file structure. All right, let's go ahead and create main dot s CSS file in which we will import rest off the files. Next, I'm going to create based on a CSS file, as you know, is going to be a partial, and its name should be started with underscore in this file, we're going to put all the variables also makes sense, reset styles and stuff like that. Next file should be components thought a CSS in which we will create styles for some reusable components like headings, subheadings, buttons. I'm in elements which we will use for a couple of times and the last file should be layout a CSS, which will include styles regarding layout and also styles, which won't be reusable. All right, As we said, those three files will be imported in maine dot CSS file. So let's open it. And right that's important and in quotes instead, filing base as remember in case off import. We don't have to write here. Underscore with five name. Next one should be layout, then last file should be components. All right, let's open package Dog Jason file. As you see we have, although they prepared it, you know that you start working. We don't need to go through some installations again. We just need to open terminal than navigate to our folder right CD desktop that city Project one restaurant, Georgia and then the run. Comment NPM Run Watch. All right, let's open index of html file. Here we have basic HTM, a structure with some links we have here link for front awesome icons for Keagle phones and four main dot SCS is fault. Let's run in except HTML, using life preview mode in browser, and I'm going to check if everything works properly. Let's change background color off body elements right inside layout a CSS file, background color. Make it to read. So if we save, then background will be changed. And if we check main dot CSS file, you will see that code is compiled properly. All right, that's all about project set up. You need to download those starting falls which are attached to this lecture and you'll be ready to go see you in the next video. 13. Create HTML Markup for Header: all right. So impressed. Lecture. We prepared everything to start building our first project. First part, which we're going to create will be header and actually in this video and going to build HTM a structure off it. Generally, we will create market for each section so you can follow me and write code with me. Or you can just use ready source files for HTML. All right, so Heather will consist of two parts we will have brand, which will include logo and names off restaurant. As for second part, is going to be Banner with some headings. And but so that's all what we're going to create for Header. First of all, let's write comments had there than end of Heather, then open. HTM of five had the elements, and I signed to it. Close. Heather. So is beset. Forest Park should be Brent. Let's open developments and assigned to it class Brent first member off brand will be well go, and I'm going to create it using phone Awesome Aiken, and actually it will be wrapped by link out. So let's open lean element with plus logo and then excited Insert i elements assigned to read several classes F A s. That's a utensils. All right, So next we need names and I'm going to create them using H one heading element and paragraph. And also let's wrap them by developments. Then inside it insert H one with class main name and as a text right here. Georgia actually is the name of my country, but you can call it whatever you want after heading, Let's Open paragraph, which should have class, name, sub name and then insert text restaurant. All right, that's all about first part of had er let's go ahead and create 2nd 1 As we said, it's going to be banner with some headings and bottle. So it's open developments and assigned to eat class Heather Banner. Then insert in it H one heading elements which should have class name, main heading and as a text. Right, Welcome. So after first heading, let's create 2nd 1 which is going to be age three heading elements, and it will have class subheading. Let's insert here some text try Great Georgia and Fish and the Last Element of Banner and actually for had arrest. Well, his bottle. So let's open it. It will have type button class main bt n and as a content right reservation. All right, so here we have structure off header. Just pure HTML. Now we need to start styling it. And for that, let's move on to the next video. 14. Add CSS to Header - Part 1: all right. So in previous lecture, we created HTML structure for first part of her projects. I mean, for Heather. And as we said, it's time to start styling it for Heather. We're going to have full screen background image, which will take up 100% off. You put styles for Heather will go to lay out. That I see is this fall. But before we do that, I'm going to create some common styles which will be part off based off a CSS file. Because, as we said in general, it includes stuff like reset styles, variables, mixes and someone Okay, so I'm going to get rid off margin and parting for all elements. For that, we have to select them using that's the risk and then right margin zero and patting zero as well. Besides that, let's define background color for party elements selected and right background color. Actually color that I want to write Year will be used for several times throughout the project, so as a guest, we have to create variable. Let's call it called are Dark and assigned to Eat color to 62626 and then let's assign its do background. Call the property right? Called or duck. All right, so background color off body element has changed, and also we don't have any margin or parting for all the alums. Let's go back to header open layout, a CSS file and select header. First of all, let's define its width and height. Heather will take up full with available on the page, so that's right, with 100%. As for height, Espy said, it will take up 100% off you. So right Height. How did the H All right? Next. I'm going to set image as 1/4 green background. Let's define you, Earl. First of all, we need to exit from CSS folder and go to Images folder. You may think that we need to define path according to S CSS files, but as you know, compiled code which brother can read? He's placed in maine dot CSS file. Therefore, remember that we have to define path off image according to CSS file, so we need to write dot thought slash then images and select image called Bijie Dodge APEC . Next, we need to define position, center and also no repeat, then use background size with cover. And the last thing regarding background is to use linear radiant. As you know, we have to define here multiple colors. In this case, I'm going to use black color, but with different capacities. Black color will be used for multiple times. So let's go to base thought a CSS file and create new variable colleagues called or black and assigned to it black color. Then go back to lay out God s CSS file. So I'm going to use here are to be a values. And as you know, this function takes four parameters. Three off them indicate red, green and blue collars. And then we have capacity. That's the way. How are you be a works in CSS. But in Suss, it's not mandatory to define 1st 3 parameters. We can just simply insert here variable call or black and then capacity 0.8. Let's copy, eat and just change a pass ity right here, 0.6. So, as you can see a linear Grady into works, fine. And if we check may not CSS file, you will find that linear Grady intakes regular RGB values as it's in standard CSS. All right, so we've had our were done. Next thing that I'm going to do is to style, logo and also names. I mean, all the elements of Brent like Heather Brent will go to lay out dot s CSS file. It's child elements off header. So I'm going to use your nesting. That's select Brent first thing that I'm going to do regarding Brent. He's to place it horizontally in the center. For that, I want to use position with transform. So let's make its position as absolute, then move it a little bit down using top 15% then defined left position as 50% in order to place element perfectly in the center. Let's use transform, translate with values minus 50% and again minus 50%. And lastly, to manage layout off Brent according to its parent element in this case, Heather. Let's use position relative so Brent is centered, but actually it's not quite visible. And in order to fix that, let's define. It's called our as White for a while, so brand is positioned fine, and now we have to style elements of it. I'm going to start with logo actually logo, and those names will be used in another section as well. Therefore, let's place them in components filed. Select logo, increase its phone size, make it 70 pixels, then I want to change collar off text. And actually, for that, let's create new variable in base file, college color primary and a sign tooth color the three a B 55 and then assigning to logo if you find color with value color primer. All right, so, as you know, by default, Link Element is an in line elements. Therefore, we cannot define wits and hide for it. So we need to make it as a block level element for that assigned to display block and then define the width and height as 100 and 10 peaks. All right. Next, I'm going to surround logo by rounded border. For that, we have to use border and border radius properties. So let's write border where the values three pixels sold it, and as a color, I'm going to use your color primary. As for border radius in order to make circle, let's define it as 50% so as you can see phone awesome, Aiken is not placed quite well inside border. We need to century perfectly and for that, one of the best solutions is to use flex books. So instead of display block we need to use despite flex and in order to center, I could perfectly we have to use justify constant center and also a line items center. So now logo is looking good, and the next that I want to do. Is this tile those names? But before we do that, I'm going to create mixing for those flax books properties because we will use them frequently throughout the project. Let's go to base file and right under variables create our very first mixing. Let's call it flex layout, then grab those three properties from here paste. And in order to use this coat, we need to include them for elements. So we need to write. That's include and the name off mixing flex layout. So, as you can see, we have here same results and actually everything works fine. All right, that's it about logo. Next, we have to move on and style those names like well, go. They will go to components file and before we select them at first I'm going to place logo and names side by sight And for that we have to assign to Brent this plate flex and also to center that vertically. Let's use the line items center. All right, let's go to Components file and select first name, which has class made name. Actually. Now I'm going to create several variables because we have to use different phone families. So open again based file and create some variables. Let's call 1st 1 as phoned dancing script in a sign to eat phone family called dancing script Coercive. Next one is going to be phoned. Josefin Sense assigned to Josephine Sense, Sand Saref and 31 Phone. No Need. Oh right, No Nieto Sensory. All right, let's go back to components file for Main name. I'm going to use phone Family called phone. No NATO that increased phone size make it 50 pixels. Also, I want to change color and for that again, create new variable in base file. Let's call it caller secondary and you see your call or be BP and assigned its two main night right color caller secondary. All right, so that's the way how first name is looking. I want to add some more styles to it and for that I'm going to create another mixing. Let's call it text styles and insert here following properties and values. Right phone. Wait 300 than letter spacing, two pixels and right here, text transform uppercase. And then, in order to use those tiles for main name, we need to include text starts. All right, that's all about May name. Next, we need to move on and style sub name. So let's select it. Using fast name, sub name in case of sub name. I'm going to use phone family called Phone Joseph Incense. Then define phone size as 18 pixels also change color use again called secondary, then place taxing the center using text Align Center and lastly include mixing called text styles. All right, so those names are style. They're looking good. Actually, I think we need some space between logo and names for that. Let's assign to logo margin right with value 20 pixels. And finally, let's get rid off white collar from Brent. All right, so with Brent were done, it's styled. Next. We need to move on and work on second part off Heather, which is Banner and let's do it in the next election 15. Add CSS to Header - Part 2: All right, so in the last lecture we have styled first part of Heather, I'm in Brand. Let's go ahead and move on to the second part. It's a banner and consists of three elements. We have two different headings, and but we're going to place them in the center of page suffers of Always take here off layout off banner. This piece of code will go to layout file like Brent Banner is a child element of header as well. So I'm going to use here nesting. Also, If we take a look at HTML document, you will see that banner has class name had their batter. So in order to select it, we don't have to write whole class name we can use and percent which you already know that indicates parent element. So in order to select banner, we just need to write Dash Banner. All right, so banner should be centered perfectly. I mean Santa rink horizontally and vertically as well. For that, I'm going to use the same technique which we use for brand positions and transform. So instead of writing in here again, let's create mixing go to based on s CSS file and write mixing, that's call it centering. So in first case, we used top position with value 15% but in this case, we need to set it as 50%. So we need to different values. And for that we can pass parameter inside, mixing and then use proper values in both cases. So let's open parentheses and answered parameter. That's called the top value. This mixing will take four properties. Let's grab them from Leo File and just change value off top property instead of 15% that's assigned to it. Top value, then go back to lay a file on include this code here, right include centering inside parenthesis. We need to indicate proper value in case of brand. We need 15%. Then copy this line, paste it for banner and change 15% into 50%. So, as you can see, banner is placed in the centre. Actually, it's a little bit hard to see, but elements are here. Next. I'm going to center elements inside Banner and also change color. Make it white for a while, so let's use text, airline center and color white. All right, so with layout off, banner were done. It's time to sell each individual element. Let's start from first heading. Actually, those three elements will be reused in different sections. So therefore, I'm going to place them in components while select First Heading, which has class name Main heading. Let's define phone family use here phoned dancing script than increased phone size. Make it 100 pixels. Next, I'm going to make tax little bit lighter. So right Phone. Wait 300 change color. You see your color primary and lastly, create some space at the bottom. Right margin. Bottom for two weeks. So that's the way how main heading is looking. Let's go ahead and move on to next. Heading, which represents some padding so selected using class name subheading. Actually, for some padding, we need exact same properties, which we use for main heading but with different values. So it's copy all of them, paste for subheading and just change values as a phone family. I'm going to use year found Joseph incense, then decrease phone size making 60 pixels. As for phone, wait, I'm going to leave it as it is. Then change color use here. Color secondary and lastly, increased value off margin. Bottom right. 80 pieces. All right, that's all about supporting is looking good, and the last element which we need to style in this video is. But so let's go ahead and select it using class name Main BTM. First of all, let's define width and height as a with I'm going to use 100 and 70 pieces. As for height, let's define it as 45 pieces. Then let's work on tax inside button change from family. I'm going to use Joseph Incense, so let's copy it from some padding and pace it for but van defying phone size. Make it 14 pixels. Transform, taxing to opera case using text, transform opera case and create some space between letters using letter spacing one peaks. All right, so that's the way how our button is looking for now, we need to add some more stars to make it looking better. Let's change color of text. Use your call or primary, then make background call or transparent change default border into custom one right border with values one pixel solid and with color primary. After that, I'm going to get rid off default outline using outline none and lastly, changed type. Of course, er making pointer. All right, so our button is looking much better now. The only thing that we have to do is to create little hover effect on hover. I'm going to change background color and also color off text. So let's go ahead. Use again, nesting right and percent with hover. Then change background color. Yes, here called a primary. As for caller right color dark and finally, in order to make effect, looking nice. Use transition property with the values all and employees four seconds and also get rid off white collar from Vana. All right, so we have finished working on banner and actually own entire header. I think it's looking good. Now it's time to move on to the next section, which is going to be about a section. So see you in the next video. 16. Create HTML Markup for About Us Section: Okay, So once we finished working on header, it's time to create. Another new section is going to be about a section, as you remember from Project Review. It consists of two parts. I mean left and right sides on left side will have image. As for right side, it will consist off some content like headings, paragraph button and phone off Michael's. All right, let's go ahead in First of all, create HTML structure off the section after Heather, let's insert New Commons right about us than end off about us that open section elements and assigned to it close about us as beset. It will consist of two parts. They will be represented by developments. So let's open 1st 1 with cross name about us left and instant here. Image elements in source attributes. Let's indicate path. We have images, folder and image named about us I m. G. All right. That's all about first part of the section Let's go. Having created 2nd 1 open another development and assigned to it, cross about us right, so this part will consist of several elements. 1st 2 elements should be main heading and subheading, which we already created in previous section, so we just need to use them here. Let's go ahead and grab them from header paced year and just change conference for both off them right year about us. As for subheading, right introduce to Georgian dishes. So here we have image and headings, which are looking in the exact same way as headings off banner. Let's move on and create rest off the elements next, winning some for most Americans, actually, they will be wrapped by development. So let's open it with class name stars that instant Here I element and assigned to it several classes, right f A s if a star of life. And also besides that for custom styling, used another cross star. We need three icons so that duplicate it twice. All right stars will be followed by paragraph, which will include some dummy text. So let's open P elements with class name description and then insert some text, Right, Laura 50. After that, we need again for most Americans because this tax will be separated from other elements by stars. So let's just copy it this entire development and place it after Parker. Okay, The last elements which we're going to create his button. It will be similar to but in which we used in previous section. So let's copy, Eat from here paste and just change content, right? Read more. All right, that's it about structure off about a section. We created all the elements. Some of them are already styled, but we need to take a year off their layout and also in its style, rest off the arms for that. Let's move on to the next video. 17. Add CSS to About Us Section: all right, so it's time to start starting our new about a section as we set Some of the elements are already looking good because we use them previously, but we need to manage their layout, and also we have to style other newly created elements. So let's go ahead and select section element in layout file. It has clustering about us. First of all, I'm going to define height off section. I wanted to be set as 90 V H after that, in order to place left and right parts of section side by side and also center that vertically, we need to use following flax books, properties and values display flex and a line item center. So that's the way how our elements are placed. Next, we need to take a year off each part of section. Separately. Let's start from left side. It has class name about us left. Actually, if you don't remember class names of elements, you can frequently check out HTML document. So in order to select left part, let's use nesting right and percent that left. First of all, I'm going to define with as 40% then select image and define its with as 100%. Actually, we're doing that in order to make image responsive. Now it takes up full with off its parent out. All right, so I want this image to replace little bit to the left side. And in order to move it, I'm going to set position off its parent element as a relative now, then define left as minus 200 pieces. So as you can see images placed to the left side and the last thing regarding left part is to decrease slightly capacity off image because I think with dark background it will be looking better. So that's right. Capacity 0.7. All right, that's all about left side of the section. It's time to move on and style right part. Let's select development, which has class name about as right use here again and percent than dish right. First of all, let's define its width as 60%. Next, I'm going to take here off layout for that. Let's use flex books, right display flex, he noted. To place elements vertically, let's change flex direction, make it to call him and lastly, to center elements horizontally. Let's use a line items center All right, So that's the way how our elements are aligned. It's time to move on and style. Phone off Michael's and this paragraph. Let's select development, which has class name stars. I'm going to create some space on top and bottom, so let's use margin on top and bottom right? 30 pixels and that zero. Then select star itself define its phone size as 15 pixels that change color. Use your color primary and also create some space on the left side. Off each star using margin left 10 pixels. All right, So as you can see, stars are styled and the only thing that have to do it to make paragraph looking good. So let's select it. Using class name description, I'm going to change phone Family. Let's use here phones Joseph incense that increased bone size. Make it 25 peaks is said phone style as metallic. Also, let's change its color. Use your color secondary and lastly use text align with value. Justify. Okay, so no paragraph is looking much better. Actually, I think we need some space on the left and right sides for that. Let's use potting on top and bottom. We need zero and on left and right sides, right, 100 pieces and also used books sizing property with value border books, which actually allows us to avoid increase off box. All right, so the last thing that I want to do is to create some space at the beginning off paragraph , And in order to do that, I'm going to use pseudo element called First letter. So right here and percent, that first letter and right potting left with value 50 pixels. All right, so everything seems to be looking good and actual, We can say that we have finished working on about a section. Next, we're going to build little gallery. And for that, let's move on to the next video. 18. Create HTML Markup for Gallery: all right, So we have finished working on about a section and, as I promised in the last video, a stamp to move on and start creating next part of her project, which is going to be a little gallery. It will consist of six images. They will be placed in two different ropes, and also when we hover on each image, we will have a nice image overlay effect. Overall, they will be actually carts. So that's all about what we're going to do as usually. First of all, let's create HTML structure off this section. So after about a section, let's insert New Commons Gallery then and off gallery open section elements and assigned to it close gallery. Next, I'm going to insert your development, which will be rapper for all cards that's assigned to it class carts rougher. So this development will include six items in each one. We will have content off overlay and also an image. They will be wrapped by development, so let's open it and assigned to each class car. Image overlay will consist of a couple of elements we will have having paragraph and button , and they will be wrapped by development So let's open it with class name, card, overlay, then insert in it. H one heading government and assigned to it class Carb overlay Heading and insert your content. Actually, I'm going to write your just food name, but you can write anything you want. For now, it's not really important thing. Heading will be followed by paragraph. So let's open P Element and assigned to it. Class card, overlay, paragraph and right text price. Let's say $30. All right. Last element that we need to insecure is bottom. Let's make its type button. Also, we're signed to it. Class, name, card, overlay, DTN and right text. Or there? No. All right. As we said, each card will consist off content, off overlay and also an image. So it's open. I'm g element in source attributes. That's indicated part of image right images folder, An image gallery. I'm G one also a scientist. Class card. I'm G. All right. That's it. We created first card, actually. Win it. Five more cards. So I'm going to duplicate this entire development five times and then change names off images for 2nd 1 We need to calorie. I'm going to than three four five and for last one, right? Six. All right, that's it about markup off gallery. We have here six cards, but it's just pure HTML. And for now they're looking really ugly. So to start styling this section, we have to move on to the next video. 19. Add CSS to Gallery: all right, So in previous lecture, we prepared everything for gallery HTM, A structure is created and we have to start styling it. First of all, I'm going to take care of layout off carts. Overall, we have six cards, and we're going to place them into ropes. In order to achieve that, we will use flex books. Some off the styles will go to lay out a CSS file. As for carve itself, it will be a part off components. But so let's select Section Element, which has class gallery that using nesting select carts rapper and assigned to eat, display flex. So as you can see, cards are placed horizontally in a row, and now we have to start starting card itself. As we said, it's going to be a part of components file, so it's open it and select car. First of all, let's define with and height actually, in each role, I'm going to place three cards and in order to distribute entire with equally let's make with off carp 33% to be more precise, right, 33 point four threes. So for no cards are still placed in a row, we don't have to rose. And to fix that, we need to assign two cards. Rapper Flex Wrapped Property with Value Rupp. So no as a C problems speaks, carts erupt, and we have two ropes. Next, we need to define height for each car in order to make arts responsive. Let's make height off car 30 view Put with it means that each card will take up 30% off with off Vieux Port as a height. So in this case, when with off page is decreased, then size of each card will decrease. According All right, so each card consists of some contents and image in content. I mean card overlay at first images style over late, an image and then we will create over effect. So let's select development, which has class, name card over late use, nesting right and percent dash over late, make its position as absolute. And in order to define its top and left positions according to card, let's make position off car relative. All right now, it's time to give some stars to images. They should cover entire card. As you see, we have some spaces year. In order to fix that, let's select image right and percent dash. I'm G and define its width and height as 100%. So as you can see, images are stretched, they lose their quality. And in order to fix that, we have to use property called object feet with the value cover. All right, now they're looking much better, and the last thing regarding images is to decrease their opacity. Let's make it two point fight, All right, that's it about images. Now I'm going to style car overlaying. So let's define its top position as zero and left position as zero as well. Next, let's make width and height 100% as you see we used here with and hide 100% twice and I think would be better if we do it in kind of different weight. I mean, I'm going to use placeholder selector and then extend eight in both cases. So let's go to based on a CSS file and create placeholder selector for then we have to use person first sign. We should be followed by name. Let's call it full space. That then right with 100% and height 100% as well that in order to use this code, we have to write extent and name with personally sign full space. Let's copy this line and paces for image as well. All right. Next, I'm going to change background color. Let's use here are to be a value insert caller primary and capacity 0.6. Also, I want to change color over text. I'm going to make it white, and actually, we're going to use white collar for a couple of times. So let's create new variable in based on a CSS file called it Color White and a scientific . That's nice that used this variable for call a property, right call or white? All right. So is it seem. Elements of card overlay are not quite visible, and also pointer events are disabled. Actually, it happens because those elements ended up behind the image. So to fix that, we just need to use Z index property. We should have higher value than zero because zero is a default value right here. Let's say 10. All right now this issue is solved, and next thing that we have to do is to take a year off layout off those elements on going to place them in the center off card And for that, let's use flax books. Actually, we have already created mixing for flex layout. So let's included right include flex layout as the sea elements are placing the road because by default, flex direction is set us row. So to fix that, we just need to change flex direction and make it color. All right, so elements are aligned in the center. Let's go have in style each of them start from heading, selected right and percent dash heading. Change its phone family. Let's use here found new Nieto that increased bone size and make it 50 pieces. Besides that, I want to use phone weight and the letter spacing. And actually we have created mixing for text styles in which we have phone wait, letter spacing and tax transformers. Well, in this case, this mixing is almost relevant for heading. We just need to change value uppercase and use capitalized instead of it. For that, we can adhere parameter. Let's call it transform by default, make it uppercase that assigned this parameter to text, tries for property, then go back to components file and include this mixing right textiles and as an argument, insert capitalized. All right, that's all about heading. Next, we have to sell paragraph, so let's select it right and percent paragraph. Then let's copy styles from heading and make some changes as a phone family I'm going to use found Joseph incense, then decreased bone size, make it 30 pixels and also make some space at the bottom using margin. Bottom third speaks. Okay, so paragraph is ready. It's looking good. We have to move on to button, so let's select it right and percent DTN. First of all, let's define its width and height. Make wit 150 pieces. As for height, that's right. 40 weeks is then change color use here. Call a primary and make background color white. You see a variable call or white. Next, I'm going to change for my family. In this case, I'm going to use phone called Josephine Sense, Then define phone size. Make it 14 pixels. Also, I want to make it bold. Right Phone Quake bold than transform taxing to upper case and create some space between letters using letter spacing with value one pixel. All right, so for now, Button is looking good, but we have to add a couple of stars to it. Let's create custom border assigned to his values one pixel. So lead and make color primary. Then I want to make it round it for that use for the radius with a value of 30 pixels. Also, get rid off default off line and lastly, change type, of course, are Make it pointer. All right, so everything is prepared. All the elements are styled, and the last thing that have to do is to create, however effect. I'm going to hide card overlay by default and display it from the left side on hover. For that, we need to set its left position as minus 100%. Then, in order to hide it, we need to assign to card overflow heating. And now it's time to use Hover right. You're n percent over, then select. Caught over late and defined left position as zero and finally used transition right left with duration 0.7 seconds. All right, so, as you can see, hover effect works fine. I think it's looking good on actually with gallery were done. Next, I'm going to create footer, so let's move on to the next lecture 20. Create HTML Markup for Footer: So it's time to create one of the last parts of her project. In this video, we're going to start building Footer, I said, one of the last parts, because after creating Footer will build last section, which is going to be a not poor with hamburger menu. Okay, so as it was previously in this video will create structure off footer. I mean html markup. So let's go ahead and do it after Gallery Open, New comment and right footer that end of footer, open footer elements and assigned to it class footer. So this section will consist of three different parts. We will have logo and names like we have them in Header. That next part will include social media icons, and finally, we'll will have little paragraph with copyright text. All right, let's go ahead and create them open development and assigned to eat class Footer, header. Then I'm going to grab code from header. I mean logo and names and paste them here. Actually, those elements are older. This style we will just take a year off their layout, so that's it about first part. Next. As we said, we need to insert here some social media icons. So it's open and other developments and assigned to it class footer social media than inside the developments open you will with class social media. We will have four different social media icons, so in severe Airlie element with class name social Media item L I Element will be followed by Link, which will have close social media link. And then let's instant you phone awesome Aiken open I element and assigned to it following classes right F A B f A Facebook square. All right, that's it. We have created first Social Media Hicham overall. Win it for off them. So let's duplicate Ally Element three times and change class names for I elements for 2nd 1 We need instagram that next one will be Google Plus Square and for a last one, right, you two all right, so he would have icons on. It's time to move on to the last part of Footer. As we said, it's going to be paragraph for copyright text. So let's open development and assigned to it class photo copy right then inside it. Open P element with class name, footer, copyright paragraph and insert content. You see your copyright sign right and percent copy. Semi Colon, then copyright restaurant Georgia and all the rights resort. All right, that's it about Footer. We have prepared content of it and in order to make it looking good, let's go ahead and move on to the next election. 21. Add CSS to Footer: all right. In the last video, we prepared markup off footer. So let's go ahead and start styling It Footer is going to be kind of simple section because we don't have here many elements, but it will be looking nice. First of all, I'm going to take a year off layout off all three parts. So in layoff, I'll select Footer at first. Let's make some parting on top and bottom right, parting seven pixels on top and bottom and that zero. Next, I'm going to use flax books. I mean, we need to include here, mixing called flex layout and then make flex direction column. So, as you can see, elements are placed vertically in the center, and now we have to move on and style each part individually. First, we have Heather, which consists of logo and names. Actually, those elements are all over the style, but they are not aligned quite well. And in order to fix that, let's seize again. Flax books Select footer, header right and percent header and assigned to it, this plate flex. Then use a line item center and also in order to make some space at the bottom. That's right, margin. Bottom 70 peaks is all right. So Heather is looking good, and actually, we're done with it. Next. Winnetou style social media icons. So let's go ahead and select U Elements, which has class name Social media. I'm going to place icons horizontally in a role. And for that let's use again. Flex books, right display, flex, then define with Make it 300 pixels. And in order to make some space between icons, let's use justify content space between So as you can see, icons are a line, but I think we need some space at the bottom. So let's add to you element margin bottom 70 pixels. All right, that's it about you elements. Next, I'm going to select L I. Element, which has class name, social media item so right and percent item and get rid off default bullets use here least south. Not all right next minute to make those icons looking good for that, I'm going to select Link Element, which has class names, social media link right and percent link. First of all, let's get rid off default styles using text decoration. None that increased bone size, make it 50 pixels and change color use here. Color secondary. All right, so Aikens are already looking good. Last thing regarding them is to create little hover effect on hover. I'm going to change color off icons so right n percent over and change color. You see your caller primary and, lastly, used transition with values, color and 0.7 seconds. All right, so everything works fine. And in order to finish styling this section, we need to take a year off this paragraph. So let's go ahead and select it. Using class copyright paragraph change phone family. Use your phone's Joseph incense, then defined phone size. Make it 18 pixels change color, use color, secondary. And lastly, I'm going to use mixing, which we created for text styles. So let's include it. As you know, by default. It makes text uppercase, but in this case we don't need it. We need to make text capitalized. So as an argument, let's insecure capitalize. All right, so everything seems to be looking good on. We have finished working on Footer. It's kind of simple one, but I think it's nice. Next we need to create enough bar with hamburger menu, and for that, let's move on to the next lecture 22. Create HTML Markup for Navbar: All right, so we just finished working on footer. And actually, all the sections are created except now part we're going to build now for which by default will be hidden. We will have hamburger menu. And when we click menu, I can not or will be displayed with some nice effects. So during building this section, you'll meet some cool things, and I think it will be really interesting. Okay. As usually in this lecture, I'm going to create html markup for Knop or so at the top off our HTM of documents. I mean, right after opening body Tuck, insert New Commons right now for than end off. Now bar that open up elements and assigned to it class. Name enough. But so s We said we will display navigation on click events and we can create click event with checkbooks and label. You might already know how to do it, but if not, you will meet this technique soon. So first element that I want to insert year is going to be input with type checkbooks. Also, we need idea tribute. It's a scientific value check and then at cross with value checkbooks. Next, I'm going to create many waken, which will be represented by three lines. So let's open developments with cross name hamburger menu. In order to create click event, we need to use label elements, which actually should wrap those MACHIN three lights in order to connect checkbooks and label values off I. D. And four attributes should be matched. So we have here I d with the value check. So we need to right here, check as well and also assigned to label close with value menu. All right, so the line's off menu Aiken will be represented by developments. That's open it. It will have two classes. 1st 1 is going to be four general styling right menu line. As for 2nd 1 it will be four individual styling. So right menu line one. Let's duplicate this line twice and change class names right here, manual lying to and three. All right, that's all about Menu Aiken. Next, we need to create navigation itself. It'll consists of two parts. We will have left and right sides, so it's open development and assigned to it class. Name enough bar navigation, then inside it open another development which will belong to left site so Let's give it class enough. Bar navigation left. Actually, this part will consider self images. We will have three images, so that's insert here. I m g element in source attribute. Let's indicate part of image. We need to your image called enough. I'm g one also assigned to i m G Element Classes left. I'm G and left. I'm G one. As we said, we will have three images, so that's duplicate it twice and change image names and also class names we need to you not . I'm going to also class named left I'm too. And then three. All right, that's it about left side. As for right side, it will consist of least in which we will have some least items. So it's open developments and a scientific class name enough barn navigation for right. Then inside it. Insert UAL elements with class name novel East. Overall, we will have six items, so it's open ally element. It will have class, not least item l. I will be followed by link, which should have class name not least link and as I first least item. That's right. You hope so. We will have six items. Let's duplicate ally element five times and change text of each item for 2nd 1 right about us. Then gallery. 3rd 1 is going to be reservation. Next we will have services. And for last one, right content. All right, that's it about structure off napper. As you see, it has messed up Intar Page. So we need to take here off that and let's start doing it in the next video. 23. Add CSS to Navbar: all right, so structure of number is ready. For now, it's looking really awful. And as I promised in previous lecture, we have to start starting it. First thing that I want to do is to decrease size of images in order to make working process little bit more convenient. So let's select images using common class left, I'm G and assigned to it with for no as 300 pieces. Next, I'm going to place left and right sites side by side. And for that, let's use flex books. Select not bar navigation for that at first, select not for itself and then inside it right and percent navigation and assigned to it display flex so as you can see images and least are placed side by side. Now we have to stall each part individually. Let's select left site right and percent left define its with as 50 viewpoint with and hide as hundreds be age also changed. Background color. I'm going to use year called or dark. Actually, we need same for right site. So let's copy this entire code paste, then change left into right, and also, instead of cold or dark, let's use color one F one D wanted. All right, So as you can see, both parts are aligned fine, and now it's time to style elements inside them. Let's start from left side. I'm going to align those images separately for that. Let's assign to them position absolute. Actually, that's put this code inside here and right position. Absolute. In order to manage layout off images, according to its parent element, we have to define its position as well. Eventually we will need fixed position for left and right sides. So let's go ahead and assign fixed position to both of them, right position fixed and then do the same for right side. So, as you can see now for is no longer feasible because it ended up behind header. And the reason is that in HTML, document Heather is placed after knopper. Therefore, it has higher precedence. So in order to fix that, we need to use Z Index. But the index property doesn't work if we don't define position for element. So let's society enough bar position relative and then use the index with higher value. Let's say 200. Besides that, we have to define left and right positions for both sides. For now, let's set both of them as zero right, left, zero and right zero. All right, so we have managed layout off both parts off now far, and it's time to align those images individually. Actually, for now we have with off image set as 300 pixels. But in order to make them responsive, I'm going to change it and make 50%. It means that each image will take half off with off left part, and if left side is decreased, then a ways off image will be decreased accordingly. All right, let's align each image individually. Select 1st 1 with class name left. I'm G one and define top and left positions as 15%. Then duplicate this code twice. Change class names we need to your left. I'm Judy, too, is an three and also change values of top and left properties for second image. We need 35% then 25. As for 3rd 1 right, 55 35. All right. So as you can see, images are aligned nicely and before we move on to right side, I'm going to add some more stars to them. Let's create shadow effect. Using box shadow, Insert your values zero 15 pixels than 60 pixels as a color used are to be a call or black with capacity point. For next, I'm going to decrease slightly capacity. Let's make it 0.7. And lastly, let's make corners off images slightly rounded, using border radius with the value 10 pixels. All right, that's it about left part. It's looking good, and we have to move on to the right side. We have here several least items I'm going to start them, and also we will create little, however effect. So first of all, let's take a year off. Lay out. I want to place least perfectly in the centre, and I'm going to do it using flex books. We just need to include here, mixing called flex layout so list is placed in the center. Let's move on and style items select least elements which has class name not least then inside it. Select item right and percent item and get rid of default bullets using least style, not then select a link element right and percent link change. Phone. Family. I'm going to use your phone's dancing script that increased bone size. Make it 50 pixels. Also, I'm going to include here mixing, which we created for textiles. So right include text styles and as an argument, Let's ends of your capitalize because by default we have upper case, and in this case I don't want to use it. Next. Let's change color, use color, secondary and also get rid off default styles using text decoration with value none. All right, so that's the way how at least items are looking for now we need to align them in the center and also I'm going to create some space between them. As you know, Link Element is an in line element. Therefore, we cannot use margin with it. So at first we have to make element as a block level. That's right. Display block that used margin with value 20 pieces and lastly aligned text in the center right text align center. So that's it about styling. Items lasting regarding them is to create hover effect on hover. I'm going to change color and also in order to make the fact looking nicer, we will increase space between letters. So that's right and percent, Hohler. Then change color. Use your color primary. Then write letter spacing with value four pixels and lastly, used transition, right? Oh, with duration 0.5 seconds. All right, that's all about right. Part off now, Bar. And actually, we have finished styling both parts. Next minute, a style icon off menu. And also we need to make hamburger menu working. In order to do that, let's move on to the next lecture. 24. Make Hamburger Menu Work: All right, So now poor is ready. It's tiled. And, as we said, we need to create hamburger menu. First of all, it's style menu Aiken. It will be represented by three lines We have already created HTML market for menu. I could, but for now, lines are not visible because we don't have any content inside developments. So before we actually start styling menu Aiken, I'm going to hide those two parts of number. I'm in left and right sides, so it's defined their left and right positions as minus 50 view put with All right, so now for is heating, and it's time to start working on menu I could, which actually will be a part of components file. So let's go ahead and select Development, which has class, name, hamburger menu and at first define with and hide. Let's make both of them for two pieces. Also, I'm going to change background color for development for a while in order to make it visible. Let's make it read. So here we have our development. Next, I'm going to place it on the right side of page. For that, let's define his position as fixed and then use top and right properties make top position 10%. As for right, we need to 5%. All right, so Aiken is aligned in the right way and Santa style lights. They erupt by label Element, which has class name menu I wanted to take up full with and hide off its parent element. So we have to define width and height as 100%. Actually. Recently, we created placeholder selector called Full Space, which holds those properties and values. So we just need to extend it here right extent, full space, then select line itself. It has class many line so right and percent line. Let's make its with as 100% then hide defined as four pixels and change background color. Use your color primary. So here we have our lines, but for now they are stick to each other in order to separate them. I'm going to use flax books. Well, it's a sign some flex properties to parent element. I'm into menu. It's right display flex, then flex direction column and justify content with values pace around. So now lines are separated and actually, we all know really can remove this background color. We don't need it anymore. And lastly, let's make type. Of course, sir. Pointer. All right, that's all about styling. Many Michael. Now we need to make it working. When we click it, it should be transformed into X and also left and right parts off now, or should be displayed from left and right sides. So we need to create a click event. And for that we have too many polite on by input and label. As you know, I D. And four attributes have same values here. Check. And it means that when we click label in this case menu Aiken, then checkbooks will be checked. In order to prove that, let's click Aiken and you can see that checkbooks is checked on. Next Click is getting unchecked. So this connection alo. So to define styles in different conditions, we can apply some CSS styles while check boxes checked so on click those stars will be applied to, and then when we click again, they will be removed so overall we can create click event using just pure HTML and CSS. All right. First thing that I want to happen on Click is to display left and right parts of Knopper and we have to do it in the following way. First minute to define state off checkbooks as checked. So it's select import elements which has class named checkbooks. And then we need to use pseudo class called Checked. So it means that now we can define styles which we need to be applied when check box is checked, we need to move left and right sides. For that. We have to define their left and right positions. At first, let's do it for left side. In order to selected, I'm going to use one off the CSS Combinator, which is called General Sibling Combinator, and it's expressed by Till the Sign. Actually, this is pure CSS and not suss, and it's sort of advanced stuff. So if you're lost in this terminology and those things are kind of confusing for you, then I recommend to check out our CSS boot camp course in which we explain those things in details. All right, so let's select left part right here in our part navigation. Then that's copy, eat paste and at year left by default, left position is satis minus 50 viewpoint with, and it's hidden, so in order to display it. We need to define left position as zero. So if we click Aiken, then left part will be displayed, and on next click, it will be here, as you mentioned, Left part is displaying when Shaq boxes checked. So that's the way how you can create click event CSS. All right, let's do the same. For right part. Let's duplicate this code and change left into right. So if we click again, then both parts will be displayed. But we have here a little problem. As you see many, why can't ended up behind NAFTA, and it's no longer visible. In order to fix that, we just need to assign to it Z index with higher value. I mean higher than Z index off, not bar, which is set as 200. So that's right. The index and a sign treats value. Let's say 300. So now the problem is fixed. Menu icon is visible when now poor is displayed. All right, so left and right sides are displaying on click. But we need to make this effect nicer. So let's assign at first to left part transition with values left 0.8 seconds and also I'm going to use your function called cubic busier, which actually allows us to create custom transition effect. That's easy for your values. One 00 and one. Then copy this line, paste it for right part and change left into right. So when we click, I come now for is displaying now in much effective weight, and I think it's looking really good. All right, Last thing that I want to do is to transform Menu I coming to X, and also I'm going to rotate Entire. All of those things should be happened when we click Aiken. So again, going to select checkbooks with pseudo class checked, then again used till the sign and select hamburger menu, then right menu. So I'm going to rotate Aiken according to Z access by 90 degrees. So right transform, rotate, see and insert here. Argument 90 degrees and also assigned to menu transition transform 0.5 seconds. So if we click, then I can will be rotated by 90 degrees. After this rotation, we have to rotate person third lines in order to create X, and also we need to hide second light. So let's go ahead and copy this code then instead of menu, win it here class menu line want and also instead off 90 degrees. Let's insert year minus 40 degrees. Thank duplicate disco. Twice. Change class names we need to your menu line to and than three. As we said, we need to hide second line. So that's a scientific capacity. Zero. As for 1/3 line, when it rotated by the same degree but with opposite direction. So it's got rid off minus sign from here. And lastly, use again. Transition with values all than 0.5 seconds. Actually. First we need to rotate entire Aiken, and after that we're going to get X first facts. Duration is set US 0.5 seconds. Therefore, we need you DeLay with same duration 0.5 seconds. Let's click and you see that we don't have any ex here. We need to fix that problem. So here we are able to do it using transform translate. But besides that, we can solve this issue and kind of different way by default. Origin off rotation off lions is set a center. I mean, they are rotated according to their center. In this case, we need to make origin off rotation right sides of lines. I mean the ends off lights in CSS, we have property called transform origin which should be assigned to line. And it should be said as right. So if we click, then you will see that everything works perfectly. We have here really nice and effective hamburger menu. All right, so the last thing that have to do before finished his lecture is to hide this checkbooks. And I'm going to do it simply by using one of the HTML attributes called Hidden, which actually is an equivalent of display. None. So let's assign age too. Input element, right? Heated. All right, that's it about Knopper. And actually we can say that we have finished creating our project. The only thing that have to do is to make it responsive on different screen sizes. And for that, let's move on to the next video 25. Make Restaurant Project Responsive - Part 1: all right, so have finished building our first project restaurant, Georgia. All the sections were created and styled, and in order to make them looking perfect on all screen sizes, we have to make project responsible as we. All of the mentioned in previous videos Project is built on large screen size. I'm in screen size, which has, with 1920 pixels and height 10 80 peaks of actually we used desktop first approach. So during building this project, if we were using relatively smaller screen size, then sometimes project might not be looking quite good. And now it's time to fix that. As first, I'm going to make sections responsive, and then we will take a year off. Now park. First of all, let's inspect the page, use responsive mode and find first break point. So the first break point on which we need to make some changes, I think, is 1600 pixels because we need to decrease slightly phone size, off main heading subheading and also this paragraph. So we need to create first break point with Max with 1600 pixels. In general, when we write pure CSS, we create those break points and inside it we select different elements and assigned to them different stars in suss. We can do it in kind of different way were able to use nesting, which will hello us to avoid selecting elements all the time. So we have main heading and components follow, and let's create inside it media with Max with 1600 pieces. As you see by default, phone size is set US 100 pixels so that decrease it and make it eight pixels. Right Phone size 80 picks is let's copy this coat and use it for subheading as well. Instead, off 80 pixels. Let's use 50 pixels, and also we need to align Texan the center using textile I center. Actually, I think will be better if we assign this style to subheading by default. So let's move it up. And lastly, I'm going to decrease space between subheading and those stars. So let's right margin bottom 50 pixels. All right, that's it about subheading. And the last element which we need to work on on this break point is this paragraph. It has class named description on its a part off layout file, so it's go had find this element, then paste here media and make phone size as 18 Peaks is all right. That's all about this break point. I think everything seems to be looking good. Next one is going to be about 1300 pixels on the break point. We need to decrease again. Phone size, off subheading and also space between subheading and stars. Besides that, we have to make some changes in about a section. So let's go to components file and duplicate code, which we wrote for subheading. Then change 1600 pixels into 1300 pixels. Decrease phone size. Let's make it 40 pixels and also a sign two margin. Bottom third speaks is next. I'm going to move left image. Listen to the right side. So let's go to layout file. We have here left part off about a section Let's create your media with Max with 1300 pixels and insert your left position with value minus 150 peaks is last thing on. The break point is to decrease parting on left and right sides for right part. Let's copy this code, then pace it inside right part and insert here. Parting on top and bottom zero and 50 peaks is on left and right. All right, so on 1300 peaks us everything is looking good and we have to move on and find next break point, which I think is 1000 pixels because after 1000 peaks is we have to make some changes. I'm going to start with logo, so let's go to components file. But actually, before we create new media, I want to mention that we have here tiny yellow spot, which is a default underline off link element in Google chrome. It's not quite visible, but you may see eat in other brows, so in order to get rid of it, we just need to use text decoration with value none. All right, let's create new media insecure max with 1000 pixels, then decrease phone size, make it 50 pixels and also grab with and hide from here and make both of them 90 pieces. All right. After that, I'm going to decrease slightly size off main name, so let's go ahead. Copy this code pasted inside main name and leave here. Just phone size with value for speaks is all right. Next we need to work on main heading and subheading. We need to decrease their phone sizes well, so let's go ahead and copy this code paced eat for main heading and change value off phone size. Make it 60 peaks is and then do the same for subheading. Change phone size and make it 30 pieces. All right, so headings are looking good and next I'm going to move on and work on stars. First of all, let's decrease space on top and bottom actually starts our parts off layout than paste here . Media and right margin on top and bottom 15 peaks is and zero on the left and right sides. Also, I'm going to decrease their sites. So inside star paste, the guy media and change phone size make it 12 peaks. All right, so that's it about stars. Next, I'm going to decrease phone size of paragraph. And also, I think, social media icons inside footer our little bit bigger. So we need to decrease their sizes Well, let's go ahead and inside description paced media and make phone size 14 pieces, then do the same for social media. Icons make their phone size 35 pieces. All right, so that's all about 1000 pixels. Next break point is 900 peaks is because on that break point, elements off image overlay are not looking quite good. So let's go ahead and inside components file. Find those elements 1st 1 that I want to work on is heading. So let's create new media. Incited Insert here max with 900 pixels and decrease phone size right 35 pieces, then grabbed his code and pasted for paragraph change. Font size. Make it 20 pieces. All right, Last element off image overlay is button, so let's paste media for it as well. Then decrease phone size, make it 12 pixels and also adhere with a height as a with right 130 pixels. As for height assigned to eat 30 pieces, All right, that's it about image overlay, and I think on the break point, we just need to decrease height off about a section because all the other sections are looking good. So let's go to lay out dot s CSS file paced year media and right height with value 70. The age. Okay, so on 900 pixels, everything is looking good. We have to move on and find another break point and let's do it in the next lecture 26. Make Restaurant Project Responsive - Part 2: all right. So impressed. Lecture. We made Project responsive on a couple of break points. The last one was 900 pixels on which everything looks good. Let's go ahead and find another break point. I think next one should be about 800 peaks is because some of the elements are not looking quite good. First of all, I'm going to take a year off many Aiken, because on the screen size it seems to be much bigger. Many American is a part off components file, so let's create year new media and insert marks with 800 pixels, then copy within high from here and change values for both of them. Right? 35 pieces. Also, I think we need to decrease height off, align itself. So let's copy this code and pasted inside line, then get riddled with and change height. Make it three pieces. All right, so many icon is looking better Next. I want to take a year off banner button. I think it's a little bit bigger on the screen size, so let's paced media inside bottom, then change with make it 150 pixels, then leave height as it is and at here. Phone size, 12 pieces. All right, so that's it about button. Let's move on to about a section I think would be better if we hide left image at all, because we need more space for right part. So let's go to lay out a CSS file, any side left part insert media, which is all of the copied and right you displayed. Not besides that, I want right part to take up full with that is available inside this section. So that's paced year again, media and make with 100%. All right, So the last element, which I want to take a year off and make looking better, is paragraph off footer, so it's go ahead an insert here media, then change with Make it 70% in order to place it in the center. I'm going to use margin or oh, and lastly, a line text in the centre using text align center. All right, that's it. About 800 pixels. I think everything seems to be looking good. Let's move on and find next break point. I think it should be 650 pixels because elements off image overlay are quite bigger So let's go ahead and take care off them. Image overlay is a part of components file So first of all, let's work on heading. Create new media instant earmarks with 650 pixels that decrease phone size. Make it 25 pixels, then copy this code and pasted for paragraph change. Phone size make it 15 pixels. So the last element, which we need to take care off his button. Let's paste media here and make phone size 10 peaks us also at here with 100 pixels and height. 30 pieces. All right, that's it about this break point. We don't have to do anything more here, and I guess we're getting closer to the last break point, which actually should be 500 pixels. Let's start from many Aiken on the break point. We need to decrease its size. Actually, I'm going to duplicate this code, then change marks with as 500 pixels and change values off width and height as 25 pieces. In the same way, I'm going to decrease size off line. So let's duplicate here this code as well change marks with make it 500 pixels and assigned to hide two pieces. All right, next element, which we need to take here off, is logo, so that's copy this code and pasted inside logo Change value off height. Make it 50 peaks is than at here with with the same value. Also decrease phone size maggot 30 pixels. And lastly, I'm going to decrease with a border for that. Let's use property called border wits with value to pieces. All right, that's it about logo. It's looking good. Next, let's make some changes for May name. Let's insert your media and then right phone size, 20 pixels and texture line center. Besides, that would be better if we decrease phone size off sub name. Let's copy this code and make phone size 12 weeks of All right, so logo and those names are looking better, and I think we need to move those almost little bit up for that. Let's go to layout file by default. It's tough. Position is set as 50% and in this case, on 500 pixels, I'm going to decrease this value. So let's pace to your media. Then grab include from here and change its argument right here. 12%. All right, so with Brent were done. After that, let's take a year off main and subheadings. Let's go to components file and inside Main heading. Insert media change phone size. Make it 42 pixels and also at margin bottom with value 20 pixels. Then grab this coat and paste it for subheading. Change phone size right here. 20 pixels and also changed value off margin. Bottom right. 10 picks. All right, that's it about Maine and subheadings. They're looking good. Next element, which needs some changes, is Button, which is a part off banner, and also we need to take a year off about a section. Let's go ahead and duplicate this coat. Change marks with right 500 pixels, then decrease with right 130 peaks US as a high, too right, 30 pieces and lastly, change. Phone size, right, 10 pieces. All right, So as you can see, buttons on Banner and insight about a section are looking better. Actually, I think we can decrease lightly phone size off this paragraph. So let's go to lay a file and inside description, insert media and make phone site 12 pieces. All right. Next, we have to move on and style image overlay for gallery, I think would be better if we stop here and continue in the next video. 27. Make Restaurant Project Responsive - Part 3: Okay, So, step by step, we're finishing. To make our project responsive, we have to do a couple of things on 500 pixel screen size. And then finally, we have to make now part responsible. So that's all what we have to do. In the last video, we finished working on about a section, and now we have to move on to gallery. And then we have to take care off food regarding gala. Really? On The thing that I want to do is to Hight heading in paragraph off image over late because I think there is not quite enough space to display all three elements. So let's go to components file and inside, heading off overly right media instead marks with 500 pixels and then right, you display none. I'm going to copy this coat and use it for paragraph as well. So that's it about gallery. Next, we have to move on to footer, which is a part off layout file. First of all, I'm going to decrease parting on top and bottom. So let's right media marks with 500 pixels and inside here, potting on top and bottom 40 weeks is and zero on left and right sides. All right. Next, I'm going to decrease with off wrapper off social media icons because there is too much space between them. So let's copy this coat, insert it here and right with 200 pieces and also decrease space at the bottom off icons. Right margin. Bottom 40 weeks is all right. After that, I'm going to decrease size of icons and paragraph as well. So let's go ahead and paste here. Media, then right phone size 25 pixels. Grab this coat pasted for paragraph as well. And instead of 25 pixels, right, 14 pieces. All right, that's it. Actually, all the sections are responsive on most criticizes, and the last thing that have to do is to make enough about response. In case of number. We need to start from larger screen sizes. Let's go ahead and find first break point on which we need to make some changes. I think after 1300 pixels, we need to increase with off images slightly. For now, they take up 50% off the left part and will be better if we increase and make it, Let's say, 55% now. Poor is a part off layout file, so let's go ahead and inside Left image. Create new media with Max with 1300 pixels and insert year with 55%. All right, so now images are looking better, and on the break point, we don't have to do anything more. Next break point is going to be about 1000 pixels, on which we need to increase a gang sides of images, and also we have to change slightly their positions. So let's go ahead and duplicate these code change mugs with make it 1000 pieces and increase with to 65%. So the sizes off images are increased, and now I have to move them a little bit to the left side. Let's copy this coat and pasted for first image and right left position with value 5%. Then copy this code an incident for second and for third images for second image when it left position as 15%. As for 3rd 1 that's make left position as 25%. All right, that's it. About 1000 pixels. Let's go ahead and find next break point. I think next one should be 800 pixels on which I'm going to hide Left part little. So let's create new media with Max Wit 800 pixels and insert here. Display none. So, as you can see, left side is hidden. But besides that, we need right side to take up full with which is available. So let's copy this code pasted for right side, as you can see by default with off right parties. 50 viewpoint with We need to change it and make it 100 of you part with and also, in order to be right part hidden, we need to set it right position as minus 100 uber with All right, So everything works perfectly and on 800 pixels were done. Last thing that I want to do is to decrease phone size off menu items for smaller screen sizes. So the next break point, I think, should be 600 pixels. Let's create new media insert marks with 600 pixels and right to your phone size 40 pieces . All right, so finally we're done. We have finished making our project responsive on different screen sizes. I think everything seems to be looking good, but of course, if you think that you can make it even better. Then feel free and play around with different elements and sections on your own on different break points. Besides that, you can add your own sections and make this project even more. Reacher. Okay, I hope you enjoyed this project and got your hands dirty in SAS. Next, we're going to move on to sort off advanced sauce topics and also will build another project based on those advanced things. All right, see you in the next video. 28. SASS Data Types - Part 1: all right. So in previous sections, we introduced to basic stuff off suss. And based on that, we built our first project. As I promised, we're going to go through some advanced topics of suss, and then we will build another project in which people use, um, advanced stuff. First thing that we're going to refer to is data types in Suss. Actually, if your family with any off the programming languages, then you should already know what data means. But if not, it's not a problem, because it's very simple to understand. So insults. We have seven different data types. They are numbers, strings, colors, least maps, billions and no. All right, let's go ahead and describe each of them. I want to mention that most of these data types we have already used in previous lectures, but now I'm going to describe them in details. So I have created new folder on desktop called Advanced Suss, in which we have some files and folders. Let's open it in brackets. So we have here index dot html file package dot Jason, which is already prepared in CSS folder. We have main dot CSS file and in s CSS folder I've created Main Door. SCS is far. Let's open terminal, then navigate to this folder right CD desktop, that silly advanced suss and run command and PM Run watch. All right, so we're ready. Let's go back to data types. I'm going to start with numbers. Actually, I will write some damage styles. I'm not going to create some HTML elements because I just want to describe what kind of data types we have incest. So let's start from numbers. Suss supports integers like we used in case off, Let's say phone, Wait, then we can have numbers with decimals like it's in case of line height. And also we can have numbers with different measurement units. I mean, that's a pixels. Or we can have Rams GM's person teach and so on. So all of those values are valid numbers in sussed. Next, we have strings. Actually, strength represents some text values, and they can be expressed by quotes or without clothes. For example, we can write for phone family values like Helvetica and really Sansa Reap. So here we have three string values. 1st 1 is written with quotes. As for second and 3rd 1 they are string values as well, but they are expressed without courts. Besides phone family, we can use, for example, front weight, bolt or phone style, italic and so on. All right, so those were strings Next data type. We have colors. Each color value, which we can use is sussed data type. Let's say we're able to use named colors, for example, for red. Also, we can use packs of decimal values besides that were able to use RGB values and also are to be a in which we can define capacity. Off color colors can be written in H S L values, which actually stands for hue, saturation and lightens. So those are different color values and actually colors is SAS stated type. All right, Next day type that I want to talk about is least somehow they are like a race you may have Some knowledge about race actually least can store multiple values. For example, who can define margin with different values? Let's say 10 pixels, 15 pixels than five pixels on 20 pieces. So in this case, we have least and its values are separated by space. But besides that, values can be separated by commas. For example, we can use again Phone family with different values. Let's say railway does is and little So this is a comma separated list, but each individual value itself is a string. Besides that, we're able to create at least which will include different data types. For example, we can use border, which can take values like number right, one pixel string like solid and color, like red. All right, so that's it about, least next. I'm going to move on to maps and let's do it in the next lecture. 29. SASS Data Types - Part 2: Okay, So in previous lecture, we discussed some data types and suss. I mean number, strings, colors and least, And now it's time to move on and describe next Data type, which is called NAP. Actually, map can store data in key value pairs. It's like an associative array, which means that it stores both keys and values associated to those keys sin. Tactically, maps should be surrounded by parentheses and mentioned Key value. Pairs should be separated by commas. All right, let's create map and call it colors, then insert here some colors as a key. That's right, primary and the scientists colder but say red, then for a 2nd 1 right secondary Corinne and then tertiary with value blue. So as you see after first and second piers, we placed coma. As for the last one, we don't need to use it. So that's it. What map looks like. It contains some data, and now we are able to use the data in the following weight. Suppose that we want to change color and background color off one off the elements. Let's say H one. So in order to get color from map, we have to use method called mop get, which should say two arguments. 1st 1 is going to be the name off map in this guy's colors. Esports 2nd 1 It should be a key at this time. Let's use primary. So if we check compiled coat, then we will find that H one has color set as red, actually, which we indicated as a primary color. In the same way we can change background color. Let's use again mop. Get that insert name of mob colors and key secondary. So as you can see, everything works fine. All right. Instead of those strengths, I mean primary, secondary tertiary were able to use numbers. For example, we can change them and write one to at three. And also we have to change here keys. So if we check compiled coat will get the same result. Besides that, you're able to use kiss with coats. Let's get back here primary and surrounded with quotes. Still, code will work just fine, and we'll get the same result. All right, so that's the way how we can create maps and how we can access on data. Actually, it's really handy to and using it. You can organize and structure your coat in. Much better. Wait. Okay, so the next day to type which I want to talk about is bully. Um, it has two possible values. True or false. Basically, those values are used with conditional statements, like evil statement, which will be disgusting comic lectures. So for now, I'm not going to go deeper with Boolean dates type. Just remember that it has two values through or false. All right, The last data type, which I'm going to describe is now now is just empty. It doesn't have any value at all, So we can say that it represents an empty value. One thing that should know is that it's case sensitive. I mean, you should strictly right now with lower case. Otherwise, it will be just plain string value you can use now when you want the value off. Something to be nothing. All right. That's all about data types in suss. Some off them will be referred to for multiple times incoming lectures. So if something wasn't clear for you, you don't have to worry about it. Okay. See you in the next video. 30. SASS Interpolation: all right. Now it's time to introduce you to another topic and Suss, which is called interpellation. This topic is not unique only to Suss, because you may come across this thing in different programming languages. For example, if your family or with Template Littles in year six version off JavaScript, then interpellation is quite similar to it. So what does interpellation mean? In simple words? Were able to create variables and then, using interpolation, we can use those variables in either selectors or property names or in their values. All right, let's go. Haven't seen practice what we're talking about. First of all, I'm going to create a couple of variables. 1st 1 is going to be variable B. Let's assign to eat string value, border. As for second variable, let's call it see and assigned to it value call up. Okay, let's say we have aged two heading elements, and we want to assign to it a couple off properties and values. So let's select age, too. Suppose we want to use here property called box sizing with value Border box. Also, let's say we need to use border with following values one pixel solid blue. Besides that that said some more styles, right color read and background color green. Okay, so as you can see here, we used border twice. I mean as a value and as a property name. And also we have here color twice as well. So that's the moment when we can demonstrate how interpolation works. Incest We have here variable B with value border, and we can pass this variable in both cases where we're using border. In order to do that, let's delete border from here. Then we have to place pollen sign, which should be followed by Carla Prices, in which we have to pass name off variable this case be Let's do the same for second border . So if we save and then check compiled coat in maine dot CSS file, you'll see that everything works fine. We still have border in both cases, if you notice we created string values with quotes, but in compiled code, we don't have them because interpolation gets rid off quotes in the exact same way we can replace colors. Let's write again. Pound sign inside cola braces, insert variable, see, and then did the same for background color. Again. Everything works perfectly we have here the same result. And actually, that's the way how interpolation works in suss that both kind of simple example. But in real world, you can make your suss code much more concise and flexible, using interpolation, especially when you use loops, which actually will meet incoming lectures. All right, that's all about South interpellation. Let's move on to the next lecture. 31. Loops: all right, So in the last video, we talked about suss interpolation, and now it's time to move on and introduce you to another suss topic. It's called Loops. Actually, you can meet loops in almost every programming language, and it's really handed to. If you're not family with looks yet, then we can define it in the following Weight. Loops are used when you want to run the same code block over and over again, each time with a different value. We have multiple types of looks and suss, and we're going to describe relatively popular ones, which are for hope and each look. All right, let's go ahead and create some HTML elements. I'm going to create paragraph with class name partner off one that instant years and dummy text, then duplicate this code three times and change class names as paragraph two three and for all right. Suppose that we want to assign to each paragraph different background color. In CSS, we have to select each paragraph individually and then assigned to each one different background color in suss using for loop. We can do it in much more simple and flexible. Wait, at first I'm going to create mop, which will hold four different colors. Let's call it colors and insert you several key value pairs. 1st 1 is going to be red color. Then for 2nd 1 use green. Next will be blue and for fourth caller, let's use orange. All right, so we have here four different colors and I'm going to assign to first paragraph called the Red than to 2nd 1 Color green and so on. For that, we have to use for look and in order to create it, we need to use a couple of key words. At first I'm going to ride the coat and then I will explain what those key words actually mean. So we need to write and sign than four. That variable I from one through four. So here we used variable I, which actually is something like it. Aerator or counter. It changes value on each iteration. In this case, On first iteration, I is going to be one on second integration. It should be two than three and then four. Next keywords, I mean from and through, as their name suggests, mean that I will change its values from one through four and code block will stop execution . SNS fourth iteration finished. All right, enough talking. Let's right the coat. I'm going to select paragraph and instead of writing manually 123 or four, I'm going to use your interpolation right pound sign and inside curly braces instead. Variable I and then use background color in order to get colors from map. As you already know, we have to use function called Mark Get, which takes two arguments. 1st 1 is the name off map colors. As for 2nd 1 we have to past year needed keep again instead of numbers. Let's insert you variable. I all right before I said this code and see the results. Let me explain what's happening here on first situation. I equals to one. It means that we have here. Paragraph one is getting value off first player for background color, which is red. Then, on second inspiration, I becomes, too. We have here Parker off two and is getting second color from up, which is green, and the same happens on third iteration. And on 4th 1 after that code, block stops execution. So let's save this coat. As you can see, each paragraph has different background color, and if we check compiled code, you will see that. So that's the way how full it works and you agree that it's really handed to. Instead of selecting each paragraph and assigning to a different background color, we can write just this couple of lines of code, which is more efficient and flexible. One more thing regarding Fall Up is that instead of keyword through, we can use keyword to, which means that there will be only three iterations because in this case for is not, including I will become one than two than three. And after that code block will stop execution. If we check CSS code, you will see that we have here on Lee 1st 3 paragraphs. That's the main difference between keywords through and to All right, that's all about follow up. Next, we're going to talk about each loop, and for that, let's move on to the next lecture 32. Each Loop: all right, so in previous lecture will learn about for look, how to create it and how it actually works. It allows us to write much efficient and flexible coat. Besides pullup insults, we have each loop which, like full executes block of code over and over again until elements are expired. Let's say in practice what those words mean and how each loop actually works. I'm going to get rid up his coat from maine dot CSS File. Also, let's make some changes in HTML Document. Instead of those numbers in class names I'm going to use called her names for 1st 1 right red, then green. Next one should be blue and for last paragraph, right orange. Suppose that we want to do the same here. I'm into assigned to each paragraph proper background color for that. Let's create least in Mandel s CSS file. Let's call it colors and assigned to it. Couple of colors red, green, a little and orange in this guy's values are separated by space, but as you know, we can separate them by commas as well, in both cases least will work. So in order to create each loop when it keyword each with that sign, Then we need to place your variable, which should represent current value from the least. Let's call it color, then should be followed by keyword in. And lastly, we need to place your name off least colors. So on first iteration, variable color will take first value from the least, which is red. Then a 2nd 1 It will take green on 3rd 1 blue and the last one orange. Let's in severe cold block select paragraph. I remember we added to class names callers like paragraph right paragraph green and now, in order to select paragraph, I'm not going to use those called our names. Instead of that, we should use interpolation and we have to pass variable color. Next, let's assign to paragraph, background color and again instead of writing here, any color name we need to use variable color. So let me explain what will happen here. On first iteration, value of color variable will be read. First member off are released. We will have here paragraph Rhett and its background color will become right as well, because we passed your variable color on second iteration caller should be green. We will have paragraph green and this background color will get as a value green color. The exact same will happen on third and fourth iterations. Paragraph blue will get blue collar and paragraph orange will get orange background. So if I saved this coat, then all four progress will get their proper background colors. And also, if we check compiled code in maine dot CSS file, you will see that clearly. All right, so that's the way how each loop works. Incest. And I hope it makes sense to you throughout our next project. We will use each loop so you will get your hands dirty in it in the future as well. Okay. See you in the next video. 33. If Directive: all right, So once we're done with loops, we have to move on to the next topic, which is going to be if Directive. Actually, it's quite similar to if or if us conditional statements, which exist in different programming languages. So if directive takes suss expression and executes block of code according to some condition, in order to demonstrate what if directive looks like and how it works, let's write some examples. Create a Chuan heading government with content if directive, then go to maine dot CSS file and select this element. So in order to create if director wanted to right at sign on, then keyword if it should be followed by parenthesis, in which we should insert some condition for simplicity, let's just write you something like two is greater them for and then inside cooler braces inside some style with a color red. So if I said this code and check out putting browser heading, Element will have its default. Black column. It happens because condition inside, if directive is false too is definitely less than four, and therefore block of code is not executed. If we check may not CSS file, it will be empty so in order to execute block of coat condition should be true. If we just change this comparison sign and right to is less than four, then code will be executed and color off heading will become red. So remember that if condition inside if directive is true, actually, it's a Boolean value. We discussed it when we were talking about suss stated types. Then block of code will be executed. But if it's false, then code won't be executed. All right, that's it about if directive Sometimes we may have to use if else if else statement. In order to see how it works, I'm going to use another example. Let's comment this coat out and then create mixing. Let's call it heading size, then inside parentheses. Insert parameter and call it size. So at first I'm going to create your statement as a condition. That's insert your sighs. Double equals two large. Actually, I used to your double equal sign. It's known as a comparison operator and its compares values on the left and right sides and the returns bullion value either true or false. That's insert your block of coat phone size 45 pieces. So if size equals two large, then condition will be true and phone size will become 45 pieces. Now I want to consider other cases. I mean, we need to create else if statement and as a condition that's right, sighs double equal to medium. So if this condition is true that I want from side to be, that's a 30 pieces. And lastly, let's create else statement. It doesn't have its own condition. We just need to right here. Phone size, Let's say 15 pieces. All right, let me explain what this statement actually means. First of all, condition off if director will be checked. If it's true, then phone size will become 45 pixels. If it's false than this code won't be executed and condition off else if statement will be checked. If it's true, then phone size off heading Element will become 30 Picks is. But if it's false as well, then style inside l statement will be applied to, and phone size will become 15 peaks. All right, let's see it practically select h one element and include mixing as an argument. Let's insert here, for example, large. So if we save, then phone size of heading element will become 45 pixels. Let's check compiled code. So as you can see, phone size equals to 45 pieces. It happened because we incident here large as an argument and condition inside. If statement became true in the same way. If we insert your medium, then condition off else. If statement will be true and phone size of having will become 30 pieces. And lastly, if we don't insert your any argument, it'll or inserts something different from a large or medium. Let's a small then none off those conditions will be true, and code inside L State will be executed as the sea phone size of H one. Heading Element is 15 picks is all right. So that's the way. How if director works in suss, it might be helpful and handling some cases. So I help. Everything was clear for you. Okay, let's move on to the next lecture 34. Project - Clothes Store - Overview: all right. So once we learn about some advanced topics in Suss, it's time to start building our second project, which actually will be based on this advanced stuff. So I think it will be really interesting for you are second project will be website about something like clothes store. So in this video, I'm going to describe it and also will prepare our working environment. So the project will consist of several sections. We will start from header which includes two navigations heading in Lago. Second navigation, I mean one off its items has drop down. Menu Heather is followed by slideshow. It consists of couple of slights with images and some content and also as a seat slides of changing with fate effect. Next section represents some featured products we have here nice over effect and also at the end of the section we have button, which also has a really nice over effect. Lastly, at the bottom we have footer with several parts. We have here some lease and also for section. All right, that's all about our project. I hope it will be interesting and you will enjoy because we're going to use some really nice techniques from sussed like previous project. This one will be responsive for all screen sizes as well. As a notice project is launched in Mozilla Far Folks. The reason is that it's mostly built based on CSS great, and this browser has the perfect developer tools for this morning. Using it, we can easily see and manage our great layout. All right. On desktop, I have created new folder. It's called Project to Close Store. Let's open it in brackets. So we have year a couple of files and folders we have index of HTML packaged Jason, which is already prepared. Also, there are folders for images for Main Docks CSS file, and lastly, we have CSS Boulder, in which I'm going to create a couple of folders and a CSS fast. In our first project, we used kind of simple fall structure, and as I promised in our second project, we're going to use relatively complex fall structure, which is mostly used in sort of big projects. All right, first of all, let's create main dot CSS file, in which we will import all other files. So, as I said, I'm going to create a couple of folders 1st 1 is going to be abstracts, in which I will insert falls for variables and for mixes. So let's go ahead and create both of them, right variables, not a CSS. And next one should be mixing the CSS next folder should be base in which I'm going to create based on a CSS more precisely, it's underscore based on a CSS file. I don't mention it every time. But as you know, each partial file name should always thought with underscore main dot s CSS file is the only file which doesn't mean underscore. All right, next folder is going to be components. It will include files for different components of projects such as, for example, button having logo and so on for no, I'm going to live it empty and throughout the project will create those falls whenever we need them. Okay, next folder will be layout in which we will create files for separate sections like Header footer on. So one and the last folder that I'm going to create his pages actually throw this project. We're not going to work in it, but anyway, I decided to create it. In general, this folder includes files for different pages. I mean, you may have project which will consist off pages like about US contact and so one. And besides that, you may come across to other folders the vendors and themes In Vendors folder. We can have some third party CSS files. I mean, some libraries and frameworks. As for a Themes folder, it may contain some various themes. All right, that's all about far structure. Next, I'm going to import those three files in Maine Daughter CSS file Right Import, then folder name, abstracts slash variables. Let's duplicate it and right mixes and then import based on a CSS file from base folder, but imports base slash base. All right, let's open Index the S team a foul. As you see, we have here basic HTML infrastructure with several links. I mean, we have here link for Icon, which is displayed in title bar. Also, we have some Google phones for awesome icons and link for main dot CSS file, in which are Sasko. It will be compelled. Let's run this filing brought with her using life Previ mode that open terminal and navigate your folder right CD desktop than CD project to close store and run command NPM Run watch. Actually, I'm going to suggest that sometimes your suss code might not be compiled, especially when we create new falls and import them. So if it happens, I recommend to terminate compiling using control. See, then why? And runs again using and P. M. Run watch. All right, So before we finish this lecture, I'm going to create some basic default styles. Let's open based on the CSS file and select all the elements which we will create. Use asterisk at first, get rid off default margin and parting set both off them as zero and then define phone Family. I'm going to use Josephine Sands Sensory. All right. So throughout this project, we're going to use mostly RAM as a measurement unit. As you know, by default phone size of HTML Element is set as 16 pieces and therefore one rent by default is equal to 16 pieces. In our case, I want one ram to be equal to 10 pixels because I think it would be more convenient. So in order to do that, we need to decrease default phone size of HTML element in order to calculate phone size of HTML, we have to divide 10 pixels by 16 peaks is if we calculate who will get point 6 25 and in order to convert it into percentage, we need to multiply it by 100. So as a value off fun size of HTML, we have to write 62.5%. So again, we want one room to be equal to 10 pixels in order to make working process more convenient by default, phone size of HTML is equal to 16 pieces, so we need to decrease it. The calculation that we made here gives the value I mean 62.5% which will make one rent equal to 10 peaks. I think it makes sense to you, but if not again, I recommend to check out our CSS course in which we explain deeply off this stuff. All right, that's it about project review, and it's set up. You have to download starter files, which are attached to this lecture, and you'll be ready to go. So see you in the next video 35. Create HTML Structure for Header: all right, so we're ready to start building our second project called Clothes Store. In previous lecture, we prepared everything to start working and first that we're going to do is to create structure off. First part of her project, which is going to be Header actually had. There will consist of a couple of navigations. Also, we will have logo and main heading, so let's go ahead and start building it. All different sections of our project will be reupped by container. So first of all, let's created open development with class name Container. Next, I'm going to insert in it heather Elements, which will have class Heather. So the first member off header is going to be a logo. It will be wrapped by development with class name, logo and then inside it. Let's insert image in source attribute. Let's indicate part of image we have folder called Images Amany to select the image called logo dot PNG and also assigned to image element class logo. I am cheap all right, as beset had there will consist of several navigations. Actually, we will have to off them, so I'm going to create 1st 1 Let's open nav element and assigned to it class First. Love Inside Nevil Mint. Let's create least open you element. It will have class name first, not least, actually, in first navigation. We're going to have four list items, so let's create 1st 1 and assigned to it class first. No item inside a light element. Let's insert link with class Name for us. Now blink then link should be followed by phone. Awesome, Aiken. I mean, we need here. Search Aiken. So let's create I element and assigned to it Class F A s half a dish search and then instant year as a content search. All right, so the first item is ready. As we said, we're going to have four off them. So let's duplicate like element three times for second item. We don't need phone. Awesome. I come. So let's delete it. And as a content, right, contact us in the same way I'm going to get rid of phone or Semicon for third item. And then as a content. That's right. Sign in. As for the last item, I'm going to change class. Name off. Faultless. Michael, we need Here. I come off cart, so let's right here. Shopping cart and as a content, let's open parentheses and insert in it. Zero. All right, so here we have our first navigation. Next, I'm going to move on and create Main heading off our header. So after nav Element, let's open Deve and assigned to it close heading. So this development will include H one heading elements which will have class heading text and as a content, let's insert close store. All right, so the last member off Heather should be second navigation, but it's open again. Never element and assigned to it. Close second? No. Then inside it, we need least with class name. Second, not least so our second navigation will consist off five items, and also one of them will have drop down menu. Let's go ahead and create a light element and assigned to eat class. Second, not item. Next, we need link, which will have class second, not link, And as a content, let's insert year shop. All right, let's duplicate at least element four times change content for each item for 2nd 1 we need gift ideas. Next one will be about us, then our team and for last one right news. So the last thing that we have to do in this lecture is to create a drop down menu for second least element. It will be represented by another least. So let's insert You'il and a scientist class drop down. Also, we need another class for a lie element. Let's call it drop down. Well, I then inside you element, let's open at least item with class drop down item. Then we need to insert here Link, which will have class drop down link and as a contents, right under $25. Let's duplicate Ally Element twice and just change content for 2nd 1 right, $25 on $50 and for last one, right above $50. All right, so that's it about Heather. We created its structure here, can see all the elements just pure HTML. So it's time to start stalling them. And for that, let's move on to the next lecture 36. Style Header with CSS - Part 1: all right. So in previous lecture, we created structural first part of our project, which is header. As you see, all the elements are created. We have here logo heading and to navigations. So now it's time to start stalling this section. But first thing that I want to do is to take here off layout of entire container. Actually, I'm going to do that using CSS greet So it's open based on a CSS file in which I'm going to insert styles regarding layout of container. We already have here some basic styles. So after HTML, let's select container and assigned to it display. Great. Actually, I'm going to inspect the page and display grid lines in order to manage. Lay off the elements in kind of convenient. Wait for that. We have to check this little box. So as the sea great lines are this plate. All right now I'm going to define columns and rows for container. For that, we have to use properties called greed, template columns and great template Rose. Let's start from columns. Overall, we're going to have 10 calls, so let's define 1st 1 For that. I want to use function called mean marks, which defines minimum and maximum size off column. So it takes two arguments as the 1st 1 Let's insert six Rams. As for maximum size, I'm going to use one fractional unit. All right. Next eight columns will have the same size, so I'm going to use function called Repeat as a number of columns. Let's insert. Eight. As for size again, I'm going to use mean marks function with values, I mean content and 16 reps. Actually, I'm not going to explain deeply what those functions and values do because it's not quite a subject off our course. If we explain everything in details, it will take much time again. I want to recommend as a prerequisite our CSS course, in which you will make detailed explanations regarding CSS great and not only see us is great. All right, let's go ahead and create 10th. Call them. It will have the same size as the 1st 1 does. So let's copy and paste in here. So we have here 10 columns, and now it's time to define Rose. Overall, we're going to have four different sections, so therefore we need for roast, let's write great template roles, then use again. Repeat function. Insert your number of rows for and as a size right, mean content. Last thing regarding layout of container is to create some space between rows using Great Rogue AP, which will have value 1.6 rounds. All right, so here we have four rows and actually with layout of container were done. Last thing that I want to do regarding container is to change its background color. Actually, I'm going to organize now colors for entire project. For that, let's open file called Very a boost, a less CSS, in which I will demonstrate how we can manage coloring using Mup and costume function. So let's create him up. Called it colors. It will hold a couple of key value pairs. Let's start with primary color assigned to read, call 333 Next one will be secondary right color F f d. Then we'll have tertiary with color F two F zero F one and last month will be Quaternary with color F five B. One fortnight. All right, Next, let's create function. Let's call it color as a parameter. Let's insert you call your name so when we need some color from this map. We need to call this function. It will give us made color. And in order to get this collar, we have to return some value. Then we need to use function called mop. Get as you know, we need to pass your two arguments. 1st 1 is name off up in this guy's colors. As for 2nd 1 it should be key. But this key will be different for different colors. Therefore, I'm going to pass your parameter or function called or name. Actually, we could use Onley mop get function here, but then we would need to define those two arguments all the time. But in case of this custom function, we will just need to call it and pass one argument, for example, primary or secondary. And so what? All right, let's see in practice how we can use them up and function together. Let's go back to, based on a CSS file defined background color for container. So now, in order to execute function, which we created a second ago, we need to call it using its name, color and as an argument. Let's end of year tertiary, which is a key off third color in map. So as I conceive, background color of container has changed. And if we check main dot CSS file, you will see that container has his background color, which is tertiary. All right, that's all about container. I think will be better if we take some break here and continue working on header in the next video. 37. Style Header with CSS - Part 2: all right. So in the last video, we worked on layout off container, and now it's time to move on and did the same for Heather. And then we have two style elements inside it. Actually, for Heather, I'm going to create new file. It will be a part off layout folder, So let's creating your file and call it Heather Thought as CSS. In order to make this file working, we need to import it in Mainland a CSS file. So let's open it and right import that indicate folder name layout, then slash had a All right, So Heather will take up first role and all 10 columns. Let's go ahead and select it right header that define great. Call them so, as we said had there should take up all the columns. Therefore, as a starting column line number, we need one. As for ending one, we can write either 11 because we have 10 columns or minus one. All right. Next, we need to define grid role. We need header to take up first row. Therefore, line numbers should be one and to Okay, so that's it about layout of harder next winning to align elements inside it. For that, we have to make Heather as agreed. Container. That's right. Display. Great, then, for its containing elements, define columns and rows. Overall, we will have nine columns, so let's define great template columns. First and last columns will have size as one fractional unit. As for the rest seven combs, which will be placed between first and last columns, they will have same size. So let's use repeat function. Insert number of columns. Seven. As for size, I'm going to use mean much function and as the values right, mean content. 16 Rams All right, that's all about columns. As for Rose, we will have three off them. So let's define great template Rose. I'm going to use mean content for all three rows. So let's write repeat function. Insert number off rose three. And then I mean content. And lastly, let's create some space between columns and rows, using great Gap, which would have value as two rams. All right, so that's it about Heather. If we check this little box that great lines for Heather will be displayed. As you see, you can see some nine columns and we have three roast. OK, now, it's time to start working on individual elements of Heather. First Element, which I'm going to take here off, is logo. For now, it's quite bigger. Let's go ahead and create new file in Components folder, college logo CSS and that import it in Mendel CSS file. Right, Import that folder. Name, components slash logo. All right, let's select logo. I mean development. First of all, I'm going to align it. It will take up first column in first role. So let's define Grid column with line numbers one and two and then great role would lie Numbers one and two as well. For no, nothing is changed to you because we need to decrease size off image. So let's selected using nesting. It has class name logo. I am G so right and percent I'm g and then define with as 10 rooms. As for height, let's make it 100% all right, so size of logo is decreased, and the last thing regarding it is to create some space on all four sites using parting. Let's assign to development parting with value one rent. Okay, so that's it about logo. We're done with it. Next element that I'm going to take years off is heading. Let's go ahead and create new file for it, which will be part off Components folder that's called the file heading dot CSS and that import it in Mendel CSS file, then select development with class name heading. First of all, I'm going to align it. Actually, it will take up space from Fourth column to seventh, and it will be placed in second rope. So let's go ahead and define greet. Call them with nine numbers four and seven. As for grid role, we need two and three, All right, so heading is aligned, and now we have to style it. Let's select heading elements using nesting. It has class name heading text so right and percent text. At first, let's define phone family. In this case, I'm going to use phone called Great Wipes course. Ooh, then I'm going to increase its phone size. But actually, I will not define side. Just manually. Would be better if we organize phone sizes for entire project like we did it in case, of course. So let's open variable stole a CSS file and create new Mup. Let's call it phone sizes. We will have five different phone sizes. 1st 1 is going to be an extra large, so let's write as a key next fell and assigned to eat three reps. Next should be large phone size. So right LG with the value 2.5 grams. Then we will have a medium with value to rams. Also small phone size, right, 1.8 RAM and the last one will be extra small with value 1.6 rent. All right, like in previous case, I'm going to create a similar function. Let's call it size and insert as a parameter sighs. Next, we need return, then function called mop get, which will have arguments, name of mop phone sizes and then size. So function is created. And in order to define phone size for heading, we need to call it. So let's go back to heading up a CSS file than right phone size. Actually, in case of heading, I want to make its phone size of really big I mean bigger than extra large phone size, which we just define. I wanted to be twice bigger than extra large phone size, so at first let's call the function right size, then as an argument, insert, excel and multiply it by two. So as the sea size of heading became larger. And if we check main dot CSS file, you will find that phone size of having equals 26 rent. All right, let's go ahead and add some more styles to heading. Let's make its phone weight lighter, then create some space between letters using letter spacing with the value 0.5 ren and lastly in order to place heading in the center that's assigned to development text Airline Center. All right, that's it about heading. I think it's looking good. Next, we need to move on to those two navigations, So see you in the next video. 38. Style Header with CSS - Part 3: all right, so we have styled and aligned logo and heading, and now it's time to work on those two navigations one off then will be placed in the top right corner. As for 2nd 1 I'm going to position it under heading, actually, for both navigations. We need similar styles. So would be better if we create mixing and included for both of them Were going to do that in order to protect number one rule off developers do not repeat yourself. All right, So first of all, before we start creating mixing, I'm going to align both navigations so it's go ahead and create new file in Layout folder. Let's call it Navigation that CSS that import it in maine dot CSS file. Let's duplicate this line. Thank right here. Navigation. Okay, let's go to navigation. That s CSS file and select First Navigation, which has class first now. So as we said, it's going to be placed at the top right corner. It will take up last three columns and will be placed in first rope, so let's define great. Call them with line numbers seven and Time and also defined grid role with line numbers one and two. All right, that's for second navigation. It should be placed under heading, and we'll take up space from third column to eighth. As for row, it should be positioned in third rope. So let's select second navigation. It has class second enough, and they find great column with line numbers three and eight and also right. Greed, role three and four. All right, so both navigations are aligned. And actually, it's time to start stalling that, as we said, we're going to create mixing. So let's open mixing the CSS file and create mixing. Let's call it navigation and then included for both navigations, right include navigation. So, as you know, second navigation has drop down menu and before we start styling, I think will be better if we hide it for a while. So that's selected using cross name drop down and assigned to it display none. All right. After that, let's go back to mix single SCC's file and select at least elements using nesting right and percent. At least first thing that I want to do is to place items horizontally in a row. For that, I'm going to use flex books, so let's write display flex, then make some space between items using justify content space around. So is the sea. Navigation items are placed horizontally in a row. Next, I'm going to center them vertically, using a line items center. As you can see, it doesn't work because we need to define height off least as well. So let's assign to it. Height with value, 100%. All right now, everything works fine. And next thing that I want to do is to get rid off default bullets from least items. So let's select ally elements, right n percent item and use least style? No. All right, so now we're ready to style items less select link element, right and percent link. At first, I'm going to define color for that. Let's call function Koehler and insert in it Argument. Primary. All right. Next, I'm going to get rid off default styles using text decoration with value none. Then change phone size in this guy's called function called size and insert in it Argument as and which stands for small. Okay, so both navigations their stalled last thing that I want to do regarding them is to create a little over effect on hover. I'm going to change slightly color off items. So that's right and percent over that use color. In this case, I'm going to use one of the built in functions called lighten, which will make color lighter according to personal value, which we will define so right Lighten. Use here again. Function color with arguments, primary. And as a second argument, let's insert here 40% and lastly, used transition with values all 0.3 seconds. All right, so everything works fine. We have here little, however effect. And actually you can see how convenient and flexible way used to use mix it. Okay, next that we're going to do is to work on drop down menu for that. Let's move on to the next lecture. 39. Dropdown Menu: all right, so in progress Lecture, we started both navigations and the last thing that have to do regarding Header. It's a work on drop down menu, which is a part of second navigation. And let's remember, for now it's heating. So first of all, we have to display it back. Let's get rid of this code at all, then create new file in Components folder and call it dropped down. Don s CSS then as usually imported in Maine, a CSS file. Let's duplicate this line and right, drop down. All right, so first of all, I'm going to take here off. Position off. Drop down for that. Let's select you element with class name drop down and define its position as absolute in order to manage layout off drop down menu according to its parent elements, which is L. I. We need to make its position relative. So let's select Ally Element, which has class name drop down ally and assigned to eat position relative. All right. Next, I'm going to move, dropped down a little bit down for that. Let's use top property with the value three rooms and also let's define with off drop down as 10 reps. Okay, after that, let's change background color. Actually, I won't drop down menu to have slightly different backgrounds. I mean slightly darker. One. Let's go ahead and use built in function called darken than instant. You call or tertiary? Actually, let's call again. Function color with argument. Tertiary. As for second value, let's make back on color 5% darker. So right, 5%. All right, so we have here darker background, and now I'm going to stall items off top down. Many for that. Let's include mixing, which we have created for navigation. So as you see, items are looking much better. Now. Let's go ahead and add some more. Start to drop down, create some space using parting with value. One rent also a center, the text using text align center and lastly, make drop down a little bit around it. Use your border radius with value points to rent. All right, that's it about you element. For now, I think we need some space between items, so let's go ahead and select. I element right and percent item and define margin on top and bottom 0.5 run and zero election right sides. Next I'm going to make front, wait a little bit lighter and will be better if we decrease its lively phone size. So let's select Link Element. Right and percent link, then used won't wait with the value of 300. Then write phone size and cold function size. I'm going to make phone extra small so it's east of year is an argument. Access? All right, actually, drop down menu is styled, and it's time to make a working. First of all, I want to create little arrow on the right side off gift ideas. And I'm going to do that using after see the talent. So let's select it right and percent after actually a row will be represented by phone. Awesome icon, which I'm going to use from CSS. I mean, to use it in kind of different way. For that, we have to use a phone family, which should have value phone Awesome five free. Then, as a content, we have to insert proper Unicode off Aiken right back slash f 078 and lastly make its phone Wait boat. So is the sea we have here a little arrow on the right side. Off list item next, I'm going to create a top triangle for drop down menu. And actually, I will did using before suit Alan. So let's select before right and percent before at first lead content empty and make element block level using display block. Next. We need to position element in the right way for that. Let's make its position absolute. Does that defined top property as minus 1.5 ramp? As for left property, that's a sign to eat 7.3 rams. And lastly, in order to position, drop down perfectly. Let's define it's right property AZ minus 2.8 grams. All right, so the triangle will be created using technique in which we will manipulate on by borders. In order to demonstrate and make it clear, I'm going to use different colors for different borders. We need to use border top with values 15 pixels soloed and right that duplicated three times and change sites. We need right that bottom left and also change colors use here green, orange and blue. So that's the way how borders are looking for now. As you see, they cross each other. So in order to create triangle effect, first of all we need to get rid off border top and then we just need to make borders on left and right sides transparent. So finally, we have here triangle and the only thing that have to do it to change its color. Let's I copied this value because we need to make color off triangle, Same as background color off joke down is so actually, everything is ready to make job down When you working. I mean, by default, we're going to hide it and it will be displayed when we hover on Leased it in order to hide , drop down. Let's use visibility with the value he'd, um and also opacity zero. Then select. Drop down L I with over use your nesting right and percent over, then select drop down itself. So in order to display many back, we have to assign to it visibility with the value of visible. And we have to make capacity one. And lastly, to make effect, nicer. Let's use transition with the values capacity 0.3 seconds. So, as you can see, drop down menu is hidden. And when we hover on list item, it's displaying Nice. All right, that's it about drop down menu. Actually, we have just finished working on Heather. Next, we're going to create slight show. And for that let's move on to the next video. 40. Slideshow: all right, So once we're done with Header, it's time to move on and create another section off our project. Actually, it's going to be a slight show. We will have a couple of images changing with fade effect, and each slide will have little content. So in this video, we're going to create HTM a structure for slideshow. Actually, before we started writing the code, I'm going to insert here comments. Let's do it for previous section as well, right? Heather then and off Header and then did the same for our new section right slideshow and then and off slideshow. All right, let's open section elements and assigned to eat class slideshow. Overall, we will have five slights. They will be similar to each other, so I'm going to create the 1st 1 and then I will duplicate it four times. Let's open development and a sign Tooth class slideshow slight. Actually, this development will be wrapper off. Slide itself. Next. I'm going to Besart another development which will be wrapper off content. So let's assign to it class slideshow content. Actually, it will consist off two elements we will have having and paragraph, so it's open H two heading element and right as a constant slide. One, then open P element, and instead they need some dummy text. All right, so the last member of slide is going to be an image. Let's create I M G element and in source attribute inside part off Image, an Images folder Select Image called I Am Do You Want? All right. So here we have our first light. As we said, we're going to have five off them. So let's duplicate it four times and then change headings and names off images when it slide to I'm too. Then three, four and fight. All right, that's it about HTML markup off slideshow. Everything is prepared to start building it. And for that, let's move on to the next lecture. 41. Make Slideshow Work - Part 1: Okay, so html markup is ready for slideshow, and now it's times a style it and then make it working. So overall we have five slides. Each of them contains image and some content and slight should be changed with fate effect . First of all, I'm going to build slide itself. And then after that, we will run slideshow. All right, so let's create new file in layout folder. Call it slide showed a less CSS, then import it in Mein Gott, a CSS file. Let's duplicate this line and right slideshow as first. Let's take here off layout off slight show. It will take up all the columns off container and also which will be placed in second rope . So let's select slideshow and define great column with line numbers one minus one. And then we need greater role with line numbers two and three for no. Nothing is changed here. Now we need to select slide itself and manage position so it's right and percents life and make its position absolute. And also we need to position relative to its parent element in order to define position. According to rapper, it's a right position relative, then defined top and left properties and make both of them zero. So here is See, only one image actually is the last one, because when we use position, absolute slights have placed on each other. Next, I'm going to make with off slideshow 100%. As for height, I want to make it 80% off viewpoint. So we need a T V H. And lastly, let's inherit which and height off slideshow for slightest well, right with with a value inherit and hide with same value. All right, so that's the way how slideshow is looking for now. Next, I'm going to take a year off images and also content. So let's select image elements. I'm going to inherit wits and hide for images as well, because I wanted to take up the same height and width as its parent does. So it's grab this code and pays with you. As you see, image is stretched, it has lost its quality. And in order to fix that, let's use property called object feet with value cover. All right, that's it about image. Next, I'm going to move on to content. I mean this heading and paragraph. Let's select content right? N percent content. First of all, let's change its background color. Use your RGB a then cold function color with argument secondary and as an opacity right point night, then defined his position as absolute. After that, I'm going to place content down below. So let's make it bottom position as six rooms and then defined left with the same value. All right, so content is aligned, and now it's time to make it looking good. At first, let's define its with. Actually, I'm going to use your property. Call Max Wit. I'm using it for responsibility on different screen sizes. Let's set it as 40 rounds and then creates imparting Use five reps. All right, so content is looking much better now. Next, I'm going to take a year off, heading in paragraph. So let's select heading element and define its phone size. I'm going to call here function size. Actually, I want to make phone a little bit larger than extra large font size. So at first instance, your argument x l and then add to eat one point to ramp and also change caller Cole again. Function color with argument primer. All right, that's it about heading next Let's move on to paragraph. Select P Element. Make some space at the top and bottom using margin right, one ram on top and bottom and zero on left and right sides and, lastly, changed phone size. Call here function size with arguments as m All right, so we're done with contents, and actually, we have built entire slide. Now it's time to make slight you're working, and for that, let's move on to the next lecture. 42. Make Slideshow Work - Part 2: all right. So in previous lecture, we built in start slights. And finally, it's time to make slideshow working. Actually, slights will be changing with fate effect. Throw this lecture. We're going to use some advanced stuff. So I recommend to you to be more focused in order to be more understandable and clear what we're going to do. At first, I'm going to use pure CSS and then we'll convert it into sussed. Slideshow will run during 20 seconds. Overall, we have five slides, so each slight should be displaying during four seconds. In other words, slice should be changing in every next four seconds. First of all, I'm going to create key frames. Let's call it slideshow. So on 0% slight should be heat him for that. We have to insert your visibility. He them and capacity zero is that as a next break point, we need 2% on which slide should be visible. So right, visibility visible and opacity one. So those two steps, I mean steps from 0% to 2% will create fate effect. Then from 2% to 18% slice should be displaying. So as a next break point, we need 18%. Let's copy those two lines here and paste after that, from 18% to 20% slight should be heated. Let's copy again. Coat from here and paste, actually from 20% to the end off slideshow. I mean, 200%. It's like should be heating again when it here the same coat. All right, imagine that we're working now on first slide. It's displaying during 1st 4 seconds, including its fate effect, I mean from 0% to 20%. And then it's hidden until all other slides are displayed. Okay, now we have to define animation. Property four Slide. Let's insert your name off animation slideshow. Then, as a duration, we need 20 seconds. Also, I'm going to ease Earth, your value off animation, timing, function, linear and lastly, in order to run slideshow infinitely right, infinite. So as you see, we have a fade effect after four seconds, slide is getting heating, and none of other slides is displayed. The reason is that all of them are displaying at the same time and are hiding at the same time as well. So for each slide we need different delay time. We need to select each slight, and we have to define animation, delay time with four seconds interval before we do that. At first, let's hide slides by default. Let's copy this code from here and a sign AIDS to slide. All right, As we said, we have to select slight separately, and I'm going to do that using and child selector. In this case, I'm not going to use nesting because eventually we will change this coat. So select first slide right slideshow slide. Then we need to use F child selector. And in order to select first slide, we have to insert your one. Now it's time to use property called animation delay with value zero, because for first light we don't need any delay. Let's duplicate this code four times, then change slide numbers right to three, four and five. It also changed the late time. Second slight should be displayed after four seconds. So we need here for seconds for 31. That's right, eight seconds. Next should be 12 seconds. And for last month we need 16 seconds. All right now, slide show should work properly. Let's check. As you see, it's working perfectly after every four seconds slides are changing with fate effect, and it continues infinitely. All right, so we made slight You're working using pure see assess. We selected each slight separately and you agree that it's no the perfect weight. We can make this goat Mork unsighted flexible using suss. At first, I'm going to create variable. Let's call it at least and now we have to create multi Least each list item will be list itself, so we will have to values in each nest at least. 1st 1 will be an argument off every child function right one. As for second value, it should be delayed time off. Proper flight in This guy's for 1st 1 We need zero second in the same way, right? Values for second slide place here coma and then to four seconds. Then we need three eight seconds for 12 seconds. And lastly, 5 16 seconds. All right. Next we need to use each loop. We have to look through this least so as a current item, let's write you variable item. Then we need keyword in and name of Least and in the least. All right. So it's time to select slide right slideshow slide and then use F child Select. So we need to insert here proper number of slights. I mean, 1st 2nd 3rd and so on. For that, we have to get first values from those nasty lists. In order to do that, we need to use interpolation. And then we have to use one off suss built in functions called F. Actually, it ellos has to select specific item from the least, it will have to arguments. 1st 1 is going to be current item. As for a second argument, we have to insert here one and I will explain why so on first iteration, Karen item will be this nasty at least and not on Lee. Just first value a second argument, one which we passed your means. That we will grab this first value from that NASA at least. So eventually on first situation will get here F child one in the same way. On second iteration, we will have a child to and so what? All right, that's it about child selector. And now we have to work on animation, delay property in the same way. So in case off and child selector, we needed first values from nested least and now in case of animation, too late. We need second values from lease. I mean those delay types. So we have to write function f and then we have to insert as a first argument item. As for 2nd 1 went into insult to All right, let's delete CSS, which we wrote here because now we have expected version. Then go to browser and check if it works. As you see, everything works fine. We have here same result. And if we checked, compiled code, then you will fight, say, CSS code, which we used folder for Start. All right, Actually, that's it. We have finished working on slideshow Onley. Thing that have to do is to fix one little problem when we hover on navigation item drop down menu is no longer displaying because it ended up behind slides. So in order to fix that problem, we just need to define zip in this property. For Heather, let's go to Heather, not a CSS file and right Z index with value. That's 100. All right, so no, everything was fine. Slideshow is working, and it's time to move on to the next section. So see you in the next video 43. Create HTML Markup for Products Section: Okay, so in the last video, with finished working on slideshow and now we have to move on and start building or next section, it's going to be a featured product section. It will consist of three different products will have nice over effect, and at the bottom off, the section will create a nice cool but as usually let's start building structure off this section. That's insert your comments products, then end of products, then open section Element and assigned to it class products. At first, I'm going to create heading off the section so open development with class products heading that incident in in H one heading elements which will have class name products heading text and as a content right featured products. All right now, I'm going to create products Rapper, which will include three different products. So it's open developments and assigned to it. Close products Rapper that inside it insert another defeat which will be wrapper off product itself, and it will have class product. This development will contain to direct Children elements. 1st 1 will be an image. Let's easier to your path off image. We need image product one. Let's assign truth class product. I am Jew. As for second elements, it will be deep, which will wrap some content, and this content will be displayed when we hover on image. So let's open another development assigned to with class name product description. So this development will consist of three different elements. Will have heading paragraph and link element. So let's open H two heading elements, which will have class product description heading. Let's copy clustering from here and then just at heading as a content right dress. Next, we need to create paragraph. Let's pace to your class name and than at a price as a constant right price. Then open spun elements and inside innit amount. $150. All right after paragraph. We need link elements, which actually should be bottom. So let's open it, then paced again class and at BTM. As for content right by no. All right, that's it about first product. Overall, we will have three off them, so let's go. I haven't duplicate it twice. Then change image names and also content we need here products to than pants. That's for price right $100 than product three shirt and $50. All right. That's all about products, as be said. Besides, them will have button, but I'm going to create it later. I mean, after stalling those products. Okay. See you in the next video. 44. Add CSS to Products Section: All right, so we have prepared HTM a market for products section, I mean particularly for products, and now we have to start stalling it. So first of all, let's create new file in layoff Older Call it products that a CSS then import it in Maine, not a CSS file. Let's duplicated this line and change file name right products. Okay, so at first I'm going to define position for the section. It will take up all available columns inside container. As for roll, it will replace in third rope. So let's select section element with class name products, then define greed. Call them with line numbers one minus one and greed role with line numbers three and four All right. After that, I'm going to take a year off heading element off section. At first, let's select its wrapper Steve right and percent heading and create some space at the top and bottom using margin right, five ram and zero on left and right sides. Next, I'm going to select heading itself so right n percent text. At first, let's place text in the centre using text align center that increase phone size. Actually, I'm going to make its phone size bigger than large phone size but smaller than extra large . So it's called function size that insert in an argument LG and adds to it two runs, then make fun a little bit lighter, right? Won't wait 300 and lastly, change, color, call function, color and insecure primer. All right, so heading is ready. It's looking good, and now it's time to move on and take a year off products. Its first. I'm going to manage their layout, and for that I want to use flax books. Actually, it would be better if we create mixing, because those styles will be reused later. So it's open mics ist of the CSS file and create new mixing. Call it flex position. Actually, we're going to use some flex most properties, but with different values in different cases. So we need to insert here some default parameters and values. 1st 1 is going to be justified. Content center. Let's write it in kind of short way and assigned to eat center. 2nd 1 will be aligned items with the same value, so we need here. Three properties 1st 1 will be display with the value flex that justify content and by default, let's assign to it first parameter. So it means that when we include this mixing, then by default, justify counting property will get center as value. But if we indicate another value as an argument, then that value will be applied to in the same way. Let's define align items and assigned to eat second parameter. All right, let's include this mixing for wrapper off products. Let's select it right and percent rapper and include flex position. In this case, we need Center for Justify Content and for a line items as well. So we don't have to instantly your any argument. All right, so products are aligned horizontally, and now it's empty style them and then finally create over effect. Let's select developments with class name product, then inside it select image right and percent. I'm Jeep and said it's with us 100%. We're doing that in order to make image responsive. Next, I'm going to take a year off description. We need to style it. So let's select developments, right n percent description. First of all, let's position this elements. It should be placed in the centre off product for that. Let's set its position as absolute then, in order to manage its layout, according to Product Community assigned to it position relative and to position description perfectly in the center, let's set top and left properties as 50%. And then we need transport trust late, with arguments minus 50% and again minus 50%. All right, so as a considered description is placed in the center of product. But for now, it doesn't look good, so we need to style it and also style. It's containing elements. Let's change background color. I'm going to use one off suss built in functions. It's called transparent ties and ellos us to make a call or transparent. This function takes two arguments. 1st 1 is going to be color. What's call function collar with argument Secondary. As for second argument, let's institute point for, so it means that capacity off this collar will be decreased by 40%. All right, let's go ahead and create some parting assigned to it. Two rents then create border a scientific values 0.1 room solid and call or primary. Besides that, let's make this box a little bit around it. Use here Border radius with the value, pulling five rounds and lastly, change. Color of text. Let's use here. Caller Primary. All right, that's it about developments. Now we have to stall. It's containing elements. I mean, heading paragraph in bottom. Let's go ahead and start from heading. Selected right Empress are heading for heading. I just want to increase phone size that's called function size and insert here X out. Next, I'm going to select paragraph right and percent price. Let's increase its phone size. Use again. Function size with argument LG then make front lighter, right front. Wait 300 And lastly, make some space at the top and bottom right margin, one room and thats zero. All right. As you know, we wrapped amount of price by spun elements because I'm going to make it slightly boulder. So let's select it and said it's won't wait as 600. All right, that's it about paragraph. Last element that we're going to style is button, so let's go ahead and select it right and percent BTM. But first, let's change phone size. I'm going to use here extra small phone size, then remove underlying using text decoration. None change color that's used to your called or Quaternary, also make link elements as a block level element right display block and then creates, um, putting on top and bottom, right 0.5 ram and then one rent on left and right sides. All right. Next, I'm going to create custom border that's assigned to it. Values 0.1 ramp solid and as a color. Let's use Quaternary and finally change background color. Let's use your function. Lighten. Then insert your color primary and as a second argument, right, 20%. All right, so elements are styled, but as you see, we need to send through them inside box. So let's assign to description text the line center. So the last thing that have to do is to create over effect by default. I'm going to hide description, and when we hover on product, it should be displayed in order to hide it. Let's assign to description, capacity zero and visibility. He didn't so description is hit him, and I'm going to display it when we hover on product. Let's selected with hover bi and percent over, then select product description and assigned to it capacity one and visibility visible in order to make effect nicer let's use transition assigned to it all then as a duration right one second. And besides that, we need to some delay time. So right 0.5 seconds. So if we hover, then description will be displayed nicely. All right. So, actually, we're almost done. Only thing that I'm going to do is to decrease slightly capacity off images on hover because I think effect will be much better. So again, select product with hover, then select image itself. Right? Product. I'm g and insert here. Capacity 0.5 again. Use transition. Actually, we need here. Same transition. So that's copy and paste it. You all right? So everything works fine. We have here nice holder effect and actually with products were done. Next, I'm going to create button at the bottom off this section. And for that, let's move on to the next video 45. Create Button for Products Section: all right, so we have finished working on products and now we have to create button at the bottom off . This section is going to be a kind of different button with nice horror effects, so I help. It should be really interesting for you. First of all, let's open index dot html file and create markup that's open development and assigned to it class products BTM than incident it link element with class name BTM Buttermilk consists off background, Little arrow and some text. So let's open development and a scientist Class B T N b g. Actually, we will use these developments for background next, winning another development for a row. Let's open it and assigned to it class Pero and then inside the development, we need three more gifts. Using them will create an arrow. So what's open? 1st 1 It should have some classes. 1st 1 is going to be a row line. It's for comma styling. As for 2nd 1 let's write a row. Line one. It will be used for individual styling. Let's duplicate this line twice and then change class names. We need your aero line to and then three. Lastly, we need span element, which will include tax for button. Let's assign to it class BTM text and it's a fearsome content, right? See more. All right, so html markup for button is ready, and now it's time to start styling it. For that, I'm going to create a new file in Components folder. Let's call it Bottomed out a CSS that import it remained on a CSS file. Duplicate this line and change name off file. Right bottom. All right, so first of all, let's place button in the center for that. Let's go to products, not a CSS file, then down below. Select development with class name products. DTN and include here mixing called flex position. All right, then go to button on the CSS File Select Link Element, which has cross name BTM. At first defining sweets, set it as 16 rooms, then height assigned to eat. Four rooms get rid of default underlying using text decoration. None. And also I'm going to create border for a while. Let's assign truth values 0.1, run solid and make its call or black. All right. Next that I want to do is to create background. I mean to make it just visible. So select developments, right and percent BG then define a within height. Let's make both of them for rams and change background color. Let's use here. Caller primary. So here we have background, but it's placed above the text and we need to place them side by side. For that, I'm going to use flag spokes. Let's include mixing for BTM right flex position instead of justify content center, which is a default value. I want to use justify content space around. So is the sea. Elements are placed side by sight. Next, I want to change shape off, background and make it circle. For that we have to use for the radius with value five runs. So before we move on to text, I'm going to define position for background. Let's set it as absolute and in order to manage position according to its parent element, let's assign to link position relative and lastly, I'm going to set left property off background as zero because we need to place it at the left edge off button. All right, let's move on and take here off text selected, right n percent text, then change form size called function size and insert your argument. X s also make text uppercase, using text transport, uppercase and then change color. Let's use you call the primary all right. Now it's time to create an arrow. By default. We will have small arrow and on hover. It will change its shape so it's go ahead and start creating in First of all, let's select Rapper Development, which has class name Arrow. I want its content to be placed in the centre, and for that let's include mixing flex position. So overall we have three developments for three aero lines as we said that First will create small arrow, and we're going to do that using second and third lights. So let's select lines using common class right Empress online, then define height, make it points to ram change background color. Let's use your call or secondary and lastly, set position as absolute. All right, so, as you see for now, nothing is visible here because we need to define wits off lines as well. So select lying to write percent line to said it's with as one run, then duplicated this code and change class name. We need to your line three So now lines are visible, but they're placed on each other. That's why we see here only one line. In order to fix that, we have to rotate lines by Z axis, but with different directions. So for a second line, we need to write transform that rotates, see with value 45 degrees, then copy this line, paste it for third line and at year, just minus sign. As you see, no lines are rotated there looking as X. And actually, we don't need it. We need them to be looking as arrow by default. They are rotated according to their centers. I mean, transform origin off lines is set a center, and we have to change it and make it right. It means that they should rotate from right corner. So let's assigned to line transform origin and said it as right. So now that's it. What we wanted to get. We have here smoke a row, and now we have to work on line number one. Let's select it right n percent line one and said it's with as two runs, so no line first is visible, but it's not place quite correctly. We need to move a little bit to the left side. So let's do it using transport, translate X an instant year minus 0.7 rent. And also I'm going to get rid off Border, which we created at the beginning because we don't need it anymore. All right, so Line one is aligned in the right way and finally stem to create hover effect. So on hover will increase size of background. It will cover entire button, and also we will move a role a little bit of the right side. By default line one should be hidden, so let's make its with zero. Then select button with holler right and present hover. Next, we need to select background right Petey and PG and make its with 18 runs. Let's make effect nicer using transition we need here with and duration 0.2 seconds. So if we over the size of background will be increased, but we have here little problem text is no longer visible. We need to change its color because text and background have similar colors, so we need to change color off. Texan hover. Let's select again button with hover that select text right Bt and text and change color. Use your caller second so as a see text still is not visible. And the reason is that on hover background covers it and text ants up behind background. In order to fix that, we just need to use Z index property. Let's assigned to it. 10. No, you can see that everything works. Fine. Text is visible. All right. The last thing that we have to do is to take a year off arrows on hover. We need to increase with off line first, and also we need to move entire arrow little bit of the right side. So let's select button with hover that select arrow and assigned to it transform translate X for the value one ram and the news transition for arrow right transform with duration pulling two seconds after that, we need to increase with off line one. So let's select button with hover. Then we need a row Line one and said it's with as two Rams and they're finally used translation for line one when it here with on duration point is second. So if we hover but then we will get you really nice effect. Everything works perfectly and actually, we can say that we have finished working on featured product section. All right, Next minute to move on and start creating footer. So see you in the next video. 46. Create HTML Structure for Footer: all right, so we have finished working on featured Products section, and as I promised, we have to move on and start creating our last section, which is going to be footer. Actually, food terrible consists of multiple parts, so it's not going to be quite simple. One. All right, as usually. Let's start building html markup. First of all, let's instant. Here's some comments we need footer than end off footer, then open food or elements and assigned to it cross footer. So overall we will have three main parts. 1st 1 is going to be navigation, so let's open development with class Name, footer Enough rapper. So we will have here heading and couple off navigation items. That's instantly your age. Three. Heading element assigned to it class Footer not heading and as a content right, More info. All right, so navigation will be represented by at least let's open Huell elements. It will have class food her enough that we need to easer to your several list items. So let's open a light element and assigned to it class name, food, her love item. Next, we need link element with class footer, Enough link and with contents company, so we will have five list items. Let's duplicate Ally Element four times, then change items for 2nd 1 Right sales. Next one should be returns. Then we will have privacy policy and for last one, right? Contact us. All right, that's all about first part of Footer. It's ready next minute to create second part, which will include forms and also social media icons. So it's open development and assigned to it class Name contact. Before we create forms, we need heading and paragraph. So let's open H two heading element. It will have class, name, contact heading and as a content that's insert here. Sign up for our newspaper. Next we need paragraph. It's a scientific class contact paragraph and insert Little Domine text. After that, I'm going to create form elements. Next, we need to open developments which will be wrapper off to input elements. I mean inputs for first time and for last name. That's a scientific class inputs group. So as we said, first input element is going to be for first name. Let's open it, then assigned to it Class inputs group text and also use here Placeholder attribute with value. First night Actually, I'm going to duplicate input and just change value off placeholder. We need to you last name all right. After that, we need another group off inputs. So open again developments and the scientific class and puts group that inside it create input elements, which is going to be for email. So we need to change type right here, email and then assigned to it. Class inputs group email. I'm going to use a gang placeholder attribute. Let's answer if you value your female addressed and the last element which we need to create inside form is bottom. So let's open again. Input element. Change its type. Make it submit than assigned to it Class Inputs Group B TN and lastly used, attribute value and assigned to it. Sign up. All right, that's it about form elements as we set next minute to create social media icons. So let's go ahead and create you element. It will have class name social icons. Next, we need to open a lie element. Let's assign to it close social. I can't item Ally Element should be followed by Link, which will have class name social icons link and now we have to insert your icon itself for that. Let's open I element and assigned to classes. F A B F A. Facebook. All right overall will have six icons, so let's duplicate Ally Element five times and then go ahead and change class names for 2nd 1 We need YouTube. Next should be Google plus G, then right Tweeter. Next one will be linked in being and for last one, right? Instagram. So here we have social media icons, and now it's time to create last part off Footer, which is going to be again least, that's open development assigned to it. Close Contact Least Rapper. So it will consist of heading and least with couple of items. So let's open age three heading elements. It will have class contact least heading. Let's is it to your content closed store. After that, I'm going to create, at least so create you'il and assigned to close contact, Least so we will have four list items. Let's create ally elements, which will have close contact least item. Next, we will have a link. Let's assign to it close contact Least link. I'm going to insert year some dummy phone number, its rights and number see you. So as we said, we will have four least items. Let's duplicate Ally Element three times and then insert some dummy content for 2nd 1 right ? Info at gmail dot com. Then right here a dress, New York, Broadway and for last one insert free US delivered. All right, so that's it. All the parts are created for now. They're looking ugly because it's just pure HTML. Let's go ahead and start styling them. See you in the next video. 47. Styling of Footer - Part 1: all right, So once we prepared HTM of market for Footer, it's time to start working on it and style this section. First of all, we need to create new file in Layoff folder. Let's call it Food Turtle s CSS, then import it. Duplicate this line and right year food. All right, so first of all, I'm going to take a year off Leo the Footer. It will take up available columns in container. As for roll, it's going to be placed in the last rope, which is fourth. So let's go ahead and select Footer, then define Great column with line numbers one and minus one and also right grades. Row with line numbers four and fight so as you know, foot or consists of three main parts we have to lease. And between them, there is a contact form about those parts to replace horizontal in a row and for that will be better if we use flax books. We just need to include here mixing flex position and instead off justify conference center . Let's use space around, also create some parting on top and bottom right, putting five rams and then zero and create border at the top off footer, right border top with values 0.1 room solid and color primary. All right, so all three parts are aligned. Also, we have border at the top, and now we have to move on and start styling individual parts. Actually, we have here to lease, and for both of them we need same styles. So will be better if we create mixing and that included for both lease. So let's go to mixing the CSS file and create new mixing. Call it photo released. At first, I'm going to style heading. So let's select it right and person heading. I used here and percent, and it might be a little bit confusing for you. So when we used this mixing than this, 1% will point to an element in which chewable include mixing before we started writing. Some styles will be better if we include this mixing for both lease. Let's go back to footer dot CSS file and select footer Enough, and that includes nearly created mixing right foods are released. Also select second least, which has class name contact least then grabbed this mixing and paste it here, so no styles, which will create inside mixing it will be applied to both. Lease. All right, so we're ready to start styling elements. Off least, let's increase phone size of heading. Call here function size with arguments LG and also changed color. I'm going to use your call or primary, all right. Next, I'm going to select Ally Elements because I want to get rid off default bullets so right and percent item and then insert least style. None. Besides that, Let's create some space on top and bottom. Right margin, one ram on top and bottom and zero on left and right sides. Okay, after that, let's take a year off link elements because for now, they're looking really ugly. So select link right and percent link. First of all, change phone size using any function size with Argument X s. Then get rid up default styles, right text decoration. None, and also change color. That's use your function. Lighten with arguments. Call our primary and 15%. All right. Last thing that I want to do regarding Link Element is to create little hover effect. So let's write and percent over, then grab color property with its value and just change second argument instead of 15% right, 35% and lastly use transition with values color 0.2 seconds. All right, that's it about lists in Footer. Both of them are looking good, and now we have to move on and work on contract for Let's do it in the next election. 48. Styling of Footer - Part 2: all right. So in previous lecture, we started those still listing footer, and now we have to move on and work on contact, for we have here heading paragraph couple of input elements and social media icons. So let's go ahead and start from heading Select Development, which has class name contact, then inside it select heading elements right and percent heading. At first. Let's increase phone size. Let's call function, size and incident. Argument excel. Then change color use function, color with arguments, primary and a line texting the center using text Align center. All right, that's all about heading element. Let's move on and style paragraph selected right and percent paragraph at first, increase phone size use again. Function size with arguments. LG Then make some space on top and bottom. Right margin with values one rent and then zero and a gang aligning text in the centre using text Align center. All right, so heading in paragraph are looking good. And now it's time to move on and start starting April Helms. As you know, we have two groups. 1st 1 consists of two text inputs. As for 2nd 1 we have input for email and bottom I want those element to be aligned horizontally side by side in both groups. So let's select Inputs Group and a scientist would display Flex. Next. I'm going to style inputs, so let's select them. Right input. First of all, create putting on all four sites, right, parting with value one ram, then change phone size, right function size an instant argument X s and then create some space using margin at the top and bottom right one ram as for left and right sides to use 0.5 rep. So no inputs are looking much better, but I'm going to add some more styles to them. Let's create custom border right your values 0.1 ram solid. Then for color, I'm going to use function darken as a color that's insert year function color with argument , primary and then as a second argument, right, 10%. Then my empress little bit rounded using border radius with the value 0.3 ram and lastly, get rid off default outline. All right, so inputs are styled and now I'm going to define wits for them. We need different weights for text inputs, for email and for bottom. So let's select text inputs right and percent text and define their with as 50%. It means that each text enabled will take up half off with off Rapper. After that select input for email, right, 10% email and define it sweet as 60%. As for Button, I wanted to take up 40%. So let's select and percent DTN and assigned to it with with value for 2%. All right, so that's the way how input elements are looking for now. Let's add some more styles to button at first, change color call function Calder with Value secondary and also changed background color. I'm going to use your function. Lighten then use here. Another function color with argument. Primary as for percentage value right, 20% All right, Before we move on and start styling social media icons, I'm going to create some effects. I mean on focus. I want to change color off border for text and email inputs. So let's select input with focus, right and percent focus. So as we said, we need effect for only text and email inputs and not for bottom. So we need to exclude it for that. I'm going to use function called not and as an argument we have to pass your property selector. I'm going to select a button using type attribute, so let's open square brackets. All right, type equals two. Submit. Then let's go ahead and copy border property with its value. Pace it here, then change color. I'm going to use your color. Quaternary also changed percentage value right, 30% and lastly, used transition, right border and duration 0.5 seconds. So when we focus on inputs, you see that color off border is changing. It happens for text and email inputs. As for bottle, the fact is not working because we have excluded it all right. Besides that, I want to create over effect for bottom. Let's select it with over onhe over, I'm going to change its background color. Let's use your color primary and also used transition right background color with duration 0.2 seconds. All right, so over is working and actually with form elements were done. Next we have to move on and style social media icons. First of all, let's take a year off layout. Select you element. It has class name social icons. Actually, I want to place icons horizontally in a row. And for that, let's use flax books, right display, flex, then create some space between items using justify content space between create some parting right, parting with value one rent and also I'm going to use book sizing property with Value Border box. All right. Next, let's get rid off those default bullets and also style icons at first Select L. I element right and percent item, and it's, I Intuit least style none. Next we need to select a link elements. At first let's get rid off default styles using text decoration none, and then define width and height for both of them. Use four reps and lastly, create border with values 0.1 rent so lead and with collar Primary All right, as you see with and high properties are not applied to link Element because, as in no link is an in line elements and we have to make it as block level elements. So if we assigned to it display block then within hide properties will be applied to no, I'm going to make border around it. For that. Let's use border radius with the value 100%. Besides that I want to place icons in the center off circle, and for that the best solution is to use flax books. Actually, we have created mixing with flex properties, so that's included right include flex position. As you know, by default. This mixing includes display flax justify conference center and a line item center. So that's why I consider perfectly centered inside circle. Actually, we no longer need display block because, as we said, this mix and includes display flex. So let's get screwed up it next. We need to increase size off icons, so let's select them, then defined phone size. Use your function size with argument empty. All right. So before I finish this lecture, I'm going to change colors off icons. I'm going to assign to them their original colors. So instead of selecting and stalling, each item individually will be better if we use each loop like we used it in case off slideshow. First of all, I'm going to create least which will include nested least containing numbers and colors. Let's call it social media colors, and that isn't here. Least 1st 1 is going to be one and color three B five 998 It's actually color off Facebook . Then there's a 2nd 1 right to and color off. YouTube B three one 217 3rd 1 is going to be for Google, plus right call or D C for E for one. Then we have Twitter, right? 55 a c e. Next one is linked in It's color is 517 f a four and the last call or is going to be for Instagram, right? Zero 077 B five. All right, so list is created and now have to look through it for that right each. Then we need variable for current item. Let's call it color. Then we have to write keyword in and name of least social media calls. So again we're going to use same technique. I mean, we will select item with F child selector and then we will find proper call. So select social Aikens item. Then use F child selector. We need to your interpolation and then function called and which can select item from the least. This function takes two arguments. 1st 1 is going to be current item, which in this case is caller. As for second argument we need to write here one. And lastly, select link element. Right? Social. I can't slink. All right, so on first saturation current item should be the first nest. At least then using and function will grab first value from this least, which is going to be one. Therefore, on first situation will have here f child one which means that we will have first ally Element and it will hello us to access on first link. Element on second iteration will have second ally elements and so want No, we need to change color. And also, I'm going to change color border so right called or and assigned to it function f with arguments tell you and to next we need border with values 0.1 ram salted and the same and function with arguments caller and to so in this case, as you see and function has two as a second argument, it means that on each iteration it will take second values from Nassib lists which actually are colors. So if we check out resulting browser, then each Aiken will have its proper color. And also if we check compiled code, we will find each link elements with this proper color, all right. That said, we have finished working on Footer. All three parts are styled and looking good. And actually, we can say that we have finished building our second project. The only thing that have to do is to make it responsive on different screen sizes. And for that, let's move on to the next lecture. 49. Make Project Responsive: all right, so we have built our second project clothes store. All the sections are created in style. And as we said in previous, like sure, the only thing that have to do is to make Project responsive for different screen sizes. I like the previous project. We're going to use kind of different approach, which I think will be more sophisticated and interesting. So let's go ahead and inspected page and switch on responsive mode. So if we make browser smaller, then navigation, which is placed on the right side, we'll start messing up. It happens because we have here logo on the left side. It's with is set as 10 Rams. When size off this cell rich to 10 rams. That logo stops shrinking, but navigation on the right side continues it and eventually great is messed up. We can fix that problem without creating any media or break point. We just need to make a little change in great layout off header. So let's open this file as you see as a size of first and last columns. We have here one fractional unit, and instead of that, we need to use Min Marks function, which will take following minimum and maximum values. We need to write 10 Rams as a minimum value and then one fractional unit. Let's copy it and paste for last column as well. Now, if we make again browser smaller than the problem will be fixed. All right, let's go ahead and find first break point. I think we have to make some changes on 1200 pixels because we need some space between navigation items, so it's time to create first break point. And instead of writing just usual media query, I'm going to create mixing in which we will define multiple break points based on some conditions. So let's go to mixing up a CSS file, create new mixing and call it response. So this mixing will take one parameter. That's instant here. Break point. As we said, First break point is going to be 1200 pixels, and I'm going to call it extra large so it break point equals two extra large in this case , 1200 peaks is then we have to change some styles, so we need here. If directive and as a condition we have to insert break point double equals two x l then we need to create block of coat. We have to insult here. Media query with Max with 1200 pixels. So when we include this mixing and define argument as excel that this condition will be true and code block inside this if statement will be executed, actually, the block of code shouldn't go directly in here. It will go to where we include this mixing. In order to do that, we have to insert your key word content with that sign. Actually, we haven't refer to content yet, and I think it's the good moment to describe its functionality. So the first break point is ready. As we said, we need to create some space between first navigation items. So let's go to navigation. Don't a CSS file, then include mixing right include response and, as an argument, insert your ex out So we know that to create space between items, I'm going to change starting line number off. Great column. So instead of seven, that's right here. Six. As you say, we added code block to mixing, and that's exactly what content allows us to do. So it's a conceit. No, navigation is looking good Next. I think we need to decrease slightly height or slide show. So let's go to slight showed on a CSS file than include mixing right. Include response with Break Point, Excel and said Height as 70 VH. All right, so under the break point, we don't have to do anything more. Let's go ahead and find next one. I think it should be. 1000 Peaks is because some of thes sections and elements are not looking quite good. So let's create new if directive. Actually, I'm going to duplicate it, then change Excel into LG, which stands for large. And I was so changed. Mark Sweet. Let's make it 1000 pieces. Let's start again from navigation because we need some more space between items. So let's go to navigational CSS file, then duplicated this code instead. Off Excel, insert LG and change starting line number off grid column instead of six. Right? Five. All right. Next, I'm going to take a year off second navigation because we need some space between its items as well. Let's go ahead and copy this coat pasted for second navigation and change line numbers off . Great column. By default, we have three and eight and in this case, we need to and night. All right, that's it about navigations next element that I'm going to take years off his main heading as the seats wrapped. Actually, I think we can fix this problem without including any mixing. Let's go to heading the other CSS file. As you see, it has great column with line numbers four and seven. So if it takes up entire width off header, then it won't be wrapped anymore. So in order to do that, we just need to change line now. Birth as one and minus what? Okay, so Heading is looking good and actually on the break point with Heather, we're done next section, which needs some changes. His slide show. I think we need to decrease again, its height slightly. So let's open slideshow that a CSS file, then duplicate this coat change break point right LG and instead of 70 h right, 60 VH. All right. Next we have to decrease parting off content off slight. So let's go ahead and include mixing inside content. Let's copy it from here, then paste and right putting to rent. Okay, that's it about slideshow. Let's move on and customize products section. Actually, products are looking good. We need to make some changes for description, which appears on over. So it's open products that a CSS file, then inside description paced mixing. At first, I'm going to change parting. Let's make it one ramp. Then let's decrease size off heading and paragraph pace a guy mixing. Then write phone size, use function size and insert argument MD. Then I'm going to grab this code and pasted for paragraph. Let's change phone size right here as all right, so heading and paragraphs are looking good and last living it to work on a bottle. Let's go ahead and paste, mixing for it as well. Decrease parting right values point to run and 0.5 rent. All right, that's it about Prozac section on the break point. It doesn't need any other change. Let's move on to footer. Actually, it's not looking good. We have to make you some changes that's open footer dot CSS file. So on that break point, I want footer element to be wrapped. Let's insert here, mixing and then assigned to falter. Flex rob with value. Rupp, as you see footer element wraps, but it's containing parts are getting too close to each other in order to fix that. We have too many polite on by putting. So let's paced, mixing for contact, then right, putting zero at the top and bottom and 10 ramps or left in the right side. Now we have a better result. But that's not what we wanted to get. We need both leased to be placed side by side at the top off contact for in order to achieve that, we have to change value off order property for contact for by default, flex items or their number is zero. So if we make it one for contact, then it will be ended up on the lease. So as you can see, contact form is placed on the list, but we need some space between them. So let's use margin top with value for rest. All right, that's it. About 1000 pixels. Everything seems to be looking good. Let's go ahead and find next break point. I think it should be about 760 pixels, so let's create new break point go to mix. Since that s CSS file, then duplicate. If directive change break point, let's call it M D. I mean medium and also change Max with right 760 pieces. So first of all, before we customized individual elements, I want to decrease phone size for HTML element. We're doing that because it will have influence on entire webpage. So let's go to based on the CSS file and include here. Mixing right include response with Break, point and D, then write phone size. So until this 0.1 remedy equal to 10 peaks is, and now I wanted to be equal to nine picks is in order to calculate new phone size for HTML . We have to divide nine pixels by 16 pixels, and we will get 56.25%. So as the sea phone size for entire webpages decreased slightly. All right, let's go ahead and work on navigations. We need some space between items, so let's go to navigation that they're CSS file, then duplicate this coat change break points. We need M D and then change starting line number right for I'm going to grab this code and that's pasty for second navigation. We need here lie numbers one and minus one. So it means that second navigation will take up entire with off Heather. All right, next, I'm going to take care off. Slight show. I want to decrease its height. So let's go to slideshow that a CSS file, then duplicate this coat change. Break points, right? M d. It said, Hide as 50 the h Well, right Next, we have product section, but we don't have to making changes for the section. It's looking good, So let's move on to footer. I think we need to decrease likely phone size, off contact heading and paragraphs. So let's go to food. Turned of the CSS file and include mixing for having change phone size, right function size and insert your LG. Then grab this code pasted for paragraph and make phone size empty. All right, so now they're looking better. Let's make browser a little bit smaller. Actually, I want to mention that here happens. Some weird thing regarding text inputs. They should shrink like inputs down below, but for some reason they don't. I'm sure that it's an issue off Mozilla far folks, because in Google chrome they work fine. So anyway, in order to make those inputs looking a little bit better on the break point I decided to assign to rapper I mean two inputs group justify content with value center. All right, so on the break point we're done. And actually I think that there might be left only one last break point. So let's make problems of smaller. I think next break point should be about 560 pieces. So let's go ahead and create new media. Go to mixes the less CSS file duplicate If directive then change break point right here as I am and also change marks with. We need 560 pixels. First of all again, I'm going to decrease phone size of HTML element. Let's make one ramp equal to eight pixels. At first, duplicate this code and change break point. We need to U S M. So in order to make one ram equal to eight pixels, we have to divide Eight Peaks is by 16 pixels, which is going to be 50%. All right, so on smaller screen size, we have to make you some changes. Let's start from header in order to create some space between items off first navigation, let's go to navigation of the CSS file then duplicated this code change break point. We need as M and also change Starting line number right to All right, So that's it about header. Next, we need to make slight change for content off slide minutes in space between content and the right edge off page. For that, I'm not going to use Media Query. Let's go to slideshow the CSS file and just define right position off content and by default, cited as six reps. Okay, let's move on to Product Section. As you can see, we have to make some changes for description. I think would be better if we hide heading in paragraph, it'll and just leave button. So let's go to products, not the CSS file. Then duplicate mixing inside, heading off description change break point right s m. And also we need your display. Not then grab this code and pasted for paragraph. So heading a partner for hidden but button itself doesn't look quite good. I think we can get rid off border and background off description it all. So let's go ahead and duplicate this code right here s M and that insert here Background color with value transparent and border none. All right. Lastly, let's increase with off bottom and also creates imparting That's again duplicate code right here s M and then change values of putting. We need you 0.5 ram and 0.7 rent and also define with Let's set it as seven reps. All right, so with products section, we're done. The only thing that have to do is to take here off social media icons in food. As you see, they are too close to each other. So let's go to food turned, Alessia says file than insert here, mixing. I'm going to decrease within height. Let's make both of them three reps and also decreased phone size for I element paced here mixing and right phone size. Then function size and insert your sm. All right, so that's it. Our project is responsive on all screen sizes. Finally, we can say that we have finished working on it and actually our course is over. I hope you have enjoyed it. Learn lots off useful things in Suss, which is really the most popular CSS pre processor today. I want to say thank you for being with us. Wish you all the best. Keep learning improve your skills and knowledge. Also, I want to say that stay tuned because we're going to release other new courses which will help you to go, father and to become a really good Web develop. All right, good luck and bye bye.