Bootstrap - The Complete Bootstrap Course - Build 4 Modern Projects | George Lomidze | Skillshare

Bootstrap - The Complete Bootstrap Course - Build 4 Modern Projects

George Lomidze, Developer / Designer / Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
62 Lessons (9h 49m)
    • 1. Promo

      1:25
    • 2. Introduction

      2:38
    • 3. What is Bootstrap

      3:15
    • 4. Setup

      7:25
    • 5. Get the Most out of the Course

      2:50
    • 6. Basic Typography

      10:01
    • 7. Text Alignment and Colors

      9:10
    • 8. Responsive Breakpoints

      5:22
    • 9. Spacing And Sizing

      13:17
    • 10. Floats and Positions

      5:06
    • 11. CSS Flexbox - Introduction

      5:56
    • 12. CSS Flexbox - Flex Container Properties

      14:47
    • 13. CSS Flexbox - Flex Item Properties

      9:31
    • 14. Bootstrap Grid System - Part 1

      7:54
    • 15. Bootstrap Grid System - Part 2

      7:24
    • 16. Pure Bootstrap Website Project Overview and Setup

      6:32
    • 17. Pure Bootstrap Website Navigation

      14:19
    • 18. Pure Bootstrap Website Banner

      7:30
    • 19. Pure Bootstrap Website Skills

      7:02
    • 20. Pure Bootstrap Website Projects

      6:53
    • 21. Pure Bootstrap Website Team

      8:19
    • 22. Pure Bootstrap Website Progress

      5:36
    • 23. Pure Bootstrap Website Contact

      7:09
    • 24. Pure Bootstrap Website Footer

      6:34
    • 25. Admin Dashboard Project Overview and Setup

      4:18
    • 26. Admin Dashboard Navigation Part 1

      11:31
    • 27. Admin Dashboard Navigation Part 2

      7:47
    • 28. Admin Dashboard Navigation Part 3

      16:57
    • 29. Admin Dashboard Modal Box

      6:56
    • 30. Admin Dashboard Cards

      9:23
    • 31. Admin Dashboard Tables Part 1

      9:44
    • 32. Admin Dashboard Tables Part 2

      6:30
    • 33. Admin Dashboard Progress

      7:23
    • 34. Admin Dashboard Task List

      10:00
    • 35. Admin Dashboard Activities

      9:06
    • 36. Admin Dashboard Quick Post

      10:16
    • 37. Admin Dashboard Footer

      5:20
    • 38. PhotoX Project Overview and Setup

      5:18
    • 39. PhotoX Banner

      10:29
    • 40. PhotoX Navbar

      17:31
    • 41. PhotoX Mission Part 1

      7:29
    • 42. PhotoX Mission Part 2

      8:33
    • 43. PhotoX Collection

      8:16
    • 44. PhotoX Gallery

      15:29
    • 45. PhotoX Customers

      10:53
    • 46. PhotoX Price Cards

      19:20
    • 47. PhotoX Contact

      18:24
    • 48. PhotoX Footer

      12:55
    • 49. Book Store Project Overview and Setup

      12:14
    • 50. Book Store Header

      11:07
    • 51. Book Store Gallery Part 1

      6:16
    • 52. Book Store Gallery Part 2

      15:55
    • 53. Book Store Famous Writers

      19:04
    • 54. Book Store Suggested Books

      10:48
    • 55. Book Store Popular Books Part 1

      6:51
    • 56. Book Store Popular Books Part 2

      7:46
    • 57. Book Store Popular Books Part 3

      10:22
    • 58. Book Store Contact Section

      16:19
    • 59. Book Store Contact Part 2

      6:34
    • 60. Book Store Footer

      10:47
    • 61. Book Store Navigation Part 1

      13:36
    • 62. Book Store Navigation Part 2

      15:44

About This Class

If you want to learn how to create modern, great looking and nicely designed websites, then this is the right class for you. Welcome to the complete Bootstrap course. 

The course is project-based because we think that creating projects is the best way to learn one of the most popular and widely used technologies today - Bootstrap. Bootstrap allows us to build modern and nicely looking websites in a very simple way, so, if you want to take your web developer/designer skills to the next level, then you definitely need to know how to use bootstrap and what it actually does. 

The course consists of several sections, we will start from Bootstrap basics like typography and utilities. Then you will be able to learn how to align elements on the page, using a Bootstrap grid system, and also, we will cover CSS Flexbox as well.

After that, comes the main and the most interesting parts of the course. We will start to build projects, in which you will be able to learn the rest of the topics of bootstrap, like bootstrap components and much more. Our first project will be built using pure Bootstrap without using any CSS or jQuery. 

The second project will be the admin dashboard, in which we will use bootstraps and also some CSS and a little bit of jQuery. So, in this section, you will be able to learn how to create a modern and well-designed dashboard for admin. 

The next project is going to be photoX. It will be a website about something like a photography company. This project will consist of multiple sections in which, you will meet more advanced and complicated things built with bootstrap, CSS, and jQuery. 

As for the last project, it will be a kinda different and interesting one, we will build a website about something like book store and unlike previous projects, it will be more complicated and advanced. Throughout this project, we will build really nice and different types of sections, which will be impressive for you. 

Each project will be fully responsive to all screen devices.

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

Get fast and friendly support from instructors 24/7.

JOIN US!!!

Transcripts

1. Promo: 2. Introduction: If you want to learn how to create modern, great looking and nicely designed websites, then this is the right course for you. Welcome to boost up for create real world projects Hi, I'm George and this is Lasha. We are the creators and designers of this course, with several years of experience in Web development, Web design and in teaching as well. The Courses project based because we think that creating projects is the best way to learn to stop, which is one of the most popular and widely used technology. Today. Bootstrap Pelosis to build modern and nice looking websites in a very simple way course consists of several sections. We will start from bootstrap basics like topography and utilities. Then you will be able to learn how to align elements on the page using booster great system . And besides, because of that booster for uses CSS Flex books, we'll cover this topic as well. After that start, the main and the most interesting part of the course will start building projects in which you will be able to learn the rest off the topics of booster like elusive components and much more. Our first project will be built using pure bullshit without using any CSS or J coury coat. The second project will be adamant Dashboard, in which we will use lots of bush and also some CSS on a little bit off Jake. So in this section you'll be able to learn how to create modern and well designed dashboard for Admit. Next project is going to be photo X. It will be the website about something like photography company. This project consists of multiple sections in which you will meet more advanced and complicated things built using cruise ship CSS and Jake. As for the last project, it will be kind of different and interesting. One will build website about something like bookstore, and unlike various projects, it will be more complicated and advanced throughout. This project will build really nice and different type of sections, which will be really impressive for you. Each project will be fully responsive for all screen devices. Throughout the course, you will make detailed explanations about how the trick works. Also, you will introduce to modern practices and solutions during watching lectures. If you have any question, you can feel free and reach out any time and you will get fast and helpful support probably structures. All right, that's join us 3. What is Bootstrap: Hello and welcome to our first lecture. First of all, I want to say thank you for enrolling this course. I'm sure that this is the right course for you, and you will learn a lot. This lecture is going to be about what puts Trump is, so let's go ahead and have a brief overview about this topic. Actually, Booster is an open source front and framework, which is built based on three core technologists like HTML, CSS and JavaScript. But Trump is a great way to save your time and energy as a developer because it allows us to create faster without much coding, nicely designed webpage, which then can be customizable by developed. So again, what is Bootstrap Bruce up is an open source, front and framework. It uses HTML and CSS tablets and classes, which is already created by developers, and the only job that we have to do it to use those classes and templates. Besides HTML and CSS tablets boost up also uses JavaScript widgets. Mostly, they are used for bullshit components, which allows us to make our websites more beautiful and dynamic. In general boots abuses responsively out so you don't have to worry much about making your website responsive. Using both of you can do it in a very simple way. If you don't have much experience in Web development. I mean, if you know, just let's say ABC off HTML and CSS, then it's absolutely OK because Bush up is really easy to learn, especially if you compare it to any program language. One of the biggest advantages off bullshit is that it automatically has supporting over browsers, so you don't have to worry about browser compatibility. As we said using push up, you can develop your websites in a faster and easier way, and also it makes overweight pays responsible. Actually, there are several components, which makes Bush of more popular like now birth Corozzo carts, drop downs, Accordions, models, forms, buttons, badges till tips and much more. You will learn about all of these things for the course. All right, let's talk a little about versions of push up. For now. Current version is 4.1. There was a big update between Boutique three and Boots of four versions. One of the main difference is is that boots or four uses CSS black spokes instead of flows in layout. Also booster for moved from less to suss, which are CSS pre compilers. Besides that, we have slight changes in colors, buttons and measurement units. The version for uses relative units like ramps and GM's. Also, there is added a new response, a break point for extra large screen size. In both four. I want to note that a couple of videos are recorded on a 4.0 version, but because of that, there are no changes in bosom classes that we are using. Throughout those lectures, you can feel free and watch them without any problem. If there is any important update in the future, the course will be updated. According All right, that said what I wanted to say, So let's move on to the next lecture. 4. Setup: actually, before we start writing the code and boost Trump, we need to set up some tools, which are code editor and modern Web browser. Throw the course. We're going to use visual studio code, which is a free and also one of my favorite code editor, and it's created by Microsoft. As for the Web browser, I'm going to use Google Crop. Actually, those tools are optional. You may have your old favorite code editor or Web browser, and it's absolutely okay you can feel free and use them. But nowadays I think that B is code and he will come out one of the best tools to use. I'm sure that you already know how to use Google Chrome, so I'm not going to waste time on that. As for the Venus code, in order to download it, you have to visit to co dot visual studio dot com, then click on download and then you have to install it, which is a very simple process. Actually, I have already installed those two tools, and the next thing that I'm going to do is to create our working folder. Let's call it boosts up for then open V s code and drop this folder in it. I'm going to create html file. Let's call it being mixed up html. All right. Actually, there are several ways to use Bootstrap, Forcible. Let's go ahead and visit to boost of website. Let's type here, get bootstrap and that come So this is the website where you can find everything regarding bootstrap. As we said, there are several ways to use it. 1st 1 is to use ready content delivery network links. It's also called a CD. Um, and the 2nd 1 is to download the proper brutal files and used up and the most part of our course we will use city links. But besides that, you will also learn about how to download and use butcher farts. For now, we're going to use cdn links. So in order to get them, we need to click on get started bottom. So you see, here we have links for CSS and JavaScript. Those are the links that we will use and also down below. We have booster started template, which includes all that needed links. All right, let's copied this template on pay stating our index dot html file, then delete those comments also entitled That's Right, Boots So four and get rid off this heading as well. Okay, so in had element, we have link for bootstrap, see assess. Here is used boots up minimized CS version and down below. We have three JavaScript links. 1st 1 is for J Quarry. Then we have proper Js link, which actually is another JavaScript library, and it's added in boots the before version. And lastly, we have blue soup minimize JavaScript link. All right, that's it about Bush up Starter tablet. The next that I'm going to talk about is some packages off V s code throughout the course will frequently use damage package, which by default, is built in visual studio. If we use different code editor than you can install it because it's really helpful when you write html coat. The second package that we're going to use is life preview mode. It helps us to run the code without reloading the page each time. In order to insulate, you have to click on extension manager than search for life server and then click on insult . I have all of the lift, so that's why you don't see here in Seoul bottom. Okay, lets for the adjectival theme we're using here theme called An Old Hope. But besides that, there are dozens of different themes. You can search for them in extension manager and instill any off them you like, but also when you instantly his code, you can find several default theme's. In order to choose them, you have to click on settings, then color theme and choose the thing you want. Besides that, you're able to modify some settings. You need to click again here on settings icon and then choose settings. So on the left side we have default settings, which you're able to change in order to do it. You can click on, add it, then choose the proper value, and after clicking on that, it will be appeared on the right side in the least. Actually, I'm not going to use auto, say so. Let's delete it so you can go through those settings and modified them as you wish. All right, that's close settings and run this file using life preview moat. In order to do that, you can either click here down below on go life or by right click. You can choose open with life Summer so the file is launched in Google Chrome. I'm going to organize editor and brother. Let's place them side by side before I finish this lecture. I want to show you how we can use Amit in order to create any off the HTML elements. You don't need manual ity, open angle brackets, and they're right Open against closing tax. You just need to write. Name off the element, let's say deep, then press tab or enter and the element will be automatically created. If you need to create, for example, 10 developments, then unity. Right Deve, then star that needed amount of elements and then press top. So you see that we have here 10 deep pounds, all right. Next, I want to show you how to create elements followed by its child element. Let's say we want to create Steve and then inside we need H one heading element. For that, we have to write Steve then greater than sign and h one. So you see that we have wanted results. Okay. The next thing that I want to show you is how to create element with attributes. Let's say with class or I D For that, we have to write Name off the elements. For example, H one. Then in case of class, attributes Unity Place dot which will be followed by the value off class attribute. Let's say having so you see, we have a Chuan heading elements with class heading in the same way in case of idea trip. But we need to write Name off the elements, H one, then hash sign and then the value heading. Here we go. We have a Chuan with I d. Attributes in case of developments. You don't have to write his name. You can just place dot or, in case of i d hash sign with the value, let's say test. All right, that's it about, um, it's I have showed you just basic use cases of this package throughout the course. We will use it very frequently. Okay, so we are ready to go. Let's move on to the next lecture 5. Get the Most out of the Course: before we actually jump into booster up, I have decided to make a little video in order to guide you how to get the most. After this course, I'm going to give you some tips and suggestions which I think will help you in many cases. First of all, I want to highly recommend to write the code with me during the lectures. It will help you to practice. Remember things in both ship, and also it will allow you to test some things on your own. So with watching the lectures, you may understand everything clearly, but I think it won't be enough because you may forget lots of things very easily. The second that I want to recommend is to try your best. I mean, sometimes throughout the course, you may have some errors or issues. The best way to solve that. Mr. Try to find out what's happening on your own, because I think that this is the way to turn yourself into battle work developer, and it will help you to get additional skills in struggling with machin problems. But regardless of that, if you can't find solution, then of course we're ready to help you can send your questions and issues. Incurious section. Besides that, you can check out frequently qs action. And if you find their questions off other students, you can feel free and help them because it will be useful for you and helpful for other students. Actually, I'm telling those things because I want you to get the most out of this course. And it doesn't mean that we're lazy or something like that again, we're always ready to help you. This course is about boo trip, and I have a great news for you. Bullshit has really nice and helpful source on its website. Let's check out what I mean. You have all of this in this website in previous video. In order to visit it, you need the following address. Get boost up dot com and in documentation, you're able to find everything about Bruce. Actually, this documentation is really well structured on. It's really easy to find any kind of information you need about Bush. So here on the left side, you see least of different topics in bosom like layout content, components, utilities throughout the course. We will refer to them and would be great if you visit this website frequently and check out specific topics, especially when you're confused and have some trouble in understanding some things in as you all of the notes throughout the course. We're going to build for different projects, and when you start building them, you can absolutely feel free and try to improve them. I mean to improve design and content off projects, you can add new section to them, and also you can even write the batter called than me. And if you do that, then you can share your job to us. We would really appreciate that. All right, that's all about I wanted to say, Let's start our journey. 6. Basic Typography: When you run HTML coding browser, it has some default starts, which might look in slightly different ways in different browsers. One of our goals as developers is to maintain the same looking styles in all browsers. So when we use boots wrap, it includes reboot styles, which, actually using only HTML Element selectors makes the webpage looking nicer and the same in all browsers. So reboot make stars consistent across different browsers and platforms. So, as we said, ice demon elements have their default styles, and in practice we use CSS code to style and designed them. When you use only those two technologies, I mean HTML and CSS. Then you have to do a lot of things. You have to struggle much and span a lot of time in order to achieve needed results. And that's the moment when the bootstrap ConStor plight using bootstrap, you complies the elements on the page wherever you want, in a very simple and easy way. And after that, using your own CSS style, you can make some corrections and style elements to look them in different and better wait . Using this approach, you can avoid worrying about how your webpages looking in different browsers, and also you'll spend much less time to achieve wanted results. All right, let's go to our code editor and see what I'm talking about. At first, I'm going to create having element. That's why, to your hello world and also a little paragraph with some dummy text. Amet Extension has nice feature to get a lot of gypsum dammit text. We just need to write Florham and then needed amount of words. Let's say 10. As you remember, I'm using Life server. So when I said the file that the pageants were loaded automatically. So here we have our heading and paragraph, and those elements already have some styles using bootstrap. If we comment, put troubling out, then we'll get default browser styles, which actually looks really ugly. All right, let's get the link back. So as for the phone type, boots are for uses, Helvetica font family and also phone size is a little bit larger than its in case of broader default starts. Let's discuss some basic bootstrap topography classes, but before we do that, I'm going to go to Bootstrap website in Documentation section. We have content part in which you can find topography. Actually, it's a great source. You can find here all the classes and introduced them. I'm not going to describe all of these classes in details because I think that it will be a little bit boring and not really interesting. I will just show you some commonly used classes. At first I'm going to start with headings. So let's copy those headings from here and paste them in. Editor. If we saved them, then we'll get all those six headings and you can see that they are displayed in different ways. Because of bootstrap. As we have already mentioned, those headings are a bit larger than they default. Heading styles Booster for uses rams as measurement units. Generally, one ramp equals 2 16 picks us because for HTML, Element 16 pixels is a default font size, but it would change manually different sides of extreme elements that's open style tux and change the front size off HTML right here, 30 pixels. Then all those heading elements will be changed accordingly because in this particular case , one ram became equal to 30 pixels and not 16 pixels. You may wonder, why does Putra before used rams instead of any other measurement unit. One of the main reasons to be noted is that users are able to change the phone size of webpage from browser settings. So if we go to settings and change default size as, for example, very large, you see that headings didn't change their phone size. That's because we have all of the SAT phone sides of vegetable element in pixels manual. So if we change 30 pixels into, for example, two rams that they're heading will become very large. And that's actually one of the advantages of using ramps. All right, let's go back to settings and change the phone size again also billet those styles. So instead of using HTML had in tax, we can transform and it taxed into heading. It doesn't matter if it's heading or program for any other element, and we can do it using having classes. Let's go to bootstrap website. You can find here heading classes, so let's copy them and paste. Also, I'm going to make here horizontal line to distinguish better those coats. So you see that using paragraph and having classes, we can get exactly the same results. We can use those classes with heading elements. For example, if we assigned to having one class name as H five, then the heading will get the same size as age five. Hiding Element has so in some cases, using those having classes may be very useful. All right, let's go ahead. If you want to make the text looking like subheading, you can use the HTML element called Smoke. So let's open small taxi edge to heading element with some taxi. You. Let's save it and you see that we have here kind of lighter secondary tax. It's styled, according to its parent HD heading element. Besides that, we can avoid using small tax and instead of it, use bootstrap class smoke. Let's do it for having elements open here. Span elements with class name small. Then again, write some text so you see that we have here almost the same results, but now for age three having armed and we have achieved it using postscript class small. Okay, let's go ahead and talk about display classes. When he wants your taxes tend out. Then you can use display classes. Let's take a look on boots website again. We have four types off display classes, display 123 and four. Let's copy to gain and paste. So you see that those headings is much larger and also, in my opinion, they look more modern and nicer. You're able to use display classes with headings, paragraphs and any other elements, but actually it's recommended to use them with having arms. Also, you have to note one thing regarding display classes. It doesn't matter if you assigned those class names to H one or H two or any other level of heading, they will look in the same way. All right, let's go ahead and create heading, right? Hello world and paragraph with some Tommy text. So we have here heading in progress on the page. In order to stand out those elements we can use display one class for H one heading element . And for paragraph, we can use class called leet. So you see that both of them are looking in different on much better. Wait. All right, let's take a look once again on documentation. So again, I'm not going to go through each of these classes and elements because we will use lots of them throughout the projects. But I recommend you to read this article on introduced to each of these classes. Before we finish this lecture, I'm going to talk about least elements so that's copied them and paste in Editor. Also, get rid of this class name. If we save it, then we will get default. Least house here with bullets. Let's get back Last name least and styled and also assign its to the nested. You'll element here. This book drop class removes all the defaults, tiles off list elements. So if we say which we will get list elements without bullets. Okay, let's delete some of these list items. We just need several off them. Besides list on start class, we have a list in line class, which actually makes those elements in line. In order to do that, we have to assign to you element class name list in line and then for each list item we need to class name called list in line item. So you see that list items are displayed as in line earnings. I mean, they are placed on one light. All right, that's it for basic topography. It's pretty much simple again. I recommend you to go through all the topography classes and also our command to do that on put Trump website because there were presented all the classes from the lightest push up version. Okay, let's move up. 7. Text Alignment and Colors: in this lecture, I'm going to demonstrate some of the commonly used text classes and also will talk about colors in booster for in order to control text alignment off block level elements In CSS, we used to be using properties like texture line center, right, left and justified, but in both Republican, achieved to the same text alignment, controlling by using proper classes. All right, let's create three paragraphs with a little Laura Ipsum text. I'm going to duplicate it twice. As you know, paragraphs are block level elements. It means that they take up the full with available on the page in order to see better. What I mean, I'm going to assign to those paragraphs background color, and I will do it using internal see assess. So let's open style tax that select P element Hunt, then right background. Yes, great. So you can see that the background color is stretched on the full page. It means that paragraph took up the full available with so the text alignment classes that I want to represent Hello us to align text inside element boxes as a default H block level element is aligned to the left side on the page so you can imagine that elements have the following class Name, text, the left. If I save it, of course, you will see that nothing's happened here. The first part of taxes still aligned to the left side. Now suppose that we want to center tax off the second paragraph. For that we have to use class text center and as all of the guests, in order to align text on the right side, we need to use class text, right? Okay. Besides those classes, we have another class called text. Justify. So at first I'm going to create another paragraph and that insert here kind of beaks text then assigned to the paragraph close as text justify before I save it, I want you to focus on the right edge off the paragraph. You see that the lines off the paragraph do not add symmetrically. So if I save it, you will see that content of paragraph is thrashed on the page. As I have mentioned, those classes work with block level elements. So in order to prove that I'm going to make them in line. So let's write for P elements display in line and now you can see that those alignment classes do not work. Because at this point, the size off with off paragraphs depends on the amount off the text. All right, let's get rid of these styles. The next text classes that I want to introduce you is text upper case lower case and capitalize. So in order to make text upper case, we can use class text opera case in the same way we can transform taxing to lower case. For that, we have to use text lower case class. And the 3rd 1 is text capitalize, which actually makes the first letters off each word in the paragraph. Uppercase. All right. Using somebody tripped classes, you can many polites on weights off the front. For example, if you want to make front Boulder, you can use phone to wait. Vote as a default. Every text content has class, name, phones, waits normal. So you see that nothing has changed. And in order to make the text a bit lighter, we can use phones. Wait light and the last class name regarding phones that I want to show you is fault. Eight Alec, which actually makes the text italic. All right, So that's the main text classes, which are commonly used. You can check out those class name saying bootstrap documentation. You need to go to utilities and then text, so here you can find all the text classes. Okay, let's go ahead and talk about some color classes that are represented in bootstrap. You have to check here. Kohler spot. So here we have all the colors, and also we have here background colors that offers us bootstrap. Let's go back to code editor. I'm not going to copy the code from documentation because in order to get better practice about bootstrap colors, I'm going to write them manually. As first. Let's remove those paragraphs and then create another one with some content and stand duplicated for nine times. The first color that I want to introduce you is primary. It's kind of blue color, so we need to use class. Name, text. Primary. Actually, this color sometimes is used when you want to make the text important. The next color class is text secondary. It makes the tax gray, and generally it's used when you need to make the text as secondary. Then we have text success, which actually transforms text color into green. This color actually indicates success. It's used, for example, when user locks ing successfully or pay successfully. And so what? The next text calories text danger it makes tax read on actually represents danger. For example, sometimes you may see red buttons, which allow you to delete something very important. Okay, then we have text warning. It makes color off the text as yellow, and I'm sure you guessed what is the meaning of this color? Also, we have text info which transforms tax into Canada light blue color, and it may be used for some information content. The next one is text light. It makes text almost white, but it's slightly noticeable on the white background. We have also text dark, which actually is default. Fourth color. The next one is taxed muted. It makes text color kind of lighter, and the last color class that I want to show you is text light, which makes the tax absolutely white so you cannot see it on a white background. All right, those are the colors that are represented using boat trip classes. Let's go back to documentation. You're able to use those colors with links as well. But there is one thing to note. When you hover on the link text, then the color becomes a bit darker, so it makes a little hover effect here. This happens with all the colors, but except off text, white and text muted colors. Okay, let's move on and see what happens With background colors. We use exactly the same colors with backgrounds, so I'm not going to write them manually because it's very easy to understand, and I don't want to bother you. You can simply check out them here in order to change background color off the Element unit class Name. BG Dash on the name of the color. Here you can notice other class names, which are used for padding and margin bottom. You can simply ignore them because we will refer to them a bit later. And the one thing that I want to mention regarding background colors is that you can use all the colors for backgrounds, but except off muted. Okay, that's it for this video. So in this lecture we have learned about bootstrap tax and color classes. Let's go ahead 8. Responsive Breakpoints: in order to make webpage responsible in different devices. In CSS, we used media queries with different screen sizes. Bootstrap also uses media queries to define different styles for different screen sites. It uses four break points they create. Five screen modes were weaken, define different stars. So we have extra small screen sizes, which is less than 576 pixels, then small, in which I mean screen size from 576 pixels to 768 pixels. Then we have medium screen sizes, which takes up screen size from 768 pixels up to 992 pixels. Then the next one is large. Screen sites from 992 picks us up to 1200 pixels, and the last one is for extra black screen size, which is defined from 1200 pixels and above. And this one is added inputs of for version. All right, let's go to visual studio and same practice. How those break points actually work. In previous lecture, we have learned how to align text in different places on the weapons, so I'm going to use those classes. Let's create heading element with some text. Also, I'm going to assign to this element bootstrap class text center. So you see that having element is placed in center on the page. Actually, it will be centered on every screen moat. Now let's use break points to define different styles for different screen sizes. Let's say we want to center, heading for every screen size except extra small. For that we have to right in the middle of the text center class s um, if I save it, then the text will be still placed in the center. If we make screen larger, then tax will maintain its position in the sensor. But if we make screen size extra small, I mean less than 576 pixels. Then the text will be aligned on the left side, which actually is elements default alignment. Okay, In order to test better styles on different screen sizes, I'm going to use device tuber, which allows us to change manual with screen sizes. This number here indicates with off the screen and this one is for height. Also, you contest starts on different mobile devices from here, so s besets most criticized ants on 576 pixels and then starts extra small screen size it will write your 576 pixels that the text will be centered, and it will maintain this position on the rest off the screen sizes, which actually are greater than 576 pixels. If we write your 575 pixels, then tax will be aligned to the left side because this screen size becomes extra small. So I hope that everything is clear for you. If we want to change this 1000 different break points, then we need to manage its manually. Let's assume that we want to align text on the center for medium, large and extra large screen devices. Then we just need to change as I am into empty. And now we have changed the break point for all 576 into 768 pixels. The text will be centered from 768 pixels and above, but for small and also for extra small screen sizes, text will be maintained on the left side in the exact same way. You can change medium into large and extra large, and the break points will be changed accordingly. So the key points that you need to understand well and remember, is that using those appropriations. You define styles starting from the particular break point and above, but not below. It makes us so. The break points are defined according to minimum with and not maximum. All right, you may wonder how you can change 1000 only for one screen size, let's say only for small screen sizes. For that we can use to classes in combination. So if we're right, text S I'm center and then text MD left. Then, as we all know, D mentioned text will be centered on Lee for small screen size and for the rest of the screen sizes. I mean extra small, medium, large and extra large text will be aligned on the left side. Okay, we have used here only one plus, which is used for text alignment. And I did it just for demonstration proposes. But throughout the course, we will use break points with many other boots up classes. This stuff sometimes it's confusing, but at the same time it's very important. So I recommend you to test them on your own and practice in it a bit more. All right, See you in the next video. 9. Spacing And Sizing: Bootstrap Palos is to make spacing between elements and very easy and simple weight. In this lecture, we're going to be talking about margins and part ings and also will discuss how to change sides off the elements. I mean the width and height off them. Using portrait class, Let's take a look on boots up documentation. In utility section, we have spacing in which you're able to find information regarding margin and planning classes. He would have the abbreviation for marching and putting properties, so M stands for margin and P for putting. Also, you're able to indicate sites, for example, For top, you can use T B for bottom, and also we have left and right. If you want to send margin and putting for left and right sides at the same time, you can use X on for top and bottom. You can use white. Besides that, we are able to use response a break points with margins and planning classes, and if you do it, you need to place them between sites on the sizes. Okay, let's talk about this. Size is you can indicate seven different values from 0 to 5, and also we have here Auto, obviously, in case of zero, you set margin and putting a zero. But with the rest of the values, the calculation off margin and parting sizes are different. So, for example, when the value is one thence pacer is multiply 2.25 rams. Actually, spacer is suspect, viable, and by default, ID equals 2 16 pixels. So in case of one, the value of margin and parting will be four pixels for the next sizes. I mean, for two and three, the value is doubled in case of two space, or is multiply 2.5 RAM. And for three we have here only spacer because in this case it's multiply to one room, and by default it's 16 pixels for the next size, which is for the value of marginal. Parting is not doubled if you compare it to previous value. In this case, Pacer is multiply to 1.5 right. But in the next case, I mean for five, the sizes again doubled on the spacers multiply 23 ramps and finally we have auto, which actually says Martinus Auto, and in most cases it's used in order to scent of the arms All right, let's go to B s code and write some examples to understand batter all of this stuff. I'm going to create multiple paragraphs with some content. Let's duplicate it twice. Also, I'm going to change background colors to test better For the first paragraph, I'm going to set background as primary. I also text as light, then for second paragraph, let's use background info and text white and then background warning. As for the last paragraph, I'm going to leave its taxes dark. Okay, as a default. Those paragraphs have margin bottom, which in this case, it cost to one ram. And in order to prove that, let's inspect the page. And then I'm going to track this style. So you see that for paragraph, we have margin top as zero and also margin bottom as one ramp. So those are the default values. Using booster classes, we can change spacing. For example, if we assigned for the first paragraph margin bottom as zero, then this pace between first and second partners will be removed. We can also increase margin bottom if we rights, for example, and be five, then the margin bottom for the first progress will be increased. So we have used here margin bottom. But people want to change margin for all four sites. I'm in top rights bottom and let then we can write em dash to, As we said in the beginning, off the lecture were able to use responsive break points with margin and planning classes. For example, let's assume that we want to increase margin as soon as the screen size becomes small and then increase it again when the screen size will be large. For that, we have to add the following classes and Essam Dash three and then for a lot screen. Um Dash L G Dash life. So when the screen size will be extra small that the margin Wilbur, too, therefore small and medium screen sizes margin will be three, and for a large and extra large screen sizes, it will be five. Okay, when you want to make space simultaneously on the right and left sides, you need to use class and acts with the proper value. Let's say three. So if I save it, that second partner will get margins on left and right sides in the exact same, or you can make space on top and bottom side simultaneously. And for that we have to use class. And why, with the value, for example, for so you can play around on test how spacing works, using different margin properties. There is one thing to note and remember. So here for the first program we have and be five. If we assigned to second paragraph margin top five, then this pace won't be changed, and it will be maintained as five, which actually cost to three ramps. So we would change here the values and writes for the first paragraph and B two and then for a second paragraph margin top. For then, this space between paragraphs will be four, which is 1.5 rooms. So as a conclusion, we can say that margin property with greater value has the higher presidents, and it always wins. All right, let's go ahead and test how parting classes work. I believe you all of the guests, how it works. With patting. We can use different sites and different sizes in the exact same way as it was in case of margins. For example, if you want to make putting on all four sites, obviously we need to write P and then the value, Let's say three, so you can see that the program has patting on all four sites. If you want to make putting separately on all different size, then you can use proper abbreviation and the value you need. Let's say we want to increase patting on the left site. For that, we can write pl five so you see Di departing on the left side is increased. The old value, which WAAS three is now over, written with a new one, as it was in case of margins. The greater value of parting has the higher presidents on it's always taken into account were able to use the responsive break points with patterns as well. Suppose that we want to make putting one on small screen size, then on medium and large screen sizes four and five on extra large coincides for that. We have to write the following P dash S M desh One than P Dash Empty for and the Last one P Excel. That's five. So if we make the screen extra small than the padding will be three, then on small screen sizes will become one for medium screen size putting will be for and for extra large screen size, it will be five. All right. I'm not going to test all the possible properties and values because I think it's not necessary. I think that the key point here is to understand how those classes actual work. So I contest and practice with different margin and popping classes on your own. All right, let's move on and talk about sizing off the elements. In Bootstrap, we have width and height classes on using those classes. You can manage sizing off the elements that's delete those paragraphs, and I'm going to create developments. Let's change background color using put shop class and said, Big bonus secondary. And also I'm going to assign to it some in line CSS styles. Let's define the wits off the development as 800 pixels and also hide s 600 pixels. Inside the developments, I'm going to create multiple developments with some classes. Let's set background as primary than make texts light. And also I'm going to set Potting s three. Let's duplicate it three times and change background colors right here. Danger, then success. And for the last one, I'm going to use background warning. All right, we're good to go in order to change with off the developments we can use class with which is represented with W, and then we can use the proper value. Actually, we have four different values. In order to make it clear, I'm going to take a look on documentation. Let's go to sizing so you can find here that the values for with class are represented as a percentage. We have 25% 50 person, 7500 and those values are calculated depending on the parent elements with also units. Note that when you use those values with with classes, then you just need to indicate the value itself without person. Besides the with property we can use also marks with class, and the abbreviation for marks with property is M. W. Okay, let's go back to code editor and assign to developments with, for the first time it I'm going to use with as 25%. So you see that it took up 1/4 off its parent elements with then that's a scientist second development with as 50% then for third development. I'm going to assign with as 75 and for the last one, right with us 100 persons, Let's save it on. You can see that our developments have the proper with. So that's the way how, with classes work you can use with and margin auto in combination in order to center the element. Let's do it, for example, for a second development. If we add the class here and Desh photo, then the second development will be placed in the centre after a parent development. All right, let's talk about hide classes. At first I'm going to delay those developments. Let's just leave the 1st 1 High class has the same person teach values. I mean, we have 25% 50 7500 and those values work depending on parent elements. Height. So if we use your height 25% then the development will take up 1/4 off the total height off the parent of Arment. In the same way, we can use 50% selling to five and 100. All right, you can check out puts of documentation and find information regarding height classes. The one thing to note is that, like marks with property, you are able to use Marx height as well. Okay, it was all about spacing and sizing off the elements in both Strupp. Again, I want to say that it's pretty much simple stuff, but at the same time it's very useful. And Hubble Okay, let's go ahead. 10. Floats and Positions: using bootstrap classes, we can easily float elements on the page. In CSS, it was really confusing and a bit hard to understand how to float elements and also how to manage clearing float for parent elements which actually lose their height. But in Bootstrap, we can really easily solve such problems. Okay, let's create developments with some classes. I'm going to set background color as secondary the text center and also make some putting by Pete too. Inside that developments, I'm going to create heading elements That's sad background color as success. Also make some putting. Let's duplicate it, change the background color as primary and then for the first paragraph, right Hello and for the 2nd 1 right world. So we have here to heading elements and suppose that we want to float Hello on the left side, on the world on the right side. For there we have to assign classes to bought off them for hello. We have to write float left and for world we need to assign float right So you can see that elements air floated Earth we wanted. But also the parents development has lost its height. Actually, this is the main problem and in CS says, we had several ways to solve it, either creating new elements on and use clear property or using overflow property or using clear fix hack. But in boots up there is a ready class called clear fix, and we just need to assign it to the power element. So you see that development has got back its height. Besides those two classes, we have also float none. Using float, none were able to remove floating. All right, we can use responsive break points with float classes. That's a we want to float those elements as Souness screen size becomes medium. Then we need to place your and the so if we make screen size medium or a larger than the elements will be floated. Okay, that's the way how floating works in boots drop If you take a look on boots of documentation in utility section, we have floats on Dhere, confined information about float classes. All right, let's continue and talk about positions. At first, you confined to your common values for position classes, and they work in the exact same way as it's in CSS. So I'm not going to waste time on that I want to focus on fixed and sticky position classes . Let's go back to V is code and after developments create paragraph, but with the kind of big text then assigned to development class fixed top. So if you scroll down, development will be fixed and maintained on the top off the page and in the same way we can fix the element on the bottom of the page. We just need to change class from fixed up into fix bottom. So you see that when we scrolled the page development is fixed and maintained at the bottom off the page. All right, let's move onto the next position class, which is sticky. In order to demonstrate how these class works, I'm going to create paragraph. But in this case, I will do it before developments. And then I'm going to change fixed bottom class into sticky top. So when we scroll down the page on development to richest of the top edge after patient, then it will jump out from normal flow of elements and it will be sticked on top of the page. But if we scroll up, then it will get back to its position. So the Colossus, fixed and sticky, are really nice and frequently used. But in case of sticky unit notes that it's not fully supported in all browsers for Internet Explorer 10 and 11 versions, it's considered as position relative all right that sits in this video. We have learned about floats and positions in Bootstrap. Let's move on. 11. CSS Flexbox - Introduction: Before we jumped the plaintive boots or play out section, I decided to introduce you one of the mother ways of layout, which actually is a part of CSS three version. And it's flax books. Some of you may be all of the family or with CSS Flex books, and if you think that you feel confident in it, then you can skip this couple of ideals and moved directly to boots. Upgrade electors. But I recommend you watch videos regarding flex books because you may find something useful and interesting in that. So what is Flex books? First of all, I want to tell you that it's a new and more than technique, which has definitely improved the way off aligning elements on the webpage. Recently, we were using floats to positioning the elements, but nowadays we don't need to struggle with floating because after flex box. Also, I want to mention that it already has almost a full support in all modern Web browsers. Officially, Flex Books layout is called US CSS Flexible layout module, and it's used to manage alignment of items, directions and order in the container. It's really useful and helpful because it can achieve needed result with less coating, and it's also easy to understand and use. I think that the only thing to note is that there exist several properties separately for container and for its chance items that you have to be family with. In this lecture, I'm going to go through those properties and values, and then you will see lots of coding examples to understand them better. At first, I want to talk about one of the main concepts of flax books, which is relationship between container and it's items. In order to make container flexible, we need to set display property as flex or in line flex. But actually in life lacks is not really using the real world. That's unless the container gets display flex. Then it has any influence on its child items the next. Another important concept to consider is directions off how elements are laid out. According to it, we have Maine access reached by default, goes from left to right and cross access, which is directed from top to bottom, but using different properties and values. Those directions could be changed. I know that for now it sounds a bit complicated, but do not worry because we're going to use some practical examples to become It's more clear for you. So for now, just remember that we have flex container, flex item, main access and cross access. I'm going to separate properties for a container and for flex items. So again, first that we need to do is to set for container display properties flex, which then will L. O us to use the rest of the properties for container itself and for its items as well. Next property is flex direction. It defies the direction that container wants to set for its flex items. As I default, they are laid out his row. But also we have column. And besides that, we're able to use their opposite values, which hello US to reverse items flex wrapped property managed If the containers layout, flex items in single or multiple lines, and for that we can use no rap, which is default value and also wrap were able to use shortened way for those two properties and combine them in one property, which is called flex flow. All right, the next one is justified content, which actually ellos is to align items along the main access off the current line off deflects container. It means that you can align items at the beginning off the line or at the center or at the end. Also, you're able to align items with space between space around and Space Valley again. For now, it may be hard to understand what those properties and values actually do, but would be great if you just remember them. I mean to remember separately which properties belong to container and which of them to items. They will be clear for USNS ride some coat the next. We have a line items. It's similar to justify content, but it ellos is to align items along the cross access. I mean to align items in the perpendicular direction. Here, we can see the possible values off align items, property. All right. The lust property that we're going to describe regarding flex container is a line conference which, again X like justify content, but it's used when there is extra space on the cross access. Okay, that's all about flex container properties. Just remember them and now let's move on and talk about individual flex item properties. The 1st 1 is order, which helps us in ordering the items in Rome or in column, and you can do it without changing the place off elements from HTML coat When you want to override for individual flex item the default alignment. Then you can use a line self property, which allows you to align individual flex items. Also, we have flex grow flax basis and flex shrink properties, which actually allows us to change the size of flex items. Also, to define a with off them and also to manage shrinking items are not were able to use those three properties in shortened way with just flags property. So those are the properties and values for flex container and for flex items on which we will work during the comic lectures. All right, let's go ahead. 12. CSS Flexbox - Flex Container Properties: after a little introduction, I'm going to start writing some coding examples. We'll start from Container Properties because I think that it will be more useful and consistent to understand flax books better. So it's enough to talk about theory. Let's get started. Because of that, we're going to write pure CSS code throughout the Flex Books video series. Let's turn off boots troubling in order to avoid any influence from bootstrap coat. So I will comment it out. And first of all, I'm going to create development, which actually will be a container. Inside that developments, I'm going to create several flex items. Let's assign to some classes the 1st 1 item for common styling and than the 2nd 1 for individual styles. Let's duplicate it for four times and change class names and content properly right here. Item to and be item three. See then four and five and write your eat. Okay, so you see that he would have just only the letters. So let's go ahead and give some stuffs for container and for its items as well. I'm going to open style, tucks inside, had elements, and I will use internal see assess. I'm doing that just for demonstration proposes. But in general it's not the best practice, you know. So let's select container, then right margin top as 50 pixels also set, putting on top and bottom 20 pixels on left and right to zero and also change the background color I'm going to use year Carl. So here we have our container. And now let's go ahead and select items with common class name item because I need the same styles for H flex item. So let's set patting thought to be excels then margin 10 pixels also change the background color. Let's use your 777 Also, I'm going to center the text so right text align center, then change phone size right here are 30 pixels and also make the text color as light. Okay, so everything is ready. And as you remember, the first thing that we have to do is to set display property for container as flex. Let's save it on. Here we go. You see that items are placed in a rope just using a line of code. We got kind of nice results. So the items act like in line elements because as we set they're placed in a rope, but the container itself behaves like block level element. It means that it takes up full with available on the page. Besides the flex value we can use in line Flex in This guy's container behaves like in line element, so it means that it takes up the weight as much as it's required to display its content. All right, actually, we're going to use display flex, so let's get back it and move on to the next property, which is flex direction. Actually, this property sets direction off items along the main access and what the main access is. I hope you remember from the previous lecture. The flex items are followed to the direction off main access that's assigned to this property value as row. You see that nothing is changed because row is a default value. We are able to reverse the items in a row, and for that we just need to assign to its value as role reverse. You see that items are reversed. So what has happened to you? As we know as I default, main access goes to left to right. But when we assigned to flex direction property, the value as ro reverse. Then it's changed direction and goes from right to left, and the items are followed to eat accordingly. It seems that first item a its place as the last one, but actually it's not correct. It still maintains its position as the 1st 1 in a row. All right, the next value that we can assign to flex direction. Property is column, which actually places items in a column. So in this guy's domain, access and cross access changed their positions. May nexus goes from top to bottom and cross access from left to right. So in case of column, the items take up the full with that is available inside the container. If we make the browser wider than with flex, items will be increased because they take up the full with available in the same way we can use column reverse and I believe that you all were the guest. What would happen so again, main access changed its direction. It goes from bottom to top, and the items are followed to its new direction. All right, I'm going to set back the value of flux direction, property as row. So if I make the browser smaller, then the size of container will be decreased. According to the View port at the bottom of the page, Scroll bar will appear, and actually it doesn't look nice. And also weight will be the problem when we want to make our webpage responsive. It happens because the default value off flex wrapped property is set as no rep. So if we write Flex rep and then assigned to devalue as no rep, nothing will be changed. But if we use rap instead of no Rupp, then the items will be erupt. So you see that we do not have scrolled or below anymore. So during making brother smaller when the container doesn't have enough space, the items were going to be wrapped. Instead of writing those two properties we can use short in the way, we just need to write a new property flex flow and then, as a first value, we can write the value of flex direction row and then the value off flex rap wrap. So if I comments those lights out, then still we will have the same result. All right, let's remove those comments on also assigned to Flex Rep. Property. No rep. Then comments flex flow out. Okay, let's go ahead and talk about the next property off flex container, which is justified. Content first. That I want to mention is that this property works along the main access. You see that items are placed from left to right, and actually it's the default position. So if I assigned to justify contents property value as flex start, then the items will maintain their position. But if we change flex, start into center, then the items will be placed in the center of container. Also, we have flex and which actually allows us to place items on the right side off the container. All right, the nest value for justify content property that I want to describe is space between so in case of space between value, first and last items are placed at the edges off the container and then rest off. This pace is separated equally between items we have here little spaces at the edges of the container, and that's because of the margin that was set initially for flex items. So if we comment this out and then those little spaces will be remote next value, which is space around, works in the similar way as space between. But there is one difference first, and the last items are not placed at the address of the container. Each of the items takes up the same amount of space on the left and right sides. So, for example, between A and B items, we have space for a and also space for P. All right, the last value for justify content properties space evenly. So you see that this space from edge of the container to item is equal to space between items. That's the way how spaced evenly works. All right. So we have seen how justify constant property works in case of a role, and now it's interesting to see what happens in case of column. So you see that there is no space between the items, and the reason is that the container increases its height as much as it's required for displaying its content. So because of that, it doesn't matter if you write your instead off space, evenly space around or any other value. Okay, in order to see difference between those values, let's set height off the container as 700 pixels. And also I'm going to set with for the item says, for example, 70 peaks us. And the last thing that I want to do is to get reductase parting from here. So what I want to tell you is that when we change flex direction from rolling to column, the van to Main Axis changed his direction, and now it goes from top to bottom. Because of that, justify content works along the main axis. We have the same effect, which was in case of role. But now it happens vertically, the proper result we will get. If we use your space between or space evenly and also the rest of the values, you could test them on your own again. Remember, that's justify content positions. Items along the main access. All right, let's change back column into row So you see that items are stretched from top to bottom, and that's because the default value off next property that I want to represent I mean a line items is set as stretch, so you see that nothing has changed. The items are still stretched from top to bottom, so a line items works almost in the same way as justify contents. The only difference is that it actually works along the cross access. And because of that, in case of road, cross access goes from top to bottom. The items that stretched from top to bottom as well. So s beset. It's the default value. Let's change it and use other values like flex start. So using flex, start the items of place at the top edge of the container. And if we want to center them, then we can use a line items center and in order to place them at the bottom of the container than for that we have to use flex and value and the last value for a long items property that I want to show is baseline. So if we use it than the items will be placed in the exact same way as its Boston case of flex start values. But in general, they didn't work in the exact same way. In order to see the difference between them, I'm going to increase phone size off, for example, first item, right, 70 pixels. So if we take a look carefully on the items, you will notice that the bottom edge off each flex item contents, which in this case are letters is placed along the imaginary line. So if we change baseline into flex start, then all of these items will be allied at the top edge off the container. So is the main difference between baseline and flex start? All right, let's calm it. This line out This stuff was about flex direction row so it would change it to column, then domain access and the cross access will change their directions and a line item property will work vertically. I didn't waste time on testing again each of the values because I'm sure you guessed how they actually work. Okay, The last property that I want to demonstrate in this lecture and also the last one for container is aligned content. Let's change flex wrapped value from no rap into rap. Also make Web browser or smaller Using a lying content property, we can manage positioning off wrapped items as a default value off align content property set as stretch. So if we write your threat but then nothing will be changed. Besides that, we can use flex start than center. Also, we can use flex and space between space around and space evenly. All right, that's all about flex container properties and values. So I recommend to test and practice more on your own because it's kind of confusing stuff, but at the same time, A really great to to align elements easily on the Web page. Okay, that's it. See you in the next video. 13. CSS Flexbox - Flex Item Properties: in previous lecture we have talked about and describe properties and values of flex container. And now I'm going to show you how to deal with flex items. So the first property there I'm going to show you is order it. Actually, Ellos is to change ordering off the X items without manipulating on html code. So here we have code from previous lecture. Let's align items in the center also remove ally in common property as I default. H flex item has the value off order property as zero. So if we assign to item one order as zero, then it won't change its position. But if we right here, one instead of zero, then first item will be placed at the end off the row as the last one. It happened because the item a got the higher order value than the other items. Now I'm going to select items E, which has class name item five and then assigned to it order with the value as minus one. So if I save it, then item he will be placed at the beginning off the role as the first item. And the reason is that now it has got the lowest order value. So as a conclusion, we can say that item with lower order value always stands in front, off the other items, and in the same way items with higher order values stand back to other items. Also, as I know, just remember that ordering off the flex items depends on flex directions. All right, The next property regarding flex items is a lying self. It actually works in the exact same way as a line items property. But as its name indicates, it's useful this pacified items as a default alliance stuff property is set as auto. It means that it's related to its parent flags container properties. But if we want to stand out one specified item, for example, if we want to align item E at the top edge off the container, then we can use a line self property with a value flex start so you can see that I don't five is place at the top edge of the container. Also, we can use flex and which actually will place the item at the bottom after container. Besides flex stored in flex and we are able to use center baseline and stretch. Let's test this last one right stretch. Then you will see that the item is thrashed from top to bottom inside the container. Okay, let's go ahead and talk about next property, which is flex Grope it actually ellos items to occupy available free space inside container and also this property specifies how faster flex item will grow relative to the rest of the items. I know that it sounds a bit complicated, so let's see what I mean. I'm going to comment this line out also, Let's get back margin. So if we make brother wider, then you will see that the spaces between items is growing, but the items themselves remain there with It happens because flex grow property by default is sad as zero, so it will write to your zero. Then the same will happen. But if we change zero into one, then the item e will start growing when we make browser wider, and it will occupy as much free space as it's available. All right, let's assign the same property to item one and set the value as one. So you can notice at a glance that the first and last items are changing their sizes on their growing as much as it's possible. But if we change the value for first item and the right for example five, then you will see that both items are growing. But if you look closely at them, you will notice that item A is growing much faster than item, eat and actually weaken. Say precisely that. It's growing five times faster than I to me. So we can conclude that by default of the items have flex girl property said as zero, which means that they do not grow at all. But if we use as value at least one, then they will start growing and occupy as much space as it's available. All right, let's move on to the next property, which is flex shrink. It actually is the opposite property off flex grow. I mean it ellos items to shrink as much as it's possible. At first I'm going to comment flex girl property out, and also we need to set flex rap as no rep because, as we know, Wrapped doesn't ello items to shrink. Okay, In addition, I'm going to set with four Item one and Item five as 200 pixels, and I'm doing that in notice. It better the effect. Our flags shrink property. So if we make browser smaller, then the items will start shrinking. And it happens because by default, flex shrink property is set as one. So if we assigned to flex shrink property value as one, then the same will happen in case off zero item won't shrink. Besides those values, we can manage how faster we want to shrink the items. So if we right here, for example, five, then the item e will shrink five times faster than all the items. So actually flex, grow and flex. Shrink properties work in similar body opposite waste. All right, The next property regarding flex items is flex basis. Let's comment. Flex shrink out flux basis actually specifies the actual length off the item in length we may have either with or height and in depends on flax direction off the container by default flex basis property set as auto. So you see that nothing is changed. Item has same with and height. No, let's assign to it as I value. That's 100 pixels. We're doing that for Item five, which is E. So let's focus on that item before I save, so you can see that the width off item east changed and it became 100 pixels. If we inspect the page and check the wits off Item five, that will get 160 pixels. And that's because off the patting, which is set initially for all items as 30 pixels. So if we get rid of it, then the weight off Item five will become 100 pixels. As you see for I to five with is defined as 200 pixels. But when we use within flex bases properties simultaneously, then the value off with is over. Written by flex basis fell you. It seems that Flex Spaces specifies wits off the item, but actually it's not quite correct. It works depending on main access. So if we change the flex direction off container and make it column, then flex basis property will specify height off the item, and if we check it, you will see that height is 100 pixels. Because of that, For now, flex spaces property indicates the height off the element. Then it has got back. It's with which is 200 pixels. Makes sense, all right, the last property that I'm going to discuss, and this video is flex. Actually, it's the shortened way, which allows us to use flex, grow, flex, shrink and flex bases properties simultaneously. That's common this line out and also make flex direction as a row again, as I first value, we need to indicate flex grow, which, as you remember by default, is set a zero. Then we need to ride the value off flex shrink property and by default it's one, and the 3rd 1 is flex basis on its. The first value is auto. As they see It's really short way to use those three properties simultaneously, all right, it was all about for exciting properties. Also, it's the last video regarding CSS Flex books. I hope you enjoyed it. Sell that move on 14. Bootstrap Grid System - Part 1: in previous lectures will help Already introduced to CSS Flex books, which is a real, actively new and modern technique, it helps us to align elements on the page in really easy and flexible. Wait Butcher for also provides the way off aligning elements on the page using some classes . And it's called Trump Great System, which is really popular nowadays and also in general, is the most distant on greatest part of patrol. Many developers whose boat trip especially for the great system. The reason why we have discussed CSS Flax books improves videos is that behind the scenes of puts a good system stance. CSS Flax Books. One of the main differences between Bootstrap three and boots of four versions is that butcher, for unlike bootstrap three, uses flax books instead of floats. All right, so what is great system boots? A good system closest to divide page into 12 columns. But actually, I want to mention that it's not mandatory to use old fell columns individually. If you want to create wider column, then you can group them. For example, you can create three with equal comes, or maybe two with equal columns. Also, we are able to use different combinations of comes. For example, we can group four columns and then, on the other hand, weaken group the rest off eight columns. Actually, it's not mandatory this some of columns to be equal to 12. The number of columns can be less than 12. All right, let's go to V is code and write some examples. The first thing that we have to do is to create container container class, gives us ability to center and place horizontally the content off weapons. So that's open developments with class name container. Also, I'm going to set background color as secondary and then make text light as the content. I'm going to write you. Hello so you can see that Davis place in the center. On the left and right sides, we have little spaces. Those spaces are my INTEND. Until this screen size becomes extra smoke container classes used for responsive with. But if you want to make with 100 person that cross all the important different device sizes that then we can use container Floyd so you can see that spaces out removed and now contain their text up full with available on the page. All right. That's the main difference between container and container fluid. You can choose any off them, depending on how your website you want to look. I'm going to use container, so let's get it back. Actually, columns air wrapped with rose. So after container, we need to create role. Let's insert your hello inside row so we have container row on the next. We need columns actually, in great system. Content should be placed within columns, and they must be immediate Children off rose. So let's create column So I'm going to billet. Hello, then create development with class name Call. Also sat background color as primary and then write your first column. So in this case, we have only one column, and it automatically takes up the full with off road. If we add another column, let's make the background this success and also right here a second column. Then each of them will get half a ways off parent element equally. And then if we create another column, let's say, with background colorist danger and also right, you're 1/3 column. Then we will have three equal columns. The with off their parent element will be distributed equally to all those three columns, and in this case, each come will take up 1/3 of entire with off Road. If we change screen size, then you will see that we have the same results on all responsive break points. Okay, we can grope columns in different ways. I suppose, that we want to make second column wider than others. Then we can indicate the size of it as column six. It means that second column will take up the half of weight off the entire road and the rest off the with. I mean second half will be distributed to first and third columns, and each of them will take up 1/4 off entire weight off parent element. We will get absolutely the same result if we assigned to first and third developments class as call them Dash three. So if we add up the numbers of columns, we will get 12. You may wonder what happens if they some of column succeeds. 12. Let's see, I'm going to assign to for Steve Element class as column trash. Seven. So you see that role was broken because this some of columns exceeds 12 first development to cup 7 12 off entire with a pro. There was not enough space for a second column, and that's why they're placed on the new line. If we change the positions off second and third developments than the third column will be placed next to First Column. That's because this some off first and third if columns is 10 which is less than 12. And that's the reason why those two columns are placed on one line for a second column. Again, Parral Element doesn't have enough space, and that's why it's still placed on the next line. All right, let's get back previous code. So if we make browser smaller, then you will see that those columns the note look good for small devices. And that's the moment when we want to use responsive break points. Let's say we want to stack those columns on each other when the screen size becomes extra small. For that, we need to use s and break point for all columns. So if we make again browser extra, smaller and rich to extract small screen size, then the developments will be stacked on each other, and now we agreed that it looks more appropriate and nicer for extra small devices in the same way we can get the same results for small devices. For that, we just need to change. S I am into M. D. So if we make browser smother, then on a small screen size, the elements will be stacked on each other. All right. We can use break points in combination and money polite and columns in different ways. Let's assume that we want to make those elements equal when the screen size becomes large and up. For that, we can add another class to all of those columns. Right column Desh LG Dash for So here we see that second column is wider than the rest of the comes, but it will make browser larger. I mean, when the screen size becomes greater than or equal to 9 90 pixels than with off, all three columns will become equal. All right, For now, it's enough. Let's move on to the next lecture in which I'm going to show you some more examples on use cases off Boutros group system. So let's go ahead 15. Bootstrap Grid System - Part 2: All right, let's go ahead and talk about other classes regarding boots or creates. In the beginning of this lecture, I will show you how to align columns vertically and horizontally, and the classes that I'm going to use actually are very similar to flax books properties that we have seen in previous lectures. So before I use them, I'm going to assign height to the row and I will do to using in line CSS right style attribute, then height and sad it as 600 pixels. So you see that the entire row is shrunk on 600 pieces. Actually, it happened because by default the columns take up the full available space. But if we assigned to roll airline items, start close, then of the role will be ended up at the top off the container. If we want to center the entire role vertically, then we have to assign to it class as a line item center. So you see that items are placed perfectly in the centre off the apparent container element . And of course, if you want to place items at the bottom edge off the container, then you can use a line items and class. So a line items Classes used to align all the items in a role simultaneously but were able to manage aligning individual columns using a line self class. So suppose that we want to place first column at the top edge. Then we need to use a line self start. You can see that only the first item is placed at the top off the books for centering individual item. We can use Ally himself center, and besides those classes, we can use a line self and which actually allows us to place individual item at the bottom off. The parent eloped. All right, that's all about vertical alignments. Let's go ahead and talk about how to align items horizontally. For that, I'm going to change the number of columns for second item. Let's right three instead of six and also place first and third columns in the center. So when we want to align items horizontally, then we need to use justify content class. In this case, items are placed on the left side of the box, so if we assigned to roll, justify content, start then items will maintain their position on the left side of the box. But if you want to send to them horizontally, then we need to use, justify content, center and obviously justify content and will place items on the right side of the box. All right, as you remember from CSS Flex, most properties, besides those classes we can use, justify content between which, actually X like space between value and also we have justified content around. All right, so that's the way how we can align items horizontally. Let's go ahead and talk about ordering off columns. We can change ordering of columns using Boutros classes. It's like CSS or the property. But actually, in Bootstrap, we have 12 order classes from Order one to order 12. Besides that, we have also order first on order last classes. So in order to place First column at the end off the role than we need to assign to it, Class order 12. And if we want to place Third column as a 1st 1 we can assign to it class as order one, and at the same time we have to assign to second item class order to as we said, besides those classes, we have order first and order last classes. And actually, it's interesting what happens if we compare or their one and or their first classes. So let's assigned to First column order one and for second item leads right or the first. So you see that second column displaced as the first item in the role. And it happens because behind the scenes off order first class stance CSS or the property with value minus one. Also, I'm going to compare or order last and order 12 classes for better demonstration that society third column or their 12 and to the second column. I'm going to assign order lust. So you see that second column is placed at the last item and happens because from CSS it has property order with value 13 which actually is higher than order 12. And that's why it's place that the last item in the rope with other classes were able to use also responsive break points. Okay, before we finish this lecture, I'm going to talk about what nested columns are in boost drop at first. Let's comment third development out and then delete order classes for rest of the Collins. Also for second column. I'm going to change Colin Klass from three into nine. Let's related confident. So, as I said, we're able to nest New row inside that column. So let's open development with class Name row and then inside the role, we are able to create several columns that's right. Column six with background warning as the content rights, your nested column one that duplicate it on change, background as info and also right here. And Nestle Column, too. So, as you can see, the with off nested role is defined as with off its parent element, which in this case is second column. And then it's with is distributed between those two newly created columns. They have column six classes, so they take up half with off the entire column. So that's the way how on acid columns actually work, all right, it was all about foot drop, great system. You can go to put up documentation, and in layout section, you can find, greet and read the information about all the classes regarding greats. Input strip. So actually, we have finished talking about post op essentials. Throughout those sections, we have learned about topography, utilities and layout. There are still lots of classes and topics to discuss and learn, like, for example, compliments. So in order to make learning process much more interesting for you, we're going to learn those topics throughout building the projects, and we'll start it right from the next lecture. I believe that you can't wait to start the most interesting and fun part of the course, which is building some real world projects using bootstrap. So let's want right now. 16. Pure Bootstrap Website Project Overview and Setup: it's time to start building over our first project, which is called Pure Bootstrap website. As the name of project suggests, this will be a little nice looking website builds using pure boat trip. We're not going to use the assess of JavaScript or any other technology except Booth. Trip for and the main purpose of building this project is to get some basic knowledge and practice in Bush. Let's take a look on finished version and go through each section. We will start our project by building, not bar, which will consist off now Bar Brent logo and with several navigation items. One of them uses also drop down menu and on the right side of the number we have search for . So in this section you're going to be a learning counter create number, which is a part off boots of components. Next, we have nicely designed banner, which consists of having and buttons, and then this section is followed by skill section, in which we have three columns and they concedes the phone awesome icons, some content and batons. After that, we have Project section. In this section, you will learn about how to deal with images in boo trip we have here for projects which are aligned nicely and in kind of different way. Project Section will be followed by Team Section in This party will learn about how to use cards in booster up carts is a part of butcher components. We have here three cards with images with some content and social media. I kits. Next, It's coming Progress section, in which you will learn how to deal with progress bars in bootstrap, we have here for progress bars with different boots up colors. After building Progress section, we will move on to Contact Section, in which we're going to be using some basic form classes from Boo Trip. This section concedes off Haring's some inputs. Also, he would have text area and bottom, which is looking in kind of different weight. The last part of our project will be footer, which will include some headings, social media icons and paragraph for copyright. All right, this would be our first project. If we make browser smaller, you will notice that each off this section is responsive on all the responsive break points . So throughout the projects, you will learn about how to make them responsible. Okay, Now let's go ahead and get ready to start building this project On desktop, I have created new folder called Pure Bootstrap Website, in which I have another folder for images, and also I have created HTML file, which will be the only file that we're going to use. And for now, it's completely empty. I hope that to have already downloaded the source code for entire course in the beginning of the course in which you can find those started files. But if you didn't, then you can go back in the first section of the course and don't look that All right, that's open obvious coat on and drop this folder in it. So go to God. Put up website, click on get started on grab started, implied and then insert it in index dot html file. I'm going to dilate thes heading elements because we don't need it and also change the title right here. Pure boots. Rob website. Okay, let's go back to Bootstrap website in documentation you confined here. Components. Actually, those components make bootstrap really powerful. Some of them are really popular and useful, like buttons, cards, Karos, ALS forms, nappers and many others in previous sections. We haven't referred specifically to those things because I think would be better to introduce and use them with projects. We're going to use those components in different ways in different projects so you can feel free and use thes documentation throughout building the projects. All right, besides that, I'm going to use front awesome icons. So let's go to Foreign Awesome website, then click on Get Started and Dan grab this link. Also, I want to recommend you to go to how to use section on go through these documentation. Here. You can find some rules and insights about how to works and how to use it. For example, here are classes that we're going to use throughout projects, which allow you to change the sizes, off phone or some icons. All right, let's go back to code editor and insert link. As for the funds, I'm not going to use any other phone like, for example, fronts from Google phones in this project. But we use default brutes reformed, which is Helvetica. Okay, let's around this filing browser using life preview moat. As you see entitled BAR, we have blank Aiken. So let's Change eight and use here Boots, Trip Lago in images we have here title image. And in order to insert it entitle Bar, we have to open link elements and then write you some attributes, like relationship with the Value Title Aiken. Then place your type, attribute and right image slash PNG and then in age reference attributes indicate the directory off the image right images slash title image dot p N J. So you see here that we have booster Plawgo entitled Bar. All right, that's it. Finally, we're ready to go, so that's got started. 17. Pure Bootstrap Website Navigation: Okay, Lets start building our first project, which, as we already said, will be created using pure boots. Drop. The first part that we're going to be building is not bar. First of all, I'm going to create mark up and dance that by step will add to actually elements proper boot shop class. So it's open enough elements and inside it I'm going to create a new order, at least with several list items. So it's open. L I tuck than inside list item. Create a link element and as a content, insert your first navigation item, which will be hope. As we said, we need several least items. So let's duplicate this line and then change the content right years kills than projects team and the last one right year contract. So here we have our least, but for now, just market without any stop. The first class that we need to assign to enough element is not far. This class makes entire Melber flexible because behind the scenes I mean from CSS, it has display property. Set us flex the next class that I'm going to use this for collapsing the navigation on specified break point in other words this class makes now Bart Responsive s unless screen size rich to specified break point. So I'm talking about class now, Burt expand. And in this case, we're going to make responsive navigation as unless screen size becomes medium, so as a break point when it indicates empty. At this point, we do not have any changes here because we need to add some more classes to rest of the elements. The next that we're going to modify is a noted least, and it's items for you element. We need to use class not far enough, so if I save it, you will see that list is unstuck. That's because from CSS, it has property list style not on. You can see that items are placed in a row. As for the list, items will have to assign to them close enough item. Let's do it for all leased items and then in the same way for each link element, which is placed inside at least items we need to assign class as not link. So save it and now we're able to see how never expand actually works. It will make browser smaller. The items will be placed in the column and happens. Assume that screen size becomes medium and smaller. Okay would know of element. We also use class now, but light. Sometimes it's name is a bit confusing because it actually makes the text darker. So if I save it, then items will become great in order to insert on number, logo or company name or some brand name in Bootstrap, we have special class called novel Brent. Generally, it's placed outside off your element, and this class can be applied to most of the elements. But the best practice is to use it with Angkor talk. So that's right to your number, Brent. And as a logo, I'm going to insert your phone. Awesome. Aiken. That's open. I elements and insert here. Class Name. F A S F a dash child. Let's use here some more classes. I'm going to change the color of I come and make its yellow. So for that, we need to use class tax warning. And in order to change the size of funders, Michael, we can use class which, as you remember, belongs to fund awesome and not put up. So if you want to increase the size of icon. Twice we need to write F A dash to X. All right, the most part of our navigation is done, and now I'm going to style it. First of all, I'm going to change the background off number. And for that I'm going to use Class PG Dark. And also let's make navigation items light Using text light class. You have to note that we need to assign it to link elements because from ul and Ally elements, it won't work. So let's rise for all wing elements. COLAs, text light. Also, I'm going to make text upper case that phone waits, bolt and also make little putting on left and right for that. Let's use P X three. Now it looks much better. All right with number 30 may frequently meet drop down menus, so I'm going to act. You drop down menu to projects item for that, we need to use some additional classes. But first of all, I'm going to add some more items for projects right after link element. Let's create the in which I'm going to insert several link elements, so let's right here as the foresight in Project one. Let's duplicated three times on change project numbers properly, So the market for drop down menu is ready. But as you see, it looks really ugly and actually doesn't work. So the first thing that we have to do is to assign to least element class name throughout down It actually wraps the entire drop down menu and assigns to L I element position relative the next class that I'm going to use for development ease drop down menu, which actually will hide the menu because from CSS, it has display properties set as none and ourselves position absolute. And for each menu item, we need to use class drop down item. So actually, drop down menu is ready on. In order to work it, we need to use special attribute called data toggle, which will have the value dropped down. Actually, behind the scenes off these attributes works JavaScript. So if we click on projects than the menu will be appeared, all right. So the only thing that we have to do regarding drop down menu is to display a little arrow icon. And for that, we need to use class drop down Tuggle. So you see that on the right side of projects appear Little Arrow. It looks as an icon, but actually it's created using CSS border properties. Okay, that's for navigation item. If you're done now, it's time to add search form. Element on the nap are for that. After you element, we need to open form in this guy's. We don't need to thes action attributes so that's deleted and inside, for I'm going to create developments in which we have to place input with type text and also let's at your place holder with text search, then below. We need another developments in which we will insert bottom with type bottom and then inside button element. I'm going to insert fun. Awesome search icon for that. Let's open I element with class name at a dash search. So the first class that I'm going to assign to form element ease for in line using this class form element gets on display property as flex in order to place input in Barton's side by side, I mean to group those elements Winnetou assigned to developments class input group. So you see that now they're placed side by side. But if you take a closer look on them, you will notice that we have a slight gap between those two elements. In order to attach Button two inputs, we need to use another class called Input Group A pent and it should be assigned to second development. So now you see that the button is attached input because from CSS, this class has property margin left with value minus one pixel. All right, actually, search form is ready and in order to make it I bit nicer. Let's use for input element class, form, control and in the same way, in order to make button looking a bit better, write your class Bt and also for search. Aiken. I'm going to use class text muted. All right now, we agreed that those elements look better regarding forms and buttons people talk in detest later. For now, just use those classes. So actually almost everything is ready. But when we make browser smaller that in now Berries broken on, it looks really ugly. So after medium screen, we need to hide navigation and search form and then display them when we click on menu, I can. So first of all, we need to wrap the least and farm with developments this development will take several classes and 1st 1 A's collapse which from CSS Heights in your content, using display none property. So if we save it, Xanthi content will be heated and actually it's hidden on all break points. In order to display the content back, we need to use another class called Not Barca last so you can see that the navigation is appeared again. This class is connected to now bar expand class with proper break point. In this case, we have now bar expand empty. Therefore the content will be heating SMS screen size becomes medium or smaller so if we make problems or smaller that the navigation will be heating. But if we change MD into s and then navigation will be heating SNS screen size becomes less than 576 pixels. So remember this relationship between collapse now bar collapse and expand classes. All right, before we move onto the next thing, let's at year one more class to align navigation items and form better. Let's use justify content between All right, so on small screen sizes navigation is hidden, but we need to display back and for managing it. We need to create button, which then will Billy Tegler. So about this development, I'm going to create button, which will have type as bottom. Then inside button element. We need to insert span elements, which should have class as nuff bar toddler Aiken. So you see that we have many Aiken. Let's make it a bit nicer for that. I'm going to assign to bottom element class number Tumbler. As you see, our button became darker. And because of that, the colors off button and now Bora similar. Let's changes background color and make it light for that. I'm going to use Biggie Light close. For now. This bottom doesn't have any functionality. And in order to make it working, we need several attributes. 1st 1 is a day to Tuggle, which should have the value as collapse, and this second attribute that we need to uses data target. This attribute is used to connect button in collapsible conference, and as a value we should assign to it. I d Let's say enough and then two developments. We need to add idea tribute with the same value. Not so remember that the values off day targets and idea attributes should be always matched. Okay, So finally we're done. If we click on him and you, I come that it will work. All right. As you see here, form Element is not placed nicely after navigation items. Let's fix that. I'm going to assign to four moments margin. Let three. Now you see that it's placed better. All right, that's it. Now bar is ready. It works perfectly on responsive break points and also on any other screen size. So in this election, we have learned how to create now bar using bootstrap. Not so how to make its responsive. Let's move on. 18. Pure Bootstrap Website Banner: Okay, let's go ahead and start building next part of our project, which is going to be a simple banner with headings and two buttons. Before we start writing the code, I'm going to make your some Commons. That's right, your banner. Then make another comment. And right here and off banner also, that's to the same for the number right here. Number and the time to the and right and off number. Right? So first of all, I'm going to create section elements, which will be a wrapper off banner, as you know, section Element. He's html five semantic elements like not element inside section. We will have several developments. 1st 1 will be container, but in this case, I'm going to make it container fluid in order to use full available with the next one will be row. And for that development, I'm going to use in line style because for banner, we need somehow to define the height. So let's right here style, attribute then height property with the Value 100 VH, and also make the background of road as info. All right, so s beset banner will contain some headings and buttons. And for that I'm going to create another developments which will include those elements, and this development will have class column S M so so inside that development. Let's create H one heading, then opens pan elements and right here pure bootstrap, then open another span elements on right website. We use this pan elements because we're going to create different styles for those words. After that, I'm going to create another heading. In this case, I will use age to heading element with some dummy text. And the last thing the regarding markup, is to create two buttons which actually will be linked elements as a content right here, press here and then duplicate actually those air links. But then, with some booster classes, we will modify them as Parton's All right, so the market is done, and now let's go ahead and use some booster classes. The first thing that I'm going to do is to center the content vertically and horizontally. For that, let's use classes that you're all of the family or with so assigned to row, justify Content Center, which will center the elements horizontally and thank you's another class Align items center in order to center elements vertically and for perfect centering. Gwynedd to use text center with Call him. All right, let's go ahead and style forest heading elements I'm going to assign to H one class display to then make the text capitalized. Right? Text capitalize. As for the first spun element, which includes words pure bootstrap, let's make it text yellow. So for that I'm going to use text warning, close and for next spawn elements. I'm going to make it white and a bit bolder. So let's use text white and phone. Wait, Bolt. All right, so the first heading is ready. It looks nice. Let's move on to the next heading element and style it as I default. It's front weight is Boulder, so let's make it lighter. For that. I will leave class phone way too light that make text, it'll leak. Let's use class phone eight Alec and also changed the color of tax and make it light. All right, so the headings already and it's time to move on and start styling. The buttons buttons are part off bootstrap components, and actually you can create them using button elements or link or input. In this case, we use a link elements and for default styling, we have to use class BTM using BT and class. You see that we don't have underlying on hover and also tax color is changing smoke. If we click on button, you'll notice some border effect. Okay, let's assign same class to second golden key elements. And the next thing that I'm going to do is to change background colors for the first bottom . I will make it yellow, and for doing that, we need to assign to it class Bt and warning. Instead of warning, you can use other boots colors like primary danger, success and so on. Besides that, you're able to use Bt an outline class using this class button has transparent background but hover. It's changed its background color properly in disguise. We have warning and on hover button becomes yellow. All right, let's use standard button. So let's delete off line and for second button. Let's make background as danger. Both drop ellos us too many polite on size of buttons using Bt en large or L g and B TN small classes. So you see that 1st 1 became larger, real actively to default button size, and so the 2nd 1 is smaller. In this case, we're going to use DTN large for both off them. All right, in order to look those, but it's a bit nicer. Let's use some putting on left and right. Right PX for and also used margin right? Em three. So actually the banner is ready. But there is one thing to note. When we scrolled the page down, the navigation is hiding. Actually, we don't need it. I want to make it fixed. And for that we can use class fixed top and a sign eight to enough elements in order to see better how it works. Let's at below some beer talks. So when we scroll down the page than the number will be maintained at the top edge off the page. All right, so the banner section is done. It looks nice. Also, it's responsive on all break points, and it's time to move on to the next section. 19. Pure Bootstrap Website Skills: all right. Once we're done with Banner section, it's time to move on to the next part of the project and start building skills section. This section will consist of title on three columns with some content. First of all again, make your comments right skills and then create another comment right and off skills and then open section element. As a background of the section, I'm going to use BG Light and also make putting on all sites right. P five Inside Section Element. We will have container fluid, which will wrap all the content of the section and for title. I'm going to use another development. But before that, let's make here again comment and right title and then and title. So let's create developments, which actually will be rope and inside the throw. Let's insert and other developments, which will be column on will include heading and paragraphs for title. After that. Inside column That's insert heading H one element right here. Skills. After having element, I'm going to insert paragraph with some dummy text so the market for title is ready. And now let's go ahead and style it. First of all, let's place taxing the center. And for that, let's assign to column text center class and also make a little space of the bottom off the title using and be class with a value of three. As for the having element, I'm going to make it yellow. So let's use class text warning and also use your display class with a value to to make the heading look better. Okay, let's move on to the paragraph and in order to stand out the text that's use class elite and also changed the color off the tax and make it secondary. So let's use class tax secondary so the title is ready. It's start, and it's looking good. Let's go ahead and start building columns. At first, I'm going to create new role. And in that development, let's insert three columns and for now, just create developments with class Name Column LG for then duplicated twice, So column LG four class means that after large criticize, each column will take up 1/3 off the entire rope. I'm going to prepare and style one column, and then I will copy and paste the content for rest of the colors. So inside First column Let's insert front. Awesome. I can open I element, which will have the class name F A s half a desktop. After that, I'm going to create heading elements. So let's open H one elements and as a content rights year development. Then we need a little paragraph with some Laura Epsom Tommy tax, and the last element to create in column is Button. I will use a gang, a link elements and then, as a contents right year, learn more. All right, so the market is created for column. Let's go ahead and make some styles for it. At first, I'm going to place tax in the center for that. Let's assigned to row text center close, then change the size off phone OSS Michael and I'm going to increase beat six times. So for that, let's use F A tache six x Also change the color of icon and make it yellow and also make some space at the bottom of the EIC amusing class and be dash three. As for Lee heading, I'm going to change its color and make it secondary. All right, so they're heading is ready. It looks better on let's go ahead and move on to paragraph, change its color and make it great. So I'm going to use tax commuted class and also create margin on top and bottom right M Y dash for okay. And the last element of style is button at first assigned to each class, Bt and and then make it outline and yellow. So right TTN dash outline dash warning. So the first column is ready. Let's copy it and paste it for the rest of the columns. We need to make some changes here. Let's change a first fun Awesome Aiken, In this case, we need to write your f a r f a added and also change the heading right design instead of development in the same way when it different from awesome, I come in third column. So let's change the class and write F A s f a dash cox and also in interior T from heading right creativity. All right. Actually, columns are prepared and they look good. The only think that organizes how they look on responsive break points. So as we have indicated, columns will break SMS screen size become smaller than large break point so it would make brother smaller, then you will see that it looks good but would be better. Who makes some changes here? Let's add to each column class name call Dash s and Dash 10 also, you know the descent of them. We need to add another class Amex alto. And we need some space off their buttons. So let's add another classic columns. Right? And be dash life now it looks perfect. All right, that's it for skill section. See you in the next video. 20. Pure Bootstrap Website Projects: So we have built skill section in previous video, and now let's move on and start building. Next part of our project, which is going to be a project section in this section, will refer to images, inputs, rope and, as usual for thing that I'm going to do is to make comments, year right projects and then and off projects. Then let's open section elements. Let's make here some padding on all four sides. Right P five inside section Element. I'm going to create development, which actually will be container fluid and will wrap the entire contents off this section. So the first thing that I want to insert Inside Container is title of the section is going to be similar as it was in case of previous skill section. So, in order to avoid typing the same that's copied from skill section and pace, it's you. And the only thing that we have to change is content of having elements. So that's right here, projects instead of skills. All right, so the title is ready and it's time to start creating projects we're going to have for projects. Therefore, we need to create four columns, but first of all we need to insert here New Row. So it's open development with class name, row. And, as we said, inside roll create four columns. Each of them will take Class Cole LG three, because on large and extra large screen sizes, I want to have four columns in one row. Let's duplicate it three times. All right, so each column will include images having and paragraph at its first insert your image element in source attributes that indicate the directory off image. We have images and images folder. Let's write the name off the image project want. So we have here image. But as you see, the with off image exceeds the wit off column, and it takes up much space than it's available. In order to fix that problem, we can use Boots our class, which is called image fluid from CSS. It has marks with property set as 100 persons and also hide as auto it missed. That image takes up the full with that is available in column. We can use other classes regarding images like rounded, which actually makes little border radius on all four sides. Also, we have rounded circle, which from CSS has border radius set as 50 persons. If we use those two classes, we have to do it with image fluid class. Because if we get rid of it, then still we will have a problem with image with it will exceed With of column. All right. Besides Image Floyd class, there is another class which actually can fix that problem, and it's called image thumbnail. So as you see, the with off image fits nicely in column. And it's because image thumbnail class from CSS has the same marks with and hide properties . And additionally, it has some other properties, like padding border and border radius. And that's why it looks in slide a different weight. All right, so I'm going to use your image thumbnail class, as we said, besides the image we need to insert here heading in a paragraph. So let's do it Open age to heading elements and as a content, let's place your project one. This element will have to close is I want to create some margin on top and bottom. So that's right. And why dash three and also make the tax yellow right text warning All right. After that, create paragraph with some text and just change the color off the text using text muted class. All right. That said, the content of column is ready and I'm going to copy it and paste for rest of the columns and just makes like changes. Start from image names, right project to then three and for and then also changed the content of headings. Right Project to Project three and project for Okay, so the images are placed nicely, but I want to align them in kind of a different way. Let's use margin top classes for 2nd 3rd and fourth calls, but with different values. For a second column. I'm going to use margin top three, then for 1/3 column, right margin top for and for lust one. I'm going to use margin top five. So now you agree that we have kind of nice effect. Alright, actually, we're almost done. The only thing to do is to make responsively section, as you see we have here for large and extra locks. Criticizes COLUMN three Forage column. But when we make broads of smaller, we need to change column three into column six. So for each off the columns I'm going to use class name, Call Dash s Dash six. So when we make browser smaller on medium and on small screen sizes we have two projects in a row and then on extra small screen size we have Onley one project. All right, so we have finished building Project section. Let's move onto the next lecture in which we're going to be building team section so let's go ahead. 21. Pure Bootstrap Website Team: Okay, so let's start building the next part of the project, which, as I already said, is going to be a team section. This section will be consist of three bootstrap cards with images and with some content. So first of all, make some comments again, right to your team and then and off team that open section element for that section. I'm going to have putting on all four sides. Five. But I wanted for all screen sizes except extra small. So for that we need to write P S m five. And for extra small screen size, I want to make parting as to As for the background of team section, I want to make it great, So use your BG secondary. All right, Inside section elements. I'm going to open developments, which will be Container Floyd. Also, we need to create title off the section on Let's Use a Gun title from previous section because it's going to be similar. So let's cover it, then paste and change the heading right team instead of projects and also change the color of paragraph and make it light. All right. As we said, we're going to have three carts and therefore we have to create new role, which will consist up three columns. So that's open developments. We want to have three columns in a row on large and extra large screen sizes. So for now, let's assign to it class. Call Dash L G. Dash four and then to placate the column twice. All right, so the columns are ready. And now let's go ahead and create cop. Generally puts of cards is a part off put trip components. Our cards will consist of images, card bodies, car titles and card subtitles. So the first thing that we have to do is to create developments and assigned to eat class card from C s acid has property display set as flex. Also, flex direction s column and position or relative. So the first thing that we're going to insert inside car is image. Let's indicate the source as images dash Pete one. So you see that it doesn't look nice on in order to fix that as you all of the guests we can use image fluid class. But when we deal with bootstrap carts, there is another class which will help us to fix that problem and it's called card image Top. You may think that this class defines the position of image, but actually behind the scenes of it we have with properties satis 100% and little top left and right Border radius is so if we take a closer look on top, left and right commerce, you will notice later Border radius instead of top. We can use bottom, which actually will make border radius on bottom left and right corners. And that's the only difference between card image top and card image bottom classes, and you can choose them depending on where you would like to place the image. In this case, I want to place it on the top of the car. So let's use your card image top class. The next that we have to do is the open and other developments, which will have class card body from C S assets controlled with several flex pop artists like Flex, grow, shrink and basis. And also it has some padding. That's why we have some space here Inside card Bali. We need to insert and other developments which actually will include title on. It will have class car title. It gives us little margin at the bottom than inside car title. I'm going to insert age three heading element and let's place your name off First team member, for example. Michael also change the color off the text and make it gray using tax muted class. All right, we're done with car title, and the next part that we have to insert here is another development with class card. Subtitle. The main difference between car title and CART subtitle classes is just in different margin values inside CART Subtitle That's place paragraph with some texts and also assigned to eat some classes like elite and text secondary. Okay, so the only thing to add to cart is social media icons. I'm going to wrap them with another developments, which will have class text, right, because we need to place social media icons on the right side of the car. And in that developments, we need to place Social media hikers for that. Let's open a link elements and insert in it i elements, which will have Class F A B F A Facebook. I'm going to increase the size of icons twice. So for that, let's use Class F A. Tash two x Then let's make space on the left and right sites using class margin X, dash to and also change the color of I come using class text primary. Let's duplicate this line twice and then change the icons and colors properly. That's right here, Tweeter and make the color as text fo and for the 31 right here, YouTube with the color danger. All right, so the first card is ready. Let's copy it and paste for rest of the columns. I'm going to change the names off team members right here, Jack and then and and then changed the names off the images. Right? Keith, too, And kid three. So everything is done. Cards look good, and that's usually before we finish. Let's organize how they look on responsive break points, so large and extra large screen sizes all of them, are placing one role. And on medium and small screen sizes, we need to break the role. So for that, for each column, let's assign class call trash as I'm dash can and for centering them right Nymex auto, And the last thing to do is to make some space between carts using margin bottom for. All right, that's it. We're finally done with Tim section. It looks nice and also is responsive on all break points. Okay, let's move on to the next section. 22. Pure Bootstrap Website Progress: the most part of our project is done. We have to build just couple of sections in order to finish it. So the next section that we're going to build in this lecture is progress. It's actually really simple to create and also thrilled comic projects. You will make different types of progress parts. They are really nice and useful tools to use. And actually, they're the part off boots of components. All right, let's go ahead and start building new section. First of all, I'm going to make some comments year, right progress and then and of progress. Then open New section. This section will have putting on all four sides so assigned to it Class P five inside section when it's contained, or to wrap content off this section and again, we need to container flute like the previous sections we should have here that title, and I'm going to grab it from Project Section. So let's copy and paste it and then change heading right progress. All right, let's go ahead and create new role. The content inside row should be placed in the center. Therefore, I'm going to use here class, justify content, center that role will consist of one column on on large and extra large screen sizes. I want it to occupy the heart off. The wit suffer. Now let's create developments with class name. Call Tash, LG, Dash six, and also make the text great using text. Secondary. Close. All right, suppose that we want to create progress bars about Web development technologies, so let's creates 1st 1 for HTML. But first, let's open age to having elements and right the content as HTML in order to build Progress Bar. First we need to create developments, which actually will be wrapper on. It will indicate the mark's value of progress. That development should have class progress. So you see here the line which actually indicates the mark's value off Progress Park in order to see better. Let's change background, color and use here BJ secondary class and also make some space at the bottom right here and beat Tash three. All right, so the rapper is ready, and now it's time to feel the bar with specified value. For that, we have to insert inside progress and other developments which class name Progress bar and in order to indicate the value we need to assign to it with using in line CSS. So it's right here. Style. Attribute where the property with and as I value right year, for example, 50% So you can see that half off the Boris fields and the color off the fields. Part is primary because by default, if you do not define background color, it's always primary. Besides that, we can add the label to Progress Bar in order to indicate the percentage of it. For that, we just need to write as a content off developments, this same value as it's defined using with property. In this case, we have 50%. So let's write your 50 persons as well. So you see that in the center of the field part, we have 50 persons. All right, so the Progress bar is ready. Let's copy, eat and paste three times and then make some changes, right. Your CSS, then as the value right 70 persons and also change the background color right, visit danger. Then write your JavaScript with the value. Let's say 90 persons and backgrounds, color warning and for less one right boots trip as a value right here, 95% and then changed it. Background color and right BG success. All right, so the progress section is almost done with couple of flies and classes. We got really nice results. The only thing to do is to make responsive it on small screen sizes. For that, we need to assign to column class called Dash s Sam Dash tan. So if we make the browser smaller than the progress bar with looking responsive, Okay, it was little and simple video regarding progress bars in Boo Trip. As I have mentioned in the beginning of the lecture, you will meet different types of progress bars in comic projects. Okay, let's move on. 23. Pure Bootstrap Website Contact: it's time to start building or next section which will be contact and will include some form elements. In this lecture, we will refer to some basic form classes in both strip, which actually is the part of post op components again as the all of the guests. At first I'm going to make some comments here, right conflicts and then end of contact, then open section element with putting on all four sites and also make the background color light gray using BGE light class inside section elements, we need container, which again will be Container Floyd. And as for the title of the section, I'm going to grab it from previous progress section. So let's copy, eat and paste and then changed. Heading right. Contact us all right after the title, we need to create a new role, which actually will wrap form elements and also in order to place content in the center. Let's assign to row class, justify conference center. In that new role, we're going to have one column which will occupy half off the wits off the entire row on large and extra large screen sizes. So let's open developments on assigned to each class. Call dash LG Dash six before we create form elements. At first I'm going to create heading and little paragraph. They will be wrapped with developments. Also, I want to place text in the center so a scientific texts into class and make the color off the content as great using tax secondary class. All right, so let's open age to heading governments and as the content right here. God question then below. Open P elements and right, stay connected. Okay, let's go ahead and start creating forms. First thing that we have to do is to create form element. I'm going to make text gray for the content of four element. So let's use your class text muted. So we're going to have three groups. They will consist of labels, inputs and for the last one we will have text area. Those groups are going to be wrapped with developments. So let's open. It's at first that developments should have class for group which in this particular case has little margin bottom from CSS. Inside Farm group. I'm going to create label which will be four name, write your name and then place your input element with type text, as you remember from previous videos in order to give some defaults, tells two separate elements. We have bootstrap class for control and also to link, he put to label. I'm going to use idea tribute with the same value as it's defined in label for a tribute. Actually, it's not the issue off booster up. It's just pure estimate thing. So if I click on label, then the EU put will be focused. All right, so the form group is ready. I'm going to duplicate it twice for 2nd 1 Let's just change name into email because we need this input for email. As for the next form group, let's deal eight year input elements, and instead of it insert here tax area, it will have class for control. Then let's assign to eat, idea tribute and as a value in its year message and then increase the height off text area using rose attributes. So you see that the size of text area is increased and the last thing to do is to change the value off for attributes on the content of label right message. You all right? So the four moments are ready at the end of them. I'm going to place Button, then assigned to eat Class B TN. I want to make this button outline and yellow. For that. We have class in bootstrap called TTN outline warning and also in order to take the button full. Available with Off Column We have another class in boot trip called BT and Block, so this class makes botanist block elements on. Also it has with Property said as 100 persons. That's why Button takes full with available. The next thing to do regarding bottom is to indicate its type right here, submit and then as a content of button right, submit question. All right, that's it. Contact section is ready, and before we finish this lecture, let's make it responsive. So on large and extra large screen sizes, it has Class Column six and on medium screen size. I want to assign to it column eight. So this right here Dash eight. And for small screen size, Let's right column Dash S M. Dash 10. So if we make brother smaller than in medium and small screen sizes, Contact section will be responsible. Okay, It's pretty much it's conflict section is done. See you in the next video in which will finish our project because we're going to create photo section Let's go ahead. 24. Pure Bootstrap Website Footer: all right. So it's the last lecture off this section because in this video we will finish our project by building food to section, which will be a simple one at first, as usually make here some comments. Right footer and then and ah, footer, then open footer elements which, like section and now is HTML five semantic element. I'm going to make background color off footer. Great. So let's use your class. Beach is secondary inside foot or elements that's insert Dave, which actually will be the container on. In this case, I'm going to use just container and not container fluid. Then inside container Open Row, in which I'm going to insert column. This class will automatically make responsibly section. It will wrap the entire content, and because of that, I want to place it in the center. I'm going to use your class text center, All right. Our footer will consist of two headings, social media icons and little paragraph. So let's start from headings. Open H one. Heading elements with the content pure would disrupt project. Let's at several classes to H one elements. At first I'm going to make its color white for that. Let's use text wide close. Then I'm going to change the front weight and make it lighter using phone wait like close. And also let's capitalize the text on use class text capitalize, and the last cluster I want to assign to it is patting. Let's make putting on all sides and right P Dash three. Okay, so therefore it's heading is ready and let's go ahead and create 2nd 1 For that, I'm going to open age three, handing elements with some alarm ipsum text. Let's change the color off the text and make it light. Also assigned to heading element class phoned Weight light. I'm going to transform text into eight. A leak. For that, let's use phones italic and then create some space at the bottom of the heading using margin Bottom Dash three class. Okay, so we have finished styling cuttings and let's go ahead and move on to social media icons. I'm going to wrap them with developments. Also, let's assigned to the development putting on top and bottom right P white ash to and now it's time to insert your phone. Awesome icons. Actually, it's going to be placed inside a link elements, so it first opened and car attack, then inside link elements. I'm going to insert I elements with class. Name F A B F A. Facebook. Let's increase the size of Aiken twice, so use your close at a dash to X. Actually, as you see these, Aiken has blue color and by default it's a color off link up. But anyway, I'm going to assign to it class for color, text, primary and the less class that I'm going to use your is margin X Dash three Because I want to create some space on left and right sides off the Ike. All right, let's duplicate this line three times and make some changes. Use different Aiken classes like Google plus also change its color right, your text danger. Then I'm going to use Tweeter with the color text info and for less one. Let's use YouTube and the color text danger. Okay, we're almost done, which is have to create the last part of our footer section, which is going to be a little paragraph for copyright text cell that's open P elements. Then create copyright sign for that. We have to write your and percent than copy with Sami coven. They're right. Copyright 2018 and the text made by code and create. All right, let's use here several classes. In order to look this paragraph better at first, change its color right here. Text light. Then create some parting on top and bottom, Right. P Y, dash four. Also, I think that we do not need your default margin so that get rid off into using class and a dash zero. Now it looks better. All right, that's it. Finally, we have finished building our first project. I think it was interesting. And you have enjoyed it. Also, I hope you've got some practice and some basic knowledge in boat trip. The key point of building this project was to use pure boot shop without any CSS or JavaScript or something else but incoming projects. We're going to combine those technologists in order to build more modern and nice looking projects. All right, that's what 25. Admin Dashboard Project Overview and Setup: Hello and welcome to our second project, which is going to be an admin dashboard you see on the screen. It's finished version. Actually. The most part of this project is built using a trip, but besides that, we will use some CSS on very little Jake Worry, as they see this project, consists of multiple sections on throughout building it. We will use lots of things from boat trip, especially from trump components on the left side. You see nice designed cyber, and it will be the first part of Knobler and besides that, on the top, we have second part of it at the top right corner. We have sign out bottom, and when we click on that, the model is appeared. It's created using pure board shop, so you will learn about how to deal with models. Next, we have carts, which represents some information for Adami. Cards are followed by tables, so you will learn how to create different types of tables and at the bottom of the tables, we have different types off pagination. The next section consists of progress, bars and tasks, so you will learn how to create kind of different type of Progress bars and in second party will be introduced to how to deal with bootstrap tool tips The next we have customer activities, which is built using Bush of Accordions. And on the right side you see the way How admit can make Quick post. And actually it's built using Busta Cup at the end. We have simple but nicely looking for her. Of course, on every brake point project is responsive on medium and smaller screen sizes. Number becomes hidden and we have Toddler Aiken. When we click on that icon, then never appears. So I think that it will be interesting for you and what's the most important? You will learn lots of things in Bush. On desktop, I have created new folder called Admin Dashboard, in which I have index dot html file and folder for images. Let's open this folder envious coat and briefly go through what we have here. As you see, we have here already started bootstrapped in flight with several cdn links. In first link, there is place an image for title bar. Then we have boots, dropsy assess cdn, which is followed by phone. Awesome JavaScript link. Also, throw this project. I'm going to use Google phone called Monserrat here. Is he dealing from Google phone website? You can visit it, choose any phone to like, then grab the link and inserted in had element. As I said, we're going to use some custom CSS styles, so that's create new file called style dot CSS and then inside had elements. Insert link right here. The name off the file style dot CSS All right Inside Body Element. We have multiple script tax for several Cdn links, as it was in Progress Project. Also, we're going to use little J. Coury. So let's create another file and college as script dot Js and then insert eat here down below. So actually, almost everything is ready before we start coding. I'm going to open style load CSS file and insert some common styles in order to use Google phone. Besides adding the link we need also indicated phone family. So let's select body elements, then phone family property and as a value right here. Monserrat sounds Sarif and also changed the background color. Okay, I hope that you have already downloaded this starter source files at the beginning off the course, but if not then let's go ahead. Download and use it. All right, that's it. We are ready to go. Sell. Let's move on. 26. Admin Dashboard Navigation Part 1: All right, let's start building first part of our project, which is going to be never. And actually, as they have all the scene, it will be kind of different one. So let's go ahead on that. First, make some comments right here. Now bar and then and off number. So the first thing that we're going to do is to open now elements with some bootstrap classes. 1st 1 is number, then number expand empty. We use your noble or expand envy because we're going to collapse. Number SNS crease size becomes less than medium. And the next class that I'm going to use here is number light, which actually helps us to display now bar Tegler Aiken. All right, his side. Enough elements. Let's create bottom, which actually is going to be a number Tegler. This button element should have type attribute as bottom and besides type attributes, we need to ask you some more attributes like data Tuggle with the value collapse. This attribute is used by JavaScript behind the scenes. And then we need another attributes called day to target. In order to indicate i d, which is going to be here as my number. All right. So if we make browser a bit smaller than on the left top corner button will be appeared. And in order to transform it into many Wycombe, you already know what we have to do. We need to insert a span element inside bottom with class number struggler Aiken. So you see that the menu icon is displayed. Actually, we need to place this icon on the right side of the page. And for that, I'm going to add to button elements class margin left alto. Okay, we need to make some space at the bottom of the Aiken. And for that, let's use your class margin bottom with the value, too, and also change background color and make it light. All right, so the toddler Aiken is ready. Let's go ahead and start creating navigation items. First of all, we need to open developments which will wrap collapsible conference so it should have classes like collapse and no bar collapse. And also I d. Attributes which always should be matched to day to target attributes off the bottom. So we need to right here the value as my number. Let's test how it works inside the div, right? hello. You see that? It's not displayed yet. But if I click on Aiken, then it will be appeared all right, so it means that it works fine. The next that we have to do is to wrap content using container. In this case, I'm going to use container fluid than inside container. Create role and inside role. We need columns, But before I create them, I would like to say that our number will be consist of two main parts. 1st 1 will be sidebar, which will be placed vertically on the left side, and the 2nd 1 will be located at the top off the pitch. So we need to create two columns on 1st 1 will be for cyber, So let's make your Commons cyber and then end off side. But after that, create developments, which will have Class Column, LG, Dash three and then create second column right for it. Comment as well. Top enough and then and off top now creates developments, which will take up the rest of the width off role. And for that it will have Class column LG Dash night. All right, so at first I'm going to build cyber. Let's assigned to first column class Cyber. Actually, it's not Boutros class. I want to use it for custom CSS styles. For that, let's go to styled with CSS file. And at first I'm going to write you comments no bar than end up. Never then select sidebar. And the first property that I'm going to use here is height. Let's assign to it value as hundreds be age. It means that the height off the cyber will be 100 person off the view port, so it will be stretched from top to bottom for all screen devices. The next I'm going to use an image as the background and sent in the U. R. L indicates the directory off image. We have folder for images, and that's the right year. Name off the image image one. Dr. J. Peck. So you see, we have immature, but it doesn't look good. We need to add some more background properties, you know, to fix that. 1st 1 will be background position with a value center, then by ground repeat, and we need to, you know, repeat and the last one right to your background size cover. So now it looks better, but in order to achieve much battery fact, let's add linear Grady into background property, which will hello us to make our image darker. In this case, I'm going to use black colors, but with different capacity. So right are to be a values 000 and the opacity 0.7 and then rgb a again black color 000 with capacity 0.9 and the left wing. Regarding sidebar. CSS style is to make a little book shadow effect. So let's write book shadow with the values five pixels. So then seven pixels, 25 pixels and the color 999 No, I think that it looks really nice, but as the sea we have here little patting on top, left and bottom, it's because off the default styles off now bar and weaken. Simply fix that. If we assign to column class fixed top, then the problem will be solved because fixed position jumps out the elements from the normal flow, and it covered the par things that we have you. So putting still exists, but it's covered by cyber at the top. Off the cyber, we need to have another Bryant, so let's open the link elements with class No Bar Brent and as a value right code and create Let's change the color off the tax to using text wide class. Yes, you know, Link is in line elements at in this case. We don't need to be in line. We need to make it block. And for that in Bruce trip, we have class display block. We're doing that because I want the element to take up full with in column. Okay, in order to center it perfectly. Let's use the following classes right margin on left and right alto and also text center. Let's medically to putting on top and bottom right p y Dash three and also create some space at the bottom of the link using marching bottom Dash four. So for now it looks nice, but I'm going to add some custom CSS For that. Let's add to eat another class, which will be used for border. Let's call it bottom border, then go to CSS file and selected right bottom border. I want to create little border at the bottom, so right you're one pixel also groove, which is a little bit different than solid. It's slightly scene and then the last one right, you color and make it light. I think that it looks bats or no. So as for the number brand, we're done. Let's go ahead and create something like acting Profile, which will include image and full name of admin. Let's open developments and inside developments. Insert image in source attributes indicate images, folder and then the name of image at me dot j Pack. Let's decrease its with using with attributes quite the value here as 50. Also add pushed up class in order to make the image round it right around it. Dash circle, so the image looks better. Let's move on and create the full name of admin. Create link elements with the close name Text White and as a full name. Let's answer here. Helen Smith. As you see, we need some space between image and a full name. Let's start using margin rights three, and also I want to add to your same type of border at the bottom. For that, let's just use for development class bottom border, which we have all or do used for number Brent as a see each year we need some space because it doesn't look good. So right for developments parting bottom as three. Okay, I think for now it's enough. We have created number Brent and also little profile for admin. As for the rest part of cyber, we will continue building it in the next video. Let's go ahead. 27. Admin Dashboard Navigation Part 2: So it's time to create navigation, which should be placed vertically on cyber. And for that we need to open a new order at least then assigned to eat class as number enough. Also, as I said, navigation items should be placed as column particularly so for that, I'm going to use here Class FLEX column. Actually, I'm going to insert here several enough items, but at first let's prepare one of them, and then I will copy and paste it for several times and make some changes. So let's open at least elements which should have class enough item inside least elements. I'm going to insert link with close name Nav Link. Each list item is going to include front, Awesome Aiken and some content. So let's open I elements with class Name F A s if a desh hole and as a content right dashboard, so you see that he would have our first item, but you agree that it's really hard to notice. So let's go ahead and add some classes to make it looking better. Let's start from front. Awesome. I come the first change its color and make it light that increase its size and make it a bit larger using class F Attash LG and also create some space between ICANN and text using margin right dash three plus All right, so the icon is looking good. Let's move on to the text at first, change its color and make it white. Then make some parting on all four sites, right p, Dash three and also use your margin bottom dash to So the text is looking good to swell. But I think that would be better if we create some space between border and item and let's do it using margin Top dash for all right. Besides bootstrap styles, I'm going to add some custom. CSS. I mean to add nice hover effect. And for that let's add to link elements another class called Sidebar Link. Then go to style dot CSS file select cyberlink than hover. So on hover effect. I'm going to change background color off each item. So rights year 444 and also make some for the radius right, five pixels. Okay, so if we hover on dashboard, then we will have nice hover effect. But in order to make it better, let's use transition property, so select once again Cyberlink with that right transition and as a value, right all and then the duration point for seconds. All right, so the first item is ready. And as we set, the nesting that we have to do is to duplicate it for eight times, then change front or some icons and contents properly. I will try to do it quickly because I don't want to make this process boring. So for second item, as a content right profile and also change for us, Michael. Right user. Then for next one, I'm going to write in books and for phone. Awesome. I can use your envelope. The next one should be sales and then shopping cart. Then we have ANALITICO And for the Eiken right chart line, the next one is going to be charts. As for the front, awesome will have here chart bar, then tables. And for Aiken, right table. The next one is settings and wrench. And for less one. Let's right documentation. And then as I come, I'm going to use your file dash out. All right, So the list is looking really nice each off the items have same style and our effect, but I want to make one of them for exactly 1st 1 to make looking in different way, like it's in case of active link. So let's delete for the first item class Cyberlink and instead of it right current. I don't use your active class because I want to avoid naming conflict with bootstrap class , which has also the same active classmate. All right, let's go to style that's uses file select current than change background color I'm going to use here f 44 336 then makes him board the radius right. Seven pixels. Also, we need to your box shadow with the values two pixels, five pixels on 10 pixels. As for the color, let's use year one. Want one? All right, so it's looking good, and the last thing that I'm going to do in this video is to make hover effect for that current link. So let's select again current than at hover and hover effect. I'm going to change background color and make it F 66 436 We need to maintain for the radius as seven pixels and also change books Shadow right two pixels that five pixels, 20 pixels and as a color. Let's use again. Want, want, want also on hover of fact, I want to move the item up. And for that I'm going to use trust for property that translate why, with a value minus one pixel. So you see that it works, But for better, in fact, let's at above transition property with the value all and with the duration 0.3 seconds. Now you agree that it's much better. All right, that's it for this video. We have finished building sidebar. Let's move on to the next lecture in which we're going to be building second part off the number. 28. Admin Dashboard Navigation Part 3: So we have finished building cyber, and now it's time to move on and create the rest part of the number, which is going to replace at the top edge off the page. As you have seen, we have created second column for that, and in this case, we're going to insert in that column nested columns. And for that we have to create New Row, which will take up the full with off that second color. So open development with class Ro. As we said, we have to insert here nested columns. We will have three off them. 1st 1 will take up 1/3 off the worth of row on mediums Queen size so creative element with class called dash and deep dish. For for second call, we need class, call Dash MD, Dash five and for the last one call and D three. All right, so the first column should include just a heading. So let's create age four heading element and as a content right year dashboard as the sea having is not visible because it's placed behind the cyber, and the reason of it is that cyber has fixed opposition. It's jumped out from the normal flow off elements and heading is under it. We can fix that problem in a very simple way. We just need to assign two main column class margin left Oto. So no, they having is visible. I'm going to make background of column as dark, using P G dash, dark class and like the sidebar we need to your position as fixed top. Also, let's make some putting on top and bottom, right p y dash to All right, so I'm going to change the color of heading. Let's make it light right text light and also transform Taxing to upper case using text uppercase class by default. Heading has margin bottom satis 0.5 ram in this case, I think, would be better if we get rid of it. So let's assigned to having class margin bottom several. All right, so the first column is ready. Let's move on to the 2nd 1 which actually should be consist of search, imprudent search button. So for that, create form elements that inside form we need to create Steve, which will grope the imagine elements so it should have class input grope then inside that do elements I'm going to insert a put elements with type text. Also for basic style. You know that input has class in boat trip called for control and then at placeholder with the value search after the April element, we need button with type bottom. Also, it should have class BTM, and I'm going to make it white Using BTM White Cluster inside button. I'm going to insert phone Awesome search icon. So let's open I elements with the following classes F. A s a dish search and also make its color red using text danger close. For now, those elements did not look nice. We will fix that using custom CSS. But before we do that, let's finish preparing Third column and then start styling. Third column will consist of three for us, Michael's and they will be represented as the least. So let's open you elements with class. No bar enough. Then inside, you'll create at least elements with class. Enough item Inside least we need to create link. It should have class no link and then we need to insert your phone or Semicon open I elements with a class name F A s at a comments. Let's change the color of the Eiken making gray using text commuters class and also increase its size. Make it a bit larger, right? F a dash lg. So we have on the right side nice looking common cycle. As we said, we need to have three icons in that column. So that's duplicate this item twice and just change the icon classes for a second. I can we need f a dash bell for 1/3 1 We need to have signed out belt, then also change its color using text danger Close. Actually, this Aiken will be used later for creating model box. And also I wanted to be placed on the right side, close to the right edge. For that, we just need to use margin left Oto plus. So now it looks nice, all right. The main part of our top enough is done. It's time to start styling it using custom CSS. But before that let's place items in the centre using a line items center class which should be assigned to the rope. So right here, a line item center. All right. In order to stall those elements, we will need some additional classes to assign to them I'm going to start from input and battle. So let's assign to input element class search input and for button right search button. Then go to styled old CSS file and select search input. The first thing that I'm going to do is to make its background transparent, the right background and the value of transparent. Let's remove border using border None, then also gets with off for the radius, right border radius zero as they see a put dozens have border. I want to add it back, but only at the bottom, which I think will be more modern looking. So let's write your border bottom two pixels solid and then the color nine night night, as they see when we focus on input, it gets its default styles, which we do not need now because it doesn't look good, so it's changed. 1000 focus. Select again. Search, input, then add focus so unfocused we need to maintain background as transparent. When we focus on inputs, its background is transparent, but we have little blue border effect. But actually I would like to know that it's not border. It's caused by books shadow property. So in order to get rid of it. We need set books, shadow as none on focus and also change the color off border bottom as rat right border bottom two pixels solve it and the color the sea 3545 So the input is almost ready. The only thing that we have to do is to make nice effect when we focus on it. For that, let's use transition property right transition with the value all and with the duration 0.4 seconds. All right, let's go ahead and style the button selected with class name, search bottom. Then the first thing that I want to do is to make it round it so right for the radius and assigned to eat value as 50 persons and also make little putting on top and bottom tam pixels and on left and right, 16 pixels. As for the color, I'm not going to change its background color, so let's live it as it is, all right. The next step that I'm going to do is to make hover effect for that select again, search bottom, then act hover on hover. I'm going to change background color and make it slightly lighter. So right background cholera and make it light and also move up the bottom a little bit using transformed property. Then translate why, with a value minus one pixel and obviously as usually for better effect, let's use transition with a value all and 0.4 seconds. All right, so we have finished styling form elements. It looks nice and also works fine. Let's go ahead and work in front of us. Michael's. We're going to create little rounded bullets for those two icons, which will have something like notification effect. At first, I'm going to go back to index that I shall file and assigned to list elements and also to link some additional classes for a list. Let's right here. I can parent and for links, right, I couldn't bullet. Let's go to startled CSS and shows least element using. I compare it close. It should have position as relative because we need to define position of bullets according to its parent. After that, let's select link with pseudo elements, which is going to be after, but I can bullet after actually after pseudo element is used to insert some content after the content of the element in this case, when it's becoming to be an empty the right content as I have to. So for parent element, we have position relative, and now we need to use here position as absolute. We need to place those elements of the top right corner off the icons. So let's define top position as seven pixels and let as 15 pixels. In order to display the bullets, we need to define height and width for them, right hide as 12 pixels and with US 12 peaks list as well. Also, background color make it f for four 336 So the contents are visible now, but their shape is like square. We need to make them as bullets, so use here for the radius and assigned to it value as 50%. All right, so that's it. Bullets already they look nice. Actually, number is almost done, and the only thing that we have to do is to make it responsive for all break points. It's looking good on a large screen size, but if we make browser smaller or extra large, you will agree that we need to make some changes. Let's start from extract lock, screen size. I think that sideburn is a little bit larger, so let's assign to it class Call X L to now It looks good, but as the sea here appeared little space. That's because for top now, but we have class called L G nine, so we need to assigned to it. Call Excel. So in order to take up the rest off the space, so on extra large and large screen sizes, everything works fine. Now let's make brother smaller and make it medium on mediums. Criticize both parts of number. Take up the full with that is available. We don't need it. So let's go ahead and fix the problem that's assigned to sidebar class. Call Andy for and for top number rights. Call empty. Eight. No, it looks nice. All right, so we're done on medium screen size. Let's make the browser smaller, so SNS Cree size becomes less than medium that the number is hidden as an Alberta Glor Aiken is appeared if we click on that icon than the content will be displayed, but he would have some issues because that both parts have positioned set as fixed up. They cover each other, and also they cover the toddler Aiken using both Strope. It's not possible to fix that problem because we cannot remove fixed top class on specified break points. But we can solve this problem in very simple way using CSS media, which allows us to define styles on specific break points Before we do that. Let's first of all, I signed to top now for class top number, then let's go to Style Nazi SS file and right media that inside parenthesis indicate marks with as 768 pixels in order to define self for small and extra small screen sizes. Then select sidebar. We need to make its position static because from Bootstrap it has fixed opposition that also assigned to eat height. Also because, as remember at the beginning, we assigned to its height as 100 pH. All right that said that select top number and change its position into static. So you see that now they work fine, Look nice, but I have noticed here that this sign out I can is placed on the right side. I want to place it right under those icons. Let's go back to index dot html file. I think it's really simple issue to fix so would be fine if you try to fix it on your own. So let's pose the video. I think a while and try to do it. All right. I'm sure you have already solved this little issue, but if not, it's not problem. I will show you the solution in a second. We just need simply to add to this class responsive break point, as I am deep. All right, So you see that now the icon is placed on the left side under other icons. Okay, that's it. Final. We have finished building now, Bar. You agreed that it looks really nice and modern. And also it's responsive on all break points. All right, that's more 29. Admin Dashboard Modal Box: all right, so have finished building number. And now it's time to move on and start creating model, which is a part off putting components. As you know, we have placed. Sign out I can at the top right corner in previous video. So I want to display the model when I click on that icon. All right, let's go ahead and start creating it. First of all, let's make a comment right model and then end of model. As you notice, we have to create model outside off the number. So let's open developments and assigned to read class model. This class has position set us fixed from CSS. The value offset index of it is higher, and also it has some default starts as beset. The model will be displayed when we click on Sign Out Aiken. So somehow we need to link this icon and model itself. For that, we need to assign to link elements some attributes like data tuggle with a value model and also day to target, which should have i d. And this i d should be matched to i d off model. So that's right here, for example. Sign out, then assigned to development idea tribute with same well, you sign out, all right, so now they are connected. And in order to prove that, let's click on Aiken and you see that something is already happening here. At this point, the model box is not visible because we don't have any content in it. So let's go ahead and inside development. Create another thief, which will have class model dialogue. It has position relative some margin and also some transition effects with fate, which we will see later the next. We have to insert the inside model dialogue another deep with class model content, which actually will wrap entire content off the box, he noted. To see what we have got for now, let's write your how about then click on Aiken and you see that little box appeared with text. And as you see, the model already has its default position now actually stand to create the contents. I'm going to use your standard model box, but you can feel free and improve it as you wish. The content will consist of. Three main parts will have had, er, body and footer, so let's create Steve with class model header from CSS model, Haider has display Property said as Flex, and it's positioned with relevant flex properties. Besides that, it has border bottom on border radius on top, left and right in order to seat that's insert Inside Model had er h four heading Element with Class Model title and with the text I want to leave. So that's click on Aiken and you see that we have here heading with the text on the right side of the header. I want to place X, which will be used for closing the model. So after having let's create Barton elements, it should have type bottom. And in order to display X, we need to write as a content one of the HTML entities. And in this case, it should be and percent times at Sammy Colin. Let's click and you see that we have button with eggs, but you agree that it doesn't look good. In order to fix that, we have to assign to the bottom Bootstrap class close. So now it looks better, but when we click on that, it actually doesn't work on. In order to give to it functionality, we have to use a tribute called data this miss, which should equal to model. So now if we click on X, then it will close the model. All right, with Heather. We're done now. Let's go ahead and create model body Open development with Class model body, which will include some texts rights, for example. Press look out to leave and then after model body, create model footer open deep with class model footer. It will include two buttons. So let's open 1st 1 right. The content as stay here. This button should have type, attribute bottom and also classes. BTM. I want to make it green. So right TTN success. And also, when I click on the button, I want to close the model. So let's use again attributes called date of this Miss with the value model that's duplicate. Change the text, right, look out and change the color. Right Danger. All right, so the model is ready. Let's click on. Here we go. We have our text and buttons, and when we click on any of them, the model will be closed. The only thing that we have to do is to make fate effect when the model is appearing, and for that We just need to assign to the first development class fate. And you see that now we have some nice fading effect. All right, So in this lecture, we have learned how to create standard model. You can go ahead and check out in boots of documentation, different types of models. Actually, this is the main structure of creating model. And I think that the most important thing is to know how to build the structure. As for the content, it's up to you. All right, let's move on. 30. Admin Dashboard Cards: it's time to start building next section of our project, which is going to be caught. We will have for different cards, which will give to Adam in some kind of information. Like sales expanses, number off users and visitors in this section. Mobile use boots of cards, but they will be looking in kind of different ways, as usually. Let's make some comments right carts, then end of cards, open section elements and inside section I'm going to insert container, which in this case will be container fluid. Sandy container will be followed by row, in which I'm going to create. Call him for now. We're working on large screen size sidebar, takes up 1/4 off the West, and therefore this development should have Class Colin LG Night. As I remember from previous video In order to display content off that column properly, we need to define margin left as auto Okay again in column. I'm going to have nested role. It should have some classes, like parting top five, then margin top three and also marching bottom as five. That role will be divided by four equal sized columns, so let's open developments and assigned to read class. Call them as I'm six and also make some parting on all four sides, right, parting to then duplicated for three times because, as we said, will have four columns in which we're going to create carts. Those cards will be similar to each other, some going to prepare at 1st 1 of them, then copy, eat and make some changes. All right, so inside first column create developments with class card inside it when it and other developments which will be card body, actually, what those classes do you already know from the previous project. So I'm not going to explain same things over and over again. After that, we need another developments, which actually will include fun, awesome Aiken and several heading elements. So that's answered here for awesome. I can open I elements with colossus F A s F A shopping cart that, as we said, we need several headings on. They will be wrapped by development. So inside the developments create H five heading elements with content sales. After that, I'm going to insert another heading, which will be H three with the content 1 35 thousands. So the content is ready, but it doesn't look good. Let's go ahead and start them. Start from Formosa. Michael at first increase its size using F A Dash three X close. Also change its color making yellow using text warning. As for the headings, I'm going to place them on the right side so that's assigned to Deve Class text right and also change the color. Make it gray using text secondary. The next thing that I'm going to do is to place Formosa Michaels and headings at the same level. For that. One of the solutions is to assign to development class, display, flex and then justify content between All right so the cardboard is ready. Let's go ahead and create card footer, which will consist of fun or some Aiken and spun elements with some text. So let's open development with class carte footer. Then inside. Eight. Insert phone or Semicon, which will have Class F A s F a dash sink. Then after. For us, Michael creates pan elements with text updates is no. I want to make a little space between ICANN and tax years. So that's assigned to fund awesome class margin, right Dash three and also change the color of both elements and as text. Second. All right, so the first car is ready. And, as I said at the beginning and going to copy, eats paste for three times and then make some changes. So for second car, let's write your money, feel welt, then change the color, make it green. Using text success close it also changed the content of headings, right expenses and 39 thousands For 1/3 car. We need to change the fund. Also, Michael as users, then change the color right here. Text info s politic, content of headings, right users and 15 thousands. And for the last one, win it as fun us my gun chart line sandy color as text danger. And as for the headings right here visitors and 45 thousands. Alright. Actually, we're almost done. I just want to use, um custom CSS styles in order to look those cars nicer. Before I do that, I'm going to assign to those cards additional class for CSS. Let's call it card common, then go to style. Don't CSS file on before selecting elements? Let's write comment cards than end of carts and I'll select card using class card common I'm going to create forage card little box shadow effect. So let's write book shadow with values one pixel, two pixels, five pixels and stand the color as 99 night then and hover. I'm going to change slightly. Books shadow values. So again select card common than at hover and write books. Shadow for the following values two pixels, three pixels, 15 pixels and right here the same color. 999 Also, I'm going to move card up a little bit, so use your transform. Property would translate why and insert year the value minus one pixel. And finally, when it transition with the value all that point for seconds. So you see that we have nice effects when we hover on the cards. All right, before we finish this lecture, as usually, I'm going to make those cards responsive. Actually, I like how they are placed until screen size becomes extra large. So on extra large break point, I want to place cars in one role, and we can achieve it in a very simple way. We just need to assign to each card class column, Dash, Excel, Dash three and also far Main column. We need to assign column, Dash, Excel, dish 10 and for medium screen size, we need column empty Dash eight. Okay, now let's see what's happening on small screen size. You see that we have some space year, which we don't need, so let's go ahead and add to the classes. Off row break points empty, and now you agree that they're looking in a batter. Wait. All right, that's it. Card section is done, and it's time to move on to the next section. 31. Admin Dashboard Tables Part 1: all right. So in previous lecture, we have built cart section and now it's time to move on and start creating next section of our project, which is going to be tables in this section. I'm going to create tables were different types off pagination. And also we will refer to how to create pages in booster actually tables is the part off butcher content. As for the pagination and veg, is there part off boots of components? Before we start creating first table, let me explain what it should include. Imagine that Adam unmanaged the information about stuff salary and also she concerned direct message to stuff members. All right, first of full s usually let's make a commons right tables, then end of tables, then open section elements inside section when it container which again should be container fluid, then inside container Create role. I want to make some space at the bottom off the roll, which then will be used for separating sections. So let's use your margin. Bottom five inside Robinet column As it was in case of previous section, we will need the exact same technique to adjust position of this column with cyber so Let's go ahead and assigned to that deep element. The following classes column. Excel 10 than column, LG nine. Then we need to call him m D eight and margin left. Also, as we said, we're going to create two tables. Therefore, we need to insert your nested role, which will consist off two columns and those columns. They're going to be equal size. So it's creative elements and for now, assigned to eat class called 12 and then duplicate it. All right, let's go ahead and start creating first table. First of all, I'm going to insert here, having age three elements with the continent staff salary. This heading should have some classes. Let's change the color and make it gray using text muted. Also place it in the center right text center and make some space at the bottom of the heading using marching bottom three. All right, so the heading is ready and now create table open table elements. The first Brewster class that is going to be assigned to it is Table, which from CSS has some nice different styles. Let's make background color off the table as light, using budget light close and also I'm going to place the content in the center right text center. All right, so the first thing that we have to create inside table is table header that's open. T had elements inside table header when it table role. So right here t r elements. I want the contents off the table to be great. So let's assign it to class tax muted. And then let's go ahead. An insert inside row. Some headings opened th element. We're going to have five heading soldiers to placate it four times. The first th elements will indicate the number. So let's place your hush sign. The next one will be named. Then we will have salary dates and contact. All right, so the table had er is ready. Let's move on to the table body which will wrap all the information that's open T body elements. So our table will consist of several rows. But in order to be more practical, I'm going to prepare the 1st 1 and then duplicated for a couple of times. So that's open T R elements. The content off the first element inside role will be number, and this element is going to be T age so right here first. Next we knitting in certain enroll the data. 1st 1 will be name right, John. Let's duplicate it twice. 2nd 1 is going to be salary. Let's in 30 year, for example, $2000 and the next one is date right here. The date, for example. 25th off me. 2018 after that, as the last member off the row should be button for messaging. So let's open another TD elements, and inside it create bottom with the content as message. Also, we need to type button. This button should have somebody tripped classes. The 1st 1 will be Bt and then let's change its color. Make it info. And also I'm going to use your small bottom. And in order to achieve it, we need to use class BTM Dash s. Um all right, so you see that the first row is already prepared, it looks good and let's go ahead and duplicate it four times. Actually, I'm not going to change all the data because I think it will be a little bit boring. I will just change numbers and names. So right here a second and then third mark fourth Mary and the last one right fifth. But all right, so the table is almost ready. It looks nice, But in order to make it looking a little bit better, I'm going to use another Boutros class called Table Striped and it should be a science to table element. So you see that we have kind of different style off the table on you agree that it's looking better. Okay, so the first table is finished and the next thing that I'm going to do is to create pagination using bootstrap, and I will do it right under the table. At first, let's make your comment pagination, thurn and off pagination so the entire pagination will be wrapped by enough elements. So let's open it and inside it create a nor did least which would have class pagination from sea assess. This class has display properties set as flex. I want to place pagination in this center off the table, so let's use your class justify content center. Our list will consist off several lists items 1st 1 and the last one should be arrows. They will indicate previous on next pages, so open least elements which should have class page item, then inside least we need link elements with plus page link. And besides that, I want to make some putting on top and bottom right P white dash to and also on left and right right p x three and as a content off link. I mean, in order to display a row, we won't create span elements on insert in it html entity, which should be percent l. A Q U o. So you see that we have here a row which indicates previous. Let's duplicate this page item on. Just change L into our and you see that we have second arrow for next page. All right, so the arrows are ready and let's insert between them several pages. Let's duplicate the item for three times. And instead of spend elements, insert the number off the pages right First that second and third. So I see that we have here three pages. All right, Before we finish this lecture, I want to add to this pagination at one thing. Suppose that we are on the first page and we want to indicate it. For that. We just need to assign to first page item class back to So you see that background color off? This item is primary and tax became white. All right, that's it. For this video we have created first table with pagination. Let's move on to the next lecture in which we have to create the second table. 32. Admin Dashboard Tables Part 2: So we have created our for a stable and as I have promised, let's go ahead and create the 2nd 1 which will be a little bit different. And also it will include boots or pages, which, as I said, is a part of Putin components. The main structure off the second table will be similar as previous one. So I'm going to copy the most of the code from previous table, so we should work in second column. The first thing that we have to do is to insert your heading so that's copied paste and changed the content. Actually, this table is going to be about something like payments, so it's right your recent payments. I think that here in it, some space between heading and pagination. So let's go back to for a stable and assigned to call them margin bottom for all right, let's create table after heading elements, open table elements with class table and also use your text center class in order to place the content at the center. The next that we have to do is to insert had a ringside table, so let's copy from the previous one and make some changes instead of salary, we need price. Then leave date as it is on instead of content. Right status. So the table heather is ready. Now it's open T body elements and thats copy from previous table the role, then paste it and let's change name as Monica. It's for the amount and tights list. Leave them as they are, because it doesn't matter what we will right here. As for the button, I'm going to get rid of it and instead of it, create Beijing. So in 30 years, pan Elements with Colossus Page also let's colorize it and make it green, using Beijing success and insert the content as approved. Actually, Bages Air used to represent some kind of status, and this scale off page is directly related to its parent element. I mean, for example, if one bages inserted in H one element and another is inserted in h five element, then the size off the bages will be different properly. All right, Because of that from CSS, Page has displayed property set as in line block. We can define the wit off it, and in this case, I'm going to use with 75 and also makes imparting on top and bottom, right? P white trash too. So now it looks better. All right, so the row is ready and let's duplicated five times. Then changed the numbers names. And for a couple of pages, I'm going to change the content. So right, Second nikh, then third Alex and forbade right pending. And also I'm going to change the color. Right? Danger, then fourth right. Jane again pending and change the color, then for fifth. But place you, Michael. And for the last one, right, Kate pending And also change the color and make it danger. Okay, so our second table is already created. I'm going to change its tile and make it dark. For that. We need to assign to table element class, table dark. And also I want to make hover effect which should be achieved by adding class called table hover. I think that it looks really cool and also you can see that however effect is working all right, Like the first table. I want to place the pagination under the 2nd 1 but it would be slightly different. Let's go ahead and copied from previous one and paced eat after second table and make little changes. I mean, instead of arrows, I'm going to write previous on, then next. Okay, so the second table is done. It looks good. And now, before we finish this lecture, let's make responsive those tables. For now, we're working on lock screen size so they look good. Let's make browse a smaller. You can see that on medium and small screen sizes. They're looking still good, but when we make Broza extra large, then you agreed that we have to make some changes, actually, extra large screen size. I want to place those tables at the same level of side by sight. And in order to achieve that, we just need to assign two columns class called X L Dash six. Also, I want to place tables at the center of practically in a row. For that, let's assigned to roll class a line items center. And the last thing that I want to do is that as they see here, I have created margin bottom, but actually it's needed until the second table is placed under the 1st 1 But on extra large screen size, we don't need it. Therefore, that's right year margin. Bottom dash X L Dash zero. All right, that's it. Table section is finally finished. It's looking really nice. Also, it's responsible or break points, so let's go ahead. 33. Admin Dashboard Progress: all right, so her Bill table section. And now let's go ahead and start creating another section, which will consist of two parts. The 1st 1 We will use booster progress bars, and they will represent something like conversion rates from different browsers. As for the second part, it will represent task at least of adamant. Okay, so at first make comments right progress, Tusk least and then end of progress Tusk Elise. Then, as usually, let's use here. Some standards taps that we have used in previous sections. Open section elements, which will be followed by container. And still we need here. Container fluid in which I'm going to insert row and then inside row open development again . I'm going to adjust the position of column with Cyber, so let's use the following classes. Writes column x l 10. Then call them LG Dash nine for medium screen size right column and the eight and then set margin left as auto. All right. As I said, this section will consist of two parts there, for I'm going to use your message role, and that's taking to account that we have to create other section after that one. So let's make some space at the bottom of the row, using margin bottom four. Then inside that NASA grow, we need two columns. Both of them will take some classes. I want to place those parts side by side of the same level on extra large screen size, but on the rest, off the screen sizes. I want to place them under each other. So in order to achieve that, we need to write the following open developments with Colossus column x l six but then column 12 and then duplicated All right, Inside column That's created development, which will be the wrapper off the entire content. Then inside it, insert age four, heading elements with the content as conversion rates and in order to make some space at the bottom of the heading. Let's use your margin bottom funny, all right, so we're going to have for progress bars, and each of them will have its heading. So I'm going to prepare the 1st 1 and then duplicated three times and make some changes. Okay, let's go ahead and create heading for their first progress. Bar is going to be eight seeks heading elements with the contents. Google Chrome also I'm going to create some space between heading and Progress Bar. So let's assign to eat class margin bottom three. I would like to note that Improves project. We have already worked with progress bars, so I hope you remember how to deal with them. In this case, I'm going to use little bit different type of progress. Barroso. Let's go ahead and open developments with class progress. Then inside the developments, we need another one who it should have Class Progress bar And as remember, in order to indicate wits off it, we need to use in line styling. So let's write style. Attribute. Okay, then use with property with value 91 person and also in order to display the value itself. Let's insert here the same 91 person as well. All right. As I said, I want to use in this section different type of progress. Burr. And it's going to be progress bar strike. So you see that it looks in kind of different ways Besides that, I want to make the phone bolder. Using front weight both close and the lusting regarding this Progress bar is that I think will the better If we increase its height a little bit for that. We need to use another style attributes, but we have to do it with parents developments. The right here hide with the value 20 pixels. Okay, now I think that it looks better. So the first progress bar is ready. Let's go ahead and duplicated three times and then change the headings, the values and also the colors off them for 2nd 1 right Mozilla Firefox and change the color as background success. That's for the value right? 82 person. The next we have safari. Let's make it's called the Red using BGE Danger class and also, as I value right 67 persons. And for the last one, I'm going to write Internet Explorer, then the background as fo and as a value I think will be relevant if we right here, for example, 10 persons. All right, actually, progress bars are ready. The only thing that we have to do in this video is to make some stars for this part. At first, let's change background color off the wrapper and make it dark using Bridget dark, close, then change the color off the text. Right Text white also I want to make some parting on all four sides, right p for And the last thing to do is to make tiny border radius using boots of class called Rounded. Actually, this class is used around the corners of elements. You can rob the specified corners using rounded top, right left bottom classes. And also you're able to make the circle using rounded circle class. Okay, I think that we need to make some space here between progress bars. So let's go ahead and assigned to developments with class progress. Margin bottom As for all right, that's it for this video. We have built one part of our section which consists of push for progress bars. I think it looks nice. Let's go ahead and move on to the next lecture in which I'm going to create second part off this section. 34. Admin Dashboard Task List: so the first part of this section is already created. I'm in the progress bars, and now it's time to move on to the second part, which is going to be a task a least. Each tusk item will consist of checkbooks, some dummy text, fun, awesome icons and also you will learn how to create till tips using push up on very little code of Jake Worry. All right, so for a previous lecture we have here Ready column in which we will create task list. The first thing that I'm going to create is heading, So let's open age for heading element with content tasks. I want to change its color. Let's make it gray using text muted class. Also make some putting on all four sides, right p, Dash three and create some space at the bottom. Right margin. Bottom three. As you see, we need some space between progress bars and having so let's go ahead and assign to column off progress bars margin bottom for But as it was previously, win it it until screen size becomes extra large. So one extra lock screen size. We need to set margin bottom as zero. Okay, let's go back to your tusks list will consist of five tusks. They will be similar to each other. So let's create and prepare the 1st 1 open developments, which should be container fluid. And also I want to make its background white. Then inside container Create role, which will consider four columns. 1st 1 will before checkbook. So let's inserting side road developments. I want the checkbook to take up 1/12 off the entire row, so it's assigned to developments. Class column one and then place inside the DIV. Input elements We should have type as checkbooks and let's make it checked using check attributes. All right, so the next part of the row is going to be some dummy tax. Let's open and other developments, and I want this text to take main part of the role. So let's assign to it. Class column s m slash nine and for extra small screen size, let's use Class column eight, Then inside Development Place Some lot of Epsom Tommy text. The next two columns will include front or some icons for acting and relating the tests, and also will use here till ticks like the checkbooks. I want those columns to take up 1 12 off the row. So open development with class column one than inside do place will link elements which will include fun. Awesome. I could so open I elements with class if a s at a added also change its size and make it a little bit large using FAA, Tesh, LG, close change its color and make it green right text success and then we need some space on the right side. Right margin right to All right. So here we have our Aiken as a C. We need to make some parting for the role. Let's make it on top and bottom using P Y Dash three cluster and then also creates a space under the role White margin bottom for all right. As I sat in this video, I'm going to show you how to work with pro Trump tool tips, which is a part of boots of components. Actually, it's a pop up box, which appears when you hover on the element, and in order to create till tips, we need to use several attributes. But we have to do it with apparent link element because we are using JavaScript C the Elling for for some icons, and it doesn't work in this case. So let's use link elements and assigned to it the first attributes, which is day to toggle, which in this case takes a value as tilted. Then we need a title attribute which l o suited in surtax, which then will be appeared on Hover. In this case, let's write added. So if we hover on the Eiken, then the tilt it will be appeared with a tax addict. But actually, for now it's pure HTML, and it doesn't look good. In order to initialize it, we need to use little Jake Worry. If you're not family with it, you can just write the code. But if you know at least ABC off Jake Worry, then he won't have in trouble to understand this. Couple of lines of code. Let's go to script or Js File and rights dollar sign, then inside parentheses, right documents that's ready and inside here function. This function means that JavaScript code runs on Lee when the entire HTML document is loaded and the next we need to select elements on. We have to do it using data toggle attributes, which has the value filter, and then we need to attach to it. Tilted mattered. All right, that's it about Shakeri. So if we hover on the icon, but then we will get Papa books. But now it's looking in a bathroom. Wait as the C, by default Till tip appears at the top of the elements. But you are able to specify on which side you wanted to be appeared, and you can do it using data placement attributes. For example, let's say we wanted to be appeared at the bottom you can use also left and right. But in our case, I want to use top. All right. Besides that, you are able to change the size of the text using HTML tags. I mean, let's say we want to make the text little bit bigger. For that, we can use HTML heading six Tug, Let's hover on the I come and you see that instead of bigger text, we got opening and closing tax as playing text, so we need to your something else. And it's another attributes called data HTML, which should have value as through. So let's hover again and you see that it works now all right. Besides the added Aiken, I want another one for deleting. So let's just duplicate this column then instead of added right entitled attribute, delete. Also, change front or Semicon. We need to your thresh belt, then change the color and make it dread using text danger close and gets without this margin. We don't need it in case of Tillett Aiken. All right, so both icons already also till tips work fine and lasting regarding the task is to create border on the left side of it. I'm going to do it using CSS, and for that I'm going to assign to row additional class. Let's say Tusk Border, then go to styled with CSS file at first made the comments tusk least then and off task a least. Then select Task Border and assigned to it property. Border left three pixels solid and the color F 66 for 36 so he would have on the left side . Nice looking border. Okay, actually, that's it. Tusk is ready. Let's go ahead and duplicated four times. In this case, we don't need to make any changes. So before we finish this lecture, let's see what happens in response to break points on a large screen size. Both parts, I mean progress and Tasca least look good. Let's make rather smaller. You said that they still look good, but we have a little problem with Tusk. A list items. I want to place them at this center vertically, and we can do just by assigning to roll close a line item center. All right, now, let's make brother extra large. Actually, they're looking good, but I want to make a little change here in order to place both parts. Little bit better. Let's go ahead and assigned to the nested role. The same class called a line item center. All right. No, everything is fine and this section is finally done. I hope you like it. Learn something new and got some little more practicing. Butcher, Let's move on. 35. Admin Dashboard Activities: so the most part of our second project is already done. There is left just the one section and the food. Terry, in order to finish this project in this lecture, will start building section, which will consider of two parts. The 1st 1 is going to be for customer activities, and the 2nd 1 will be for something like quick status. Post off admin. In this video, you will learn about new Butch of Component, which is called accordion. All right. At first, let's write comments activities than Quick Post and then end off activities. Quick post then open section elements, which will be followed by container fluid and then insert here inside, Container wrote inside row again when it column with the same classes as it was in case of previous sections. I mean, we need to your column Excel Dash Tan, then column LG nine. Call them empty eight and set Margin left as photo, Then create nested row because, as we said, we will have two parts in this section. So let's create the 1st 1 This part will take up the full with off the roll SNS screen size becomes extra large, but on extra large screen size. I wanted to take up 7 12 off the rope so it's assigned to eat. Call them Excel, Dash seven. Then for a second part of the section, create another column and assigned to eat Class column Excel, Fight. All right, let's go ahead and start working on first column create header, which is going to be age four heading elements with the text. Recent customer activities. Let's change the color of heading and make it gray using text muted class and create some space at the bottom off the heading using margin bottom for all right. Actually, customer activities will be represented using cards. They will consist of headings, images and some collapsible content, and we will have several off them. So let's go ahead and start preparing the 1st 1 Those cards will be repped by developments , which actually will be used later. So, inside development, let's open another one which would have class card. Then inside card I'm going to insert another deep with class name card had er in that Haider we will have button, which will include image off the customer as a tax which will describe he's or her activity so open button elements. As we said, we will have image and tax inside buttons always opened an image. Elements in source attributes inserted path off the image. We have the folder images and then write the name off the image customer cost one dot j pack and also define with off the image as 50 pixels. All right, so you would have image off the customer. As for the activity, let's right, John Posit and new comment. Okay, so they had a is ready, but it doesn't look good for now. Let's go ahead and give some stars to it. Assigned to button elements several classes like BTM. I want the button to take up full with available. And in order to achieve that, we can use pu trip class called BT and Dash Block, then change the background of it on Make it secondary also changed the color of the text right text light and place the content on the left side of the button using text left close . As for the button, we're done. Let's go ahead and make some space between image and text assigned to image elements Class margin right? Three. And also I want to make the corners off the image as rounded, using class around it. All right, so the car had a is ready. Let's move on to the car body, which will include the collapsible content of the comment Car body will be wrapped by developments which will have class collapse which, as you know, hides the content of the element. Inside. That day we need to open another one which will be card body and inside car body inside some Lottum if sometime texts. As you see, the content is not visible because of the collapse class. Actually, I wanted to be displayed when I click on the button. And for that we need to use some attributes for button element. We need to use the known day to toggle attributes with the value collapsed. And also we need another attribute called data target with idea which should be length two collapsible content. So as an I d right collapse Who on and then assigned the same I d to develop right here, collapse one as well. So no, they are connected. If we click on bottom, then the text will be displayed. All right, so the first car is ready Let's duplicate it once because I want to show how the Accordions work in post up. At first, let's make some changes. Change the I D and the value off data target attributes Right? Collapsed, too, then changed the name off the image right customer, too, and also changed the name asked Mark. So when we click on butts and stand in both cases, the content is displayed, but I don't want it. When I click on a button, I want its accountants to be appeared but others to be hidden. And this is the feature off Putin Accordions in order to manage eight. Let's use rapper Developments and assigned to it I d attributes with the Valley accordion and then to each collapsible development. Assign attributes called data parents with the same value but with hash sign. So remember that the values of idea and data parent attributes should be always meshed as it's in case of data Target attributes. So if I click, then the content will be displayed. But if I click on second button than the previous content will be heating and the current one will be displayed, actually, that's how boost of accordion works all right now we can duplicate card, Let's say four times and make some changes right here. Collapsed three, then customer three. And change the name as Monica. Then we have collapsed floor. That customer for at the name Vivian. The next one will be collapsed. Five, then a customer five and the name as Nick. And for the last one, right collapse six custom or six. And the name s on. All right, so the activities part is ready. And before we finish this lecture, I want the 1st 1 to be collapsed by default. And for that, we can use bootstrap class called show. So each time when the pages really loved it than the first content will be always collapsed . All right, that's it for this video. That's go ahead and move on to the next lecture in which we will create the second part off this section. 36. Admin Dashboard Quick Post: All right, so the first part of this section is created. It's time to move on to the second part, which is going to be something like Quick Posts of Adami. The content will be represented by Boutros Card, which will consist of several phone awesome icons and also some form Elon's. In previous video, we have created Second Column, so let's go ahead and start working in it. As I said, we will have here boot trump card. So let's open development with class car Before I answered here Some content. Let's make little space at the top of the column, which actually will be used in responsive mode. Actually, I want this car to be a little bit around it. I mean to make little border radius. And for that, as you know, we have class in Bootle called around it Inside card. I'm going to insert card body, which will wrap entire content off this part and the first thing that I want to insert inside CART body is heading. Sell its open H five heading government with text quick starters post, then change the color off the heading to make it gray. Using text muted close also place taxing the centre right text center and create some space at the bottom. Right margin bottom for all right, so the heading is ready. The next part of this card is going to be a list which will consist of three items for status, for uploading photo and for checking in. So let's create you elements. I won't leads to be in line, so let's use your class list. In line insight least create list item. Actually, h least item will consist of fun, awesome Aiken and the text represented in span elements. At first I signed to L. I Element class list in line item because, as we said, we want list to be in line, then inside least item insert link, which will wrap front awesome Aiken and spun elements with some texts. So inside link open I element with class F. A s at a dash pencil dash Cult. Also, let's change its color. Make it green right text success, then after link elements open span. But the text status. I want to increase fun off span element a little bit, so let's use your class age six and also change the color off it and make it great, Right? Tax muted. All right, so the first item is actually ready. Let's duplicated twice and make some changes for a second phone. Also, Mike and I want to use close camera. Also change the color, make it balloon using text info and change the text. Right photo. And for the last item, let's use phone us and I can ask mop marker belt and also changed the color right text primary and as a text, right check in. All right. So all the items already, I want to place them in this center. That's a sign for that to you Element class text center and then makes him putting on top and bottom using P white three. All right, before we move on to the next part, I want to make some space between those items. And for that, I'm going to assign to first and second list items close, Marty. Right? For right now they are looking good. The next that we're going to have in this car is form elements which will consist of inputs for typing the status and button element for submitting the post, so open form elements, then inside it creative, which actually will grope the elements. So let's assign to it class for group than inside development. Insert input. Also, it will have class firm control, then make some parting on top and bottom right p y dish, too, and create some space at the bottom right and be dash three. Besides that, I want to insert here placeholder attributes with the text as What's your studies? All right, so the input is created and after it went into place, button with the text submit post. Let's make its type as button and also assigned to it. Several classes like BTM. I want to make it block, and for that let's use Bt and block, then transformed text into uppercase and also make it bolder using front weight. Bold change the color and make it lighter. Right Text light. Also change the background color right digit info and then use parting on top and bottom to and margin bottom as five. All right, so the four moments are ready as well on it's time to move on to the last part of the card . The last part of this card will consist of another two little carts, one for calendar and the next one for time. So in order to create them, I'm going to insert here nested role, which will consist of two equal sized columns. Each of them will take half off the with off the road, So let's create developments with Class column six and then duplicated Inside Column. As I said, we need to insert card, So let's open development with class car. Also, let's make its background as light using PJ light close inside carp. The first that I want to insert is fun. Also Maiken for Calendar. So that's open i elements, which will have class if they are f a dish calendar dash cult, then increase its size and make it bigger. Use f a dash eight x change its color and make it yellow right text warning. Also, I want to place it in the center of the car. In order to achieve it, we need to transform it as block level elements using bootstrap class called the block and then set margin as photo. Also, make some potting on top and bottom using P Y Dash three. All right, so the first part of card is ready the next we need to create card body, which will include paragraph with some tax like Monday, May 26. We need several classes in order to look at better. First class is going to be car text, which from CSS gets rid off margin at the bottom. Next, I want to place text in the center right text center, then make it boulder and also transform it into uppercase. Okay, so the first card is ready. It's looking good. Let's go ahead and copy the content of column and paste 18 2nd one. Then change the front off some Aiken when it's your clock, also change its color making to read using text danger and as a text right? 3 50 I am all right, so this section is finally done. Let's check if it's responsive on other break points on large screen sizes. Looking good, let's make browser smaller. As you see it's still looking good. Then let's make browser extra large, and I noticed year. That would be better if we place those parts at the centre, particularly in a row. So let's go ahead and assigned to Ness's role. Close a line items center and also make some space at the bottom said Margin. Bottom s five. All right now it's perfect. Actually, our project is almost finished. The only thing that we have to do is to create little and simple food. Heretic bottom. So let's go ahead and do it in the next lecture. 37. Admin Dashboard Footer: So this is the last lecture off the section were finally finishing building our second project, Adam in Dashboard. As I said in the last lecture, the only thing that we have to do is to build simple Footer. So at first, let's make your comment footer then and a footer. Then open html five Footer Elements, which will be followed by Container Floyd inside Container when it Row, and then Colin, which will have the exact same classes that we have already used several times. So right your column Excel 10. Call them LG Night. Call them Empty eight and margin. Let's auto. Actually, our foot there will consist of two parts on the left side. We will have least with several items, and on the right side, I'm going to place copyright sex. So in order to achieve that, I'm going to insert your nested role, which will include two equal sized columns that's open developments. I want those calls to be under each other until screen size becomes large. As soon as it becomes large, I want them to be placed at the same level. So for that, let's assigned to Development Column LG Dash six, then Also, I'm going to place taxing the centre right tax center. Okay, let's duplicate this column and then go ahead and start working in the 1st 1 As I said, it will include least that's open you elements. I wanted to be in line, so let's use your class least in line and then inside you element insert least item with class least in line item. Also, I want some space between items, and for that I'm going to set margin or right as to then inside L I elements. Let's open link and inserting it content as code and create. I want to change the color off the text and make it dark. So let's assign to link element class text dark so the first item is ready. Let's duplicate it three times and just change the content for 2nd 1 That's place you're about. Then we have support. And for the last one, right Pulock. All right, so the first column is actually ready. Let's go ahead and create paragraph in second column. At first, I need here to insert copyright sign for that. Let's write your 1%. Then copy with Sami Cullen. Then write some text 2018 Copyright made with then insert earphone. Awesome! I can open I element with class F. A s a dash hard and also changed its color making to read using text danger Close Next, Win it here by and after that opens pan element with text code and create change It's called or make it green. And for that a scientist plan element colossus text success. All right, so actually footer is ready. It's the simple one, but I think it's looking nice In order to make it a little bit better, I want to add border at the top and I'm going to do it using booster class border top, which should have to be assigned to Necid role. As you see here, we need some space between border and text. So let's at here another class parting top three. All right, that's it. The footer is ready. It's responsive. If we make browser smaller than those two parts will be placed nicely under each other. Okay, so finally our second project is done. I hope you like it enjoyed and what's the most important you've got Lot off practice and experience in building projects use import trip So this was our second project. Let's go ahead and move onto the next one, which will be more complex and interesting. All right, see you there. 38. PhotoX Project Overview and Setup: Hello and welcome to our third project, which is going to be website for something about like photography. And I used here just a dominating called photo X. This project will consist of several sections, so let's go ahead, go through and describe each of them a little bit. So we have here banner with background image at the top. Off the page there was placed number, which consists of noble Brent and navigation items, and here in the center we have having an paragraph. Actually, they are animated. If we reload the page, then they will be appeared from the left side nicely. The number is animated as well. If we scroll down the page down, it will be changed a little bit. After Byner, we have section called Our Mission, which consists of three columns with found awesome. I consent with some text and then down below. We have animated image and paragraph. Mission section is followed by collection, which consists of several cards, and you will learn about how to create different types of cards. I mean cars with over late images and content. Next, we have Image gallery section. We have here different categories off images and if we click on them than the proper image group will be appeared, and others will be here. After this section, We have Customers section, which includes bootstrap Corozzo, which actually is a slight show. It works automatically, and also you're able to control the it using those indicators so you will learn about how to create slide shows using poor Trepca. Rozelle's next we have pricing section. It consists of post cards. They represent some kind of pricing conditions. When he scrolled down the page, you will notice that they are animated and are moving nicely. Pricing section is followed by Constant section, which is split in two parts. On the left side, we have several input elements with bottom and on the right side we have just transparent background image with inputs. We have some nice effects. When we start typing, you can see that placeholder moves up so you will learn how to create those effects. And lastly, we have Footer, which consists off four different parts. Of course, the project is responsive on all different break points. Let's make browser smaller on medium, small and extra small screen sizes. Now, Boris, hidden as you see we have here no bar toggle Reichel, but actually doesn't work in standard way. If we click on that icon, you will see that we have created you hamburger menu. Let's go down and go through each section. You see that each of them is responsible, all right. Throughout the project, we will use lots of bootstrap. But besides Bruce up, you will be able to use some CSS and also Jake Worry. Using those technologies, we will create modern and cool effects, which you have just seen. I mean to go right. That's all about how our project looks On desktop. I have created new folder called Photo X, in which we have three files for HTML, CSS and Jake Worry. And also we have here for their called images, which includes all the images that we are going to use in that project. I hope you have already downloaded those starter falls at the beginning. Off the course. Let's open our code editor and drop folder in it. So you see here started template off the project. Let's briefly go through it in first link elements. We have image for title bar. Then it's followed by Boutros Cssc dealing. Next, we have a link for four awesome Michaels in this project I'm going to use again Google Front called Monserrat, so we have link for the front. Let's open style dot CSS file and set phone family for body elements as Monserrat, then San Serif, then go back to HTML file. So after Google phone link, we have another link for style. Don't see us as far don't below you see several script cdn links. They are the exact same script links which we have used in Prius projects. Also, we have here Link for script Js File, in which we will write some Jake Weary coat Before we start building our project, I'm going to change first Crips Indian link, which is for Jake Worry. Actually, it's kind of like version, and we don't need it because it doesn't support some cool effects, which we will create using Jake Worry. So I'm going to change it into standard Jake or its Cdn. Let's open browser and type here, Jake Worry Cdn, then go to first Link. Let's choose un compressed version, then grabbed the link and paste it instead of J. Corey Salim Cdn. All right, that's it. We're ready to go. Let's move on to the next lecture and get started 39. PhotoX Banner: all right. So it's time to start building our third projects, which is beside is going to be about something like photography website the first, but that we're going to create his header which will consist of now. Burr Background, image and banner with some content. I mean with having and paragraph. Okay, so the first thing that I want to do is to make the comments right. Your header than end of Hagar then open had her element. As we said inside Heather, we should have now bar. But for now, let's just create the comments rights. You're never than end off never after now, but we will have banner. So let's write another comment banner and and off Vanya, all right before we actually start creating the markup will be better if we place an image as a background of header. Some. Let's go to styled with CSS file and it first like in HTML file. Let's create some comments. First we need to your header than end of Haider. Next, we will have no bar than right and off. Never. And then we should have banner with end off Ben. All right, let's select Heather elements and at first set the height of it as 100 person off the view port. Then use background property and in your URL indicated path off the image we have here Images folder, and then write the name off the image header image that J pack. All right. As remember in previous project, we have used other back on properties separately. I mean, big row, repeat background position and background size, But in this case, we're going to use shortened way. So right here the values as no repeat than center, then center again in case of background size. We can try just cover here because it won't work instead of it. We just need to use forward slash and then cover. All right, so the background image is ready. It's position fine. And before we go back to html file, I want to make a little bit darker for that. Let's use linear Grady ins with some RGB A values for the 1st 1 right? 000 and the opposite E point for and for 2nd 1 right again. 000 0.5. No, I think that it looks better. Okay, let's go back to index dot html file and create banner open developments, then inside it create heading H one as the content right here will come to photo eggs. After heading elements, I'm going to create paragraph with some dummy text. All right. At first I'm going to change the color of the content and make it light because it's hard to see. So to developments. Let's assign the class text light and also placed text on the right side. Use here. Class text, right? Okay, let's go ahead and assign some bullshit classes to H one element in order to look a little bit better and also bigger. Let's use your class called display for the next thing that I want to do is to customize photo X, and for that I want to wrap photo and ex separate leeward spun elements. And then let's transform photo into uppercase. As for X, let's use your class display. Three. All right, so the heading is ready. I think it's looking good. Let's we want to paragraph and style it. In order to stand out the text of paragraph, I'm going to use your class called late. OK, As for banner, we are done here. It's time to go to style, dot CSS file and create some custom CSS starts. But before we do that, I'm going to add to those elements some additional classes. Let's assigned to development class banner than to having elements. Right? Banner heading. As for the paragraph, I'm going to use year class Banner Park. All right, so let's go to Star Lord sees his file, and first thing that I want to do is to position the content at the center. So let's select banner elements and then let's make its position absolute. As you know, absolute position allows the element to jump out from the normal flow off elements in order to make it perfectly centered. In CSS, we have following technique. We need to define top and left positions as 50% and then used transformed property with translate, which will take the following values when it's your minus 50% and then again minus 50% and it will perfectly center the element. Actually, it's maybe confusing for you what's happening here. So let me explain it. In case off top and Left properties, positions are defined from top and left badges off the patient, but then transform moves element according to its current position, and that's why we have perfect centering off the owned. But at the same time, you may notice that the text is no longer placed on the right side. It happened because Element has positioned absolute and it takes up the with, which is enough for displaying the content off the elements. So in this case, we should manually define with off it. So that's right with and assigned to it the value as 80 persons. Now you see that it's placed on the right side, all right. Actually, Benner is almost ready. The only thing that I want to do is to make some animation effect for heading and for paragraph. As you know, CSS ellos us to make animations using key frames. So let's right here at sign than key frames. And we need here to indicate the name of the animation, for example, right on him. So I want to hide heading and paragraph and place them little bit on the left side. In order to change the position we need to write your zero person, which means the starting point and then transform translate X, which should have the value minus 100 pixels. As for the hiding the elements, we need to indicate capacity as zero on 100%. I mean, when the animation ends, I want to place the element back on its initial position and also make them visible. So we need here, transform, then translate X but with, well, you as zero. As for the opacity, we need to set it as one. All right. In order to work this animation, we need to select both elements and assigned to them some animation properties. Let's start from heading Select Banner. Heading the first property is going to be animation name, which in this case is and him and the second property is animation duration. And in this case, I wanted to be two seconds. So if we re Loht, then the heading will move from left to right nicely and the same I want for paragraph, but with several additional properties. Let's select paragraph using class by their par, then copy those two lines and paste here in order to make a little bit nicer effect. I want the animation of paragraph to be delayed. For that we have animation property called animation delay and as a value. Let's assign to eat 0.5 seconds. So, as you see, it works. But we have a little problem here. I want the paragraph to be hidden while they're heading is moving. And for that we have another property called animation film Haute, which should have the value as backwards. Let's reload the page and he said that it works perfectly. No. All right, actually, we're done. But before we finish this lecture, I want to make the banner responsive on large and on extract, lock screen sizes. You see that? It looks good, but if we make the brother smaller than I think would be battery, we place the content in the center. So in order to do that, we need to adhere The break point empty and then a sign. New class called text center. All right, so the banner is ready. It looks good. Also, we have created some nice animations, and now it's time to move on and start building the number. Let's go ahead 40. PhotoX Navbar: all right, so the banner is created and let's go ahead and start building second part of the header, which is going to be a now. But actually this never will have the similar structure, which you have all of the seen in previous projects. But in this case, I'm going to add some more nice effects to it, like the scroll effect and also, instead of standard toddler Aiken will create hamburger menu. I think that it will be kind of different, modern and nice looking number. So let's get started here. We have comments for now. Burr from previous lecture. Let's go ahead and inside it open nerve element, which will have several classes. The 1st 1 is number. Then I want the navigation to be hidden. SNS screen size becomes medium and smaller, so for that we need class now. Burt expand algae. Also, I won't know about to replaced as fixed at the top of the page that is fixed up for number . I'm going to use some custom CSS styles, and for that let's at your one more class called enough menu. All right, inside nerve element. The first thing that I want to create is now Bar Brent. So let's insert your link element with class novel Brent. Then inside link elements open to span elements inside. 1st 1 let's insert photo and then in 2nd 1 that's right, X. Okay, let's go ahead and style now, Barbara and using several bootstrap classes, I'm going to change the color off the text and make it light, then transform text into uppercase. As for the first part of Don Barbara, and I mean photo, I want to use here the following classes. Let's make it looking as h two heading elements and also changed the phone waits and make it Boulder s For the second part. I want to use your class H one. All right number Brent is ready. Let's go ahead and create button, which actually should be number Tegler. And also we need to your type bottom. Besides that, as remember from previous projects in order to manage hiding and displaying number we need to attributes the 1st 1 is data toggle with value collapse, and the 2nd 1 is day to target, which I d Let's say my number. All right. As I said at the beginning of the lecture, I don't want to use your standard now bar toddler Aiken instead of it. I'm going to create three lines and then on click event we will transform them into X. All right, so created developments, and I want background off the line to be light. And for a custom, CSS. Let's assign to it class line one, then duplicate it twice and changed the classes we need here, lying to and line three. All right for now. Those lines on it actually visible, but we will work on it soon. Let's continue and create collapsible contents. I'm in the navigation items. They should be wrapped with developments which will have classes collapse, then love or collapse and also idea tribute with the same value as its indicated in data target. Attribute right here my number inside developments. I'm going to create a new order at least with class number enough and then let's go ahead and create navigation items open l I elements with class, no item. Then inside, ally elements create link, which would have class not link. And as a content that's right. For a sytem hope. Let's duplicate it six times and change the items for a 2nd 1 We need mission, then collection. The next should be gallery. Then we have customers pricing and for the last one, right contents. All right, So the first thing that I want to do is to place the items on the right side of the number . And for that, I'm going to assign to development class called Justify content and then make the text uppercase right, text uppercase and also changed the phone. Wait, let's make it bolt. After that, let's create some space around each item I'm going to use here multicourse er feature off the S coat. So for each item, I'm going to use margin to and also assigned to them class for CSS styles, which would be menu item. All right, so the market for now Berries ready? Let's go to styled with CSS file and create some styles. At first, let's select enough elements with class enough menu. I'm going to change its background. Let's use your linear Grady in property with some are Juburi values for the 1st 1 right here 000 and the opposite e 0.3. And for 2nd 1 right again. 0.5 and then create parting on all four sites, which should have the value as 30 pixels. All right, let's go ahead and customize the navigation items. Let's select menu item, and the first thing that I want to do is to change the phone size. Let's make it 13 pixels, then create some space between letters. Use your letters pacing property with a value one pixel and then change the color and make it light. I want on hover effect to use different color. So that's again. Select menu item then and hover and as a color use here seven zero a e d to and also for better. In fact, let's use your transition property with the value color and with duration 0.5 seconds. All right, so the navigation items are ready. I think they look good. It's time to start working on now. Bartolo Button. Let's make the brother smother in order to see styling. Process off the bottom and remember, we have three lines so that select them using classes line. Want lying to and line three, then assigned to them with this property with a value of 23 pixels. Also defined the height, three pixels and make some space around each line. Right margin, five pixels. All right, so the button is created, and actually it should all of the work. If we click on it, then the navigation items will appear. But as I said, I want to create your hamburger menu on Click. I want to transform those with three lines into X For that, let's define separately for each line. Different styles. Let's select 1st 1 right line one and assigned to be transformed property. Actually, I want to rotate it with minus 45 degrees. As for the second line is going to be hit him. So let's elect lying to and that's hide it using capacity zero. As for the third line, I want to rotate it with same degrees, but in this guise with opposite direction. So use your transform property, then rotates and place you the value 45 degrees. So you see that we have here two lines, but the shape is not looking as X. We need to make you some changes, and for that let's use translate after rotate and for translate. We need to get the values as minus five pixels and then six pixels now it's better. But still, we do not have here X. So let's change the position off third line as well. Let's use your again translate and I think will be correct if I use your values as minus five pixels and that minus six Speaks is so you see that it looks nice. And finally we got here, Max. All right, actually, want to get your ex when we click on a button For that, we need to use another class, which for now doesn't exist. And we will add this class to bottom using J. Coury. So let's at here for each line class called Let's Say Change. And also let's go back to index dot html file and assigned to button additional class called up button, Then go to script Js file on the right. The following We need to your dollar sign that document dots ready, then insert here function, and the first thing that I'm going to do is to select button elements with newly added class, which is no bottom, then attached tooth click event and inside parenthesis. We need to insert here function, so when we click on a button, we want to transform it into X. But when we click on it again, we want to get back default button. When you ike for doing that on every next click, we Nitti a scientist button class called Change and then remove it for that. In Jake Worry, we have method called toggle class, so that's select again busting elements with class enough button and then use your method called toggle class, which should have change as an argument. So let's click on bottom and you see that it works. But it is changing into X and then back, but without transition property, it looks ugly. So let's assign two lines transition with the value all and then point for seconds. No, you agree that it's much better. All right, the next thing that regarding now Berries to create nice effect when we scroll down the page. At first, let's make the browser larger in order to appear navigation items. Then let's go to index dot html file and using B R talks. I'm going to make some space down below in order to scroll the page. So when we scrolled the page, I want to decrease the height off number and also changed a little bit. It's background color for that. We have to prepare in CSS and other class. Let's say custom number, which then will be added to know about using J. Coury actually noticed decrease the height of number we need to decrease its potting on Lee on top and bottom. So let's write your potting on top and bottom five pixels. As for the left and right, we need to leave it as it is. 30 pixels. That's folding background. Use a guy, lean your Grady INTs and change the beggar on slightly. I'm going to make it a little bit darker right here are to be a 0.6 and then are to be a 0.7. All right, that's all about CSS. Let's go to script RJ's file and select the window, which actually represents the entire page that's attached to its school events with a function. So the first thing that we have to do inside this function is to define position. I mean, where we want to start changing the number so it's created variable college position and then assigned to read the following. We need your this variable with a method called Scroll Top. So in this case, this keyboard refers to we know object and scroll Top mattered. Calculates the position in pixels. When we scroll down, let's see what I mean. Let's look position in council, right? Cost that luck position that inspect the page and go to council tap. So when we start scrawling done in council, we get the proper position in pixels. Actually, I want to start, in fact, when the value of position reached to, let's say, 200 pixels and in order to define aid we need to use here if else statement. So if position is greater than or equal to 200 pixels, then we want to add newly created custom number class to number. So let's select enough menu and use here the method called at class with arguments, which is going to be cast a novel. So when this condition is true, we want to see nobody effect. But if it's false, I mean, if the position is less than 200 pixels, then we want to maintain default number cell. So for doing that, we need to hear else statement in which we have to remove custom number class. So let's copy this line and change ed class into remove class method. All right now it should work. Let's call down on you See that it works, but again, for better effect. We need transition property. So let's go back to style dot CSS file and assigned 82 noble elements with value. Oh, and 0.7 seconds. All right, now we see that it works fine. Actually, we are done. Nobody's ready. Everything works fine. We have number with several nice effects. Also, it's responsive, and the only thing that I want to do before we finish this lecture is to make first navigation item, which is ho to be active for that, let's go to html file and assigned to eat class. Let's say not active. Then go to style dot CSS file and select eat after menu item and then assigned to eat. Call the property with the value 70 a e d to. All right, that's it. We're finally done. We have building header with number and with banner. Let's go ahead and move onto the next lecture. See you there 41. PhotoX Mission Part 1: in the last lecture we have built now bar with some coolant modern effects. And now it's time to move on to the next section, which is going to be something like our mission. This section will consist of Title three columns with phone, awesome icons and some content. And besides that, we will have animated image and text. All right. At first, let's delete those beer talks. We don't need them anymore and then make the Colemans right mission and then and up mission . Then open section elements. I'm going to make the parting on all four sites so it's assigned to eat Class P five and also adhere another class mission, which will be used for some CSS stops. Next, inside section we will have Container, which is going to be contained their fluid, and the first part of the section will be titled. So let's make your comment title then and off title and then create roll inside row. We will have column so it's open development with class cold and in order to make sense, pace around eight. Let's use here, marching for all right. Actually, our title will consist of having and paragraph and between them. I'm going to place little line. So let's open H one heading elements with text, our mission in order to look this time a little bit bigger and nicer. Let's assigned to having element class display for and also make some space at the bottom of the heading right margin. Bottom for all, right, as we said after heading winning little line. So let's create developments, and I'm going to assign to each class under a line which actually will be used in CSS and also make little space at the bottom. Right margin. Bottom four. And the last member of our title is going to be paragraph. So it's open p element with some Lauren Gibson dummy text and also assigned to it class elite. All right, so the markup of title is created. Let's go ahead and customize it At first. I'm going to change the background color off this section, and I will do it from CSS. So let's go to styled with CSS file. First of all, make here the comment right. Mission then and off mission. Then select section element using class mission and use your background property where the color 151 F 20 So as you see, background color has changed, but now the content is not visible. Let's go back to index dot html file and change the color of the text. Let's assign to roll class text white and also plays the content in the centre using text. Santa Claus. All right now it looks better, and the only thing that we have to do regarding title is to create line between heading in paragraph. As you see we have here development with class underlying. So let's go to Star Lord CSS file and selected. At first I'm going to define its with as 1 50 pixels. Actually, the line will be created using border. So let's use here Porter property with the following values by three pixels that solve it and make it light. So you see here the line, but actually it's placed on the left side. We don't want it. We want to place it in the center. So let's use here marching or Oh, all right, so the title is done. Let's move on to the next part of this section. As I said, I'm going to create three columns with fun, awesome icons and some text. Those columns will be wrapped with row, so let's go ahead and create another role. Also create some space on top and bottom right margin. Why fresh five. Then inside Procreate Developments on smaller and extract small screen sizes. I want to break those columns, but on the rest of the screen sizes. I want each column to take up 1/3 off the with off entire rope. So let's assigned to that developments column Empty four And also I want to position tax in the center right text center. All right, let's duplicate this called twice and then go ahead and work in the 1st 1 So the first thing that I want to insert Inside Column is fun. Awesome. Aiken. Let's open I elements with plus F A s. If a dash Cox then increase its size five times. Use here. FBI dish five X class, then change the color off. I can make it read using text danger and also creates in space at the bottom of the icon. Right margin bottom for so the phone Awesome. Aiken will be followed by headings. Let's open H one heading elements with the text. Let's say creativity. I'm going to change the color of the heading and making the white. And also we need some margin here at the bottom. Right margin, Bottom three. All right, and the last thing that I want to insert inside colonies. Paragraph. So let's open P elements with some text. Also change the color of the text and make it gray using text muted class. All right, so the first column is ready. Let's go ahead, copy it's contents and pasted in the rest of the columns and then make some changes for second fullness. Michael, let's easy here F a r. If a thumbs up and then change the content of heading right quality. As for the 3rd 1 let's use fund us Michael F. A. R F A dish handshake and change the heading right experience All right. That said, columns are ready. They look good. Also, they are responsive if we make browser smaller than they will be broken nicely. Okay, I'm going to stop here. Let's continue creating the rest part of the section in the next video 42. PhotoX Mission Part 2: All right, let's go ahead and build the rest part of Mission Section. As I said in it Last lecture. We're going to insert here animated image and the text. So after those columns I'm going to create container, which will wrap image and text. So it's open developments with class container. Besides container, we need to insert role, so this role will consist of two columns. The 1st 1 will be for Image and 2nd 1 for the text. I want the image to take up five 12 of the entire row on large and extra large screen sizes , so that's open development with Close call LG five. As for the second column, I wanted to take up the rest of the space off the row, so let's open second development and assigned to it class. Call LG seven. All right, let's go ahead and insert in the first column image open image elements and indicate the source. An Images folder We have image called camera dot PNG. Let's make its with 3 50 pixels and also, let's assign to it several classes. The 1st 1 is going to be image Floyd. It actually will help us to make this image, responsive and for animation proposes. I want to act your another class called camera image. All right, let's move on to the second column. Actually, it will consist of heading and paragraph, so create H one heading elements with text. Let's say we know what we do And then after heading elements, create para group with some text. All right. In order to customize heading in paragraph, I want to use your several classes that's assigned to call them text white. Then let's place the content on the right side using text right close. And also I'm going to assign to paragraph class late. Okay, The next thing that I want to do is to center vertically both columns in a row, and in order to do that, I'm sure you're guessing what we have to do. We just need to assign to row class called a line items center. All right, before we move on to animations, let's see what's happening on different screen sizes. Let's make browser smaller. As you see here. We need some corrections. We need to place image in the center, so let's assigned to first column Class Tax Center, and also I want the text to be positioned in the centre on smaller screen sizes. In order to do that, we have to insert your break point LG. I mean with text, right class. And besides that, we have to adhere class text center. So it means that on large and extra large screen sizes, text will be placed on the right side, but on the rest of the screen sizes, it will be placed in the center. All right. The last thing that I want to do here is to assign to second column class mission thanks, which I will use soon. Okay, let me explain what I'm going to do here. As I said, I want to any mate, image and text. So when we scroll down the page and rich to that part, I want the image to be appeared from the left side and the text from the right side. Actually, those effects and techniques are very popular nowadays, so let's go ahead and do it. It's open style dot CSS file. When we created Banner. We have already used key frames in order to create animation, so I'm going to copy it and paste here, then changed the name of the animation right from left and also change the value off translate X property as minus 1 20 pixels. So at the starting point, image will be placed on the left side and it will be hidden. And when the animation ends, I mean on 100% it will get back on its position, and it will be visible in the same way I want to create animation for text. Let's copy, eat and paste, then changed the name right from right. So in case of text, I want it to place on the right side at the starting point. So it's insert here as a value that's a 30 pixels. And when the animation ends, I want the tax to get back on its position as well. All right. As I said, I want all of this to happen when we scroll down the page and rich to those elements, you already know how to use crawl of fact using J coury. So before we go ahead and start writing the code, I want to create two classes in CSS File, which will have properties regarding those animations. And then using J. Coury will add those classes to both cups, so create the first class for image. Call it the same name as it was in case of animation. I mean, from left. We did hear to use animation, name, property right from left, and then use animation duration. Where the value. Three seconds. Then let's go ahead and cup of this class and pace below and just change left into right. Okay, we are ready to go. Let's open script RJ's file. Actually, we need to write the coat similar to what you see here. So let's select window. Then we need scroll event with the function. Inside that function, we need to define position. I mean, where we want to start the animation. Let's assign to that position this variable dot and the method called Scroll Top. Now it's time to find out and choose the position for that. Let's log in council variable position, then inspect the page and open the castle top and start scrolling down. So I think that we need to start animation somewhere close to. That's a 6 50 pixels. All right, so create if statements and as a condition, we need to your position to be greater than or equal to 6 50 pixels. So if this condition is true, we need to assign to image newly created class called from Left. At first, let's select image using class name, camera image, and then use a method called ed class with the arguments from left, the exact same thing we need for text. So let's select it using class mission text and then use at Classmethod with proper arguments. I mean from right. All right, as it was in previous case, if the condition is false, I mean, if the position is less than 6 50 pixels, then we need to remove those classes. So let's create l statements that copy those two lines paste and change ed class into remove. Close. All right, that's it. The animations work now, so let's go ahead and scroll down the page and you see that they work nicely. Okay, so this section is finally done. I hope you like it. And it was interesting for you. So that's one 43. PhotoX Collection: all right. Once we're done with Mission Section, it's time to move on to the next one, which is going to be collection. This section will consider off title and several cards. And actually, in this video you will learn about different type of Putin carts so it's jumping and start creating new section. But before that, as usually, write your comment collection, then end of collection, an open section element. I want the background of the section to be secondary. So let's use here Class Bijie Secondary and also makes him patting on top and bottom right P y dash for All right Inside section we need to open container, which will wrap entire content and in this case is going to be again container fluid. As I said, this section will consist of title and cards. As for the title, I wanted to be similar to previous sections title, so let's go ahead and copied from Mission section and paste here. Then just change H one heading element right instead of mission collection. Okay, After title, we need to create another role, which will consist of six columns. So inside roll, it's open developments. For now, we're working on a large screen size on large and extra large screen sizes. I want to have two lines of cards, and in each line we will have three carts. So the first class that I want to assigned to that development is called algae dash For As for the medium and small screen sizes, I want to place two cards in line and on extracts mostly size. There will be only one car in your life, so the second class is going to be column S, um six. And also I want to create some space on top and bottom. Right margin. Why Dash five? So each column will consist of one card, so it's open in other developments with class card. As I said, I'm going to use your different type of card. I mean, I want to insert here image, which will be over light on the entire car. So at first, insert your image in source. That's indicate the path off the image, which is an images folder and right, you're the name nature Dodge APEC. In order to make image responsive, we want to use here but trump class called card image and then on the image I want to place heading. It should be wrapped with developments, which will have boots of class called card image overlay All right after that. Inside the developments, I'm going to open age five having elements with the text. Nature photography. Let's change the color off the text and making white, then transform it into uppercase. Also changed the phone. Wait and make it bolt. And lastly, I want to create some parting on all four sites. Right p dash to All right. Actually, the card is created. The next thing that I want to do is to gets rid up this border for that. In Bush up, we have class, border, Dash zero and also for custom CSS styles. I want to adhere several classes for developments. Let's right, car shadow and to having elements a signed plus heading. All right, so finally columnist ready, Let's duplicated five times and change the image names and the headings properly for the 2nd 1 When it here wedding dots Jay Pek especially heading right Wedding photography, Then the next one should be party, so that's changed the image name and they heading. Next we will have business and business photography then fashion. And for less one right family, I thought, Jay pek and also change the heading. All right, that's it for HTML. Let's go to CSS file and write some custom CSS styles. First of all, I want to make here the comment right collection than end of collection, and the first thing that I want to do is to make the shadow effect for each card. So let's select car shadow and then use box shadow property with the following values right . Five pixels than eight pixels, 20 pixels. And as for the color right for 44 the next I want to customize heading elements cell that's selected using class heading. The first thing that I want to do is to position the heading, and for that I'm going to use your position as absolute than for top position. In order to place it down, we need 70% and after that, in order to place the heading on the right side of the card, let's use right position as zero. All right. Next, I want to change the phone size of heading and make it 14 peaks is then make some space between letters using letter spacing property with value one pixel. The next thing that I want to do is to change background color that's use here called or 222 in order to look. Heading better would be good if we decrease the width. So let's right here with and make it 70% Next. I want to change course of type. When we most over heading, I want to make it pointer and the last thing that I want to do regarding heading is to make slight hover effect. I'm going to decrease little bit and upper city right 0.7 and then when we hover on heading , I want to increase it back. So let's write you heading hover and make the opposite e as what? And also for butter of fact. Let's use transition property with the value all and then 0.5 seconds. So you see what we hover on heading we have here. Nice effect. Alright, Actually, we're done. That's it about collection section. I'm going to check if it's responsive on different break points. So you see that everything works fine. All right, that's move on 44. PhotoX Gallery: Okay, let's continue building our third project. I hope you're enjoying it, learning a lot of things in both Europe and not only butcher, because we're using lots of modern and nice techniques using CSS and Jacob. After creating Collection section, we're going to build gallery. This section will consist of Title and Image Gallery, in which we will use J coury filter, so let's go ahead and get started. First of all, make the Comment gallery than end of gallery open section elements in order to make parting on top and bottom. Let's assigned to it Class P Y dish five than inside section Create container fluid, which will be wrapper off the content of the section. As we said, first part of this section would be titled, So let's go ahead and copied from previous section and paste it inside container. Because of that, we're going to have a white background for gallery. I'm going to make you some changes instead of text white class. Let's use your text muted, then change the heading right gallery. And also I want the line between having and paragraph to be dark. So let's assign to it class underlying dark, then go to styled out CSS file at first, right to comment Gallery, then end of gallery. Actually, this line will be similar to previous one. We just need to change the color. So let's go ahead and copy, Eat, then paste and add to class, name dark and then change the color. Making dark right? 888 All right, so the title is created the next we need to insert here list, which actually will indicate the group's off images that's open on ordered least actually did list to be in line. So let's assign to it put subclass listing line. Then inside you elements open at least item, which should have class list in line item and also for CSS and Jake. Worry proposes each list item will have additional class. Let's say gallery at least item. So the first list item I mean the first group off the images will be all which actually will include all the images. And also I want list item to be separated by forward slashes. So inside list item. After the word all, I'm going to open span elements and incident it forward slash then duplicate least item three times and change the group names we need to, you knew, then free and then pro list is created, but it looks really ugly. And also for the last list item that's delete span element. Because we don't need it. Then let's go ahead and using several boots of classes. Style those items. At first I want to place them in the center, so let's assigned to you element class text center, then transform tax into uppercase. Change the phone wait, make it bolt using phone. Wait both class and also make space on top and bottom right M white dash for All right, let's move on to span elements. We want to create some space between least items using margin on left and right that makes Dash five and also changed the color off them and make it great using text muted class. Besides that, I want to create some custom CSS styles for list items, so let's go to styled with CSS File Select Gallery list item At first, change its color. Make it gray right the color 777 that I want to change the course or into pointer when we most over the items and also I want to disable selecting the items using, use a select property with the value? None. All right. As for the list were done, it's time to go ahead and insert images after at least actually they will be wrapped with container, which is going to be Container Floyd. Inside container, we need another DIF. I'm going to position images using several flex classes. But for now, let's live this development. As it is. Each image will have its own container, so it's open another development and assigned to eat class filter, which done will be used in J Query and inside a development insert image. Let's indicate the source images, stash image, Juan Thought Jay Pek and for each image I want to define with as 300 pixels. All right, so the gallery will consist up 16 images. So let's duplicate 8 15 times. And before we make here some changes. I want to add to least items attributes, which is going to be data filter, and it will be used by J. Curry in order to filter images. As you see here we have four groups. I mean all new, free and pro, so as the values of data fields we need to insert here those group names. So right all that new, that free bent pro. All right, now, let's go ahead and make some changes. I'm going to change image names Besides that, we need to assign to developments classes randomly. I mean, H developments should have one off the classes from the group names, so let's go ahead and using multi coarser, select several developments and assigned to them class new. Then in the same way, select multiple dips again and assigned them second class, which is going to be free and do the same for the rest off the developments and assigned to them. Third class pro. As for the images, I'm going to name them from image. Want to image 16? So let's go ahead and do it quickly, all right, before we actually start programming the gallery, we need to make here some changes. As I said, images will be positioned using several flex classes, so let's go ahead and assigned to developments. The following classes 1st 1 will be display flex so you see that images are placed in the road because by default, flex rap is set as no rep So let's assign second class flex rep, and the last thing that I want to do here is to center those images. So let's use class. Justify Content center. All right, As far the HTML, we're almost done. It's time to start programming gallery using J. Corey. So let me explain what were going to do. As you know, those images have different classes, according to the group names, I mean according to new free and pro. So when we click on any of the groups were going to hide all the images and display only the images, which have proper classes. So, for example, if I click on new, then we need to show onto the images which have class new. And if I click on all, I want to show off the images. So that is our co. Let's go to script RJ's file. The first thing that I want to do is to attach click events to least items, so let's select gallery list item than attached to it. Click event with function the next. I want to create variable, which will store the value off collect list items, data filter attribute, so create variable college value which equals to this variable dot attribute and inside parenthesis right day to filter. So in order to manage whether we want to show or hide images, we need FL statement. The first I want to consider the case when the user clicks on all group item. So if the value equals to all, then we want to show all the images. So select all the developments which are rappers off the images using class, filter and attached to its method show this method can take an argument which actually is a duration of the showing process. In this case, I'm going to insert here 300 milliseconds. As for old group item were done. But for now we can see if it works and not because we need to program rest of the items. If the value off data filter attribute doesn't equality all and it equals to one off the groups. We need to hide all the images from other groups and show onto the images that belong to current group. In order to do that, we need to use else statements. At first, let's select all the developments using class filter and then I'm going to use not selector , which will help us to select all the images which do not belong to current group. I mean that all the developments which do not have class related to click group should be selected. So inside parenthesis we need to place dot plus value. So it indicates the class because we have the same names for data filter attributes, value and for classes off developments. So the images that we want to hide are selected on. In order to hide them, we need to use method called height and thats useful for the same duration 300 milliseconds . All right, so if we click on any off the group stand off, the images will be. He didn't accept the click group images. And then if we click on another group, we will lose all the images. Therefore minute years, something else. When we click on another group, we need to show the images related to that group. So let's select again developments using filter class. Then we need to somehow to match current data, filter value and classes off developments, and then show those matched images for that in Jake, where we have method called Filter, which as an argument will take again. Class. So it's right to your doctor, plus value. And in order to show the images, of course, we need to use Method called Show with duration. All right, so for now, gallery should work. Let's test it, click on different groups, and you see that it works. Okay, the only thing that we have to do before we finish this lecture is to make clicked group items active. Let's assigned to all group item close active item. Then let's go to the style that sees this file and change color off. Active item. Let's use your seven zero a e d to and then go to script OJ's file. So on Click. I want to make the clicked item active for that select again gallery list item. Then use your click events with the function. Next we need to use here this variable, which actually points to collect item, and we need to add to it. Class using at class mattered, which, as an argument, should have class active item, So let's click. And he said that clicked item changed its color, but all groups still maintains colorist active item. So in order to avoid that problem. We need to remove active item class from other lease items. For that, we can use your siblings and then method called Remove Cluster, which should have the argument as active item. So let's test again maximize the browser, click on groups and you see that everything works perfectly. All right, I'm going to check if this section is responsive on different break points. Let's make browsers smolder, and you see that here. We need to make little changes because on extra small screen size list is broken. Let's go to index dot html file for spun elements. We have class and X five and actually on smaller, extra small screen sizes. We need to decrease this margin. So that's insert here, break points empty for all spun elements and then add another class M X, dash three. Now you agree that it looks better. All right, so gallery section is finished. We have done a lot of things using boots rub and J. Coury. And also, before I go, I want to remind you one thing. At the beginning of this project, we said that we would use here standard J Coury city and link instead of Slim J. Corey Cdn because if we didn't do it, then we could not create showing and hiding effects that we have used in this lecture. To be more precise, images would show and hide with Slim Jake or Cdn, but without any effect. All right, that's all about I wanted to say, See you in the next video. 45. PhotoX Customers: all right, it's time to move on to the next part of our project. This section will be about customer opinions in the reviews, and in this video you will learn about how to create boots up Karos ALS, which is the part off boots of components. Corozal is actually a slight show, which works automatically and are so you're able to control manually changing this lights. Nowadays. It's very popular, commonly used, and I'm sure you frequently meet them on most of the websites. All right, let's go ahead and start creating new section. Let's ride comments customers then and off customers open section elements, and I want to make parting on all four sides. So it's assigned to eat class P dish five and also in order to change the background off the section from CSS that's assigned to eat additional class costumers. Next, as usually we need to insert here Container Floyd in order to wrap the content, and the first thing that I want to insert Inside Container is title. Actually, this title will be similar as title of collection because we will have kind of dark background, so let's go ahead and copied from collection section pasted and changed the heading Right Happy customers. Actually, for now, title is not visible because we need to change the background. So let's go ahead. Go to style that CSS file and right the comment, By the way, regardless of that, when it's here, just one line of code I always recommend to use the comments So it's right and of customers don't select section using class customers and change the background color. Right? You won 51 F 20 Okay, let's go back to index dot html file. So title is ready. It's time to move on and start creating Corozal. The first thing that I want to do is to create another role inside road. We need to have a column. Actually, I don't want to stretch slides on the entire page. So on medium on large and extra large screen sizes, I want to call him to take up half off the weight off the rope. So let's assign to the development class call and the six, and also I want to place it in the center off the road. So let's use your margin X photo, all right. It's time to actually start creating Corozzo, we need to open developments which should have classes. Corozal and Slide Corozal indicates that this development contains Corozal. As for this light, it gives to Corozal some CSS transition effects inside developments create ordered least in which we will create controls for slideshow. So inside ordered least let's create a list item and duplicated twice in order to become those controls. Visible unity assigned to Orwell elements Trip class Corozzo indicators. So you see three little lines for No, I'm not going to give them any functionality because I want to create a first slides and after that will be more easier to understand how Corozal actually works. All right. After ordered least unity, open new developments. It will have class Corozzo inner and actually this deal will be wrapper off the slights each content off this light will be wrapped with developments which should have class corozal item Also, I want to place taxing the center. So let's use your class text center and the first member off this life should be an image off the customer that's open image elements and in source indicate the path off the image. Right images dash customer one dot J. Peg. Also, I want this image to be Floyd, so it's a sign class image, Floyd. Then let's make the image rounded circle and also create some space around the image. Right, Margin five and the last thing regarding images to set it with us 1 50 pixels. So, as you see, the image is not visible, and the reason is that one of this lights always should be an active. It always should have the class active. Otherwise, Corozal won't be visible in this guy's will have just one corozal items, so it's assigned to eat class active. So now images displayed. And besides, the image I'm going to insert here some text which actually will represent review off customer. And I'm going to wrap this text with block quote element that inside blow quote insert paragraph with some text. I'm going to use your boots, a class called block quote, which gives to text some styles. Also, I want to make color off the text white and for paragraph, creates a space at the bottom right and be dash fight. All right, the next I want to insert your name of the customer, which will be represented as age five, heading elements with the name S Monica. Let's go ahead and give some stars to having. First of all, I want to change the color up it. Let's make it light, then transform, taxing to upper case. Then change front weight and make it bold and also create some space at the bottom right and beat Dash three. And the lusting regarding this slide is to create stars as a rating from customer. So let's create a new order. Least I want it to be in line. That's right. List in line. Also, create space at the bottom right and be dish five. Then inside you element open at least item with class least in line item. Actually, stars will represent it as fun, awesome icons. So that's open. I element inside L I and assign to it classes F A s F A dish star and also change the color . Make it yellow right text morning. So the first item is ready. Let's duplicate 84 times, All right, that's it about content off the car. A little item who will have three off them. So that's duplicate, ate twice and then make some little changes when it's a change. Images and name off the customers for a 2nd 1 we need to year to write custom or two as the name. Right, Jonathan, For 1/3 1 we need customer three and the name Hello. All right. So, as you see, we have three slights. They're all visible, and that's because all of them has class active. If we get rid off it, let's say from second and from third slides that they will be heated. Okay, actually, slights are ready. But for now, this light show isn't working. And in order to work it, we need to use some additional attributes which, behind the scenes using JavaScript will L. O corozal to work. So the corozal work in two ways. It will start working automatically when the page loads. And also user will be able to change the slights manually by clicking on controls. In order to achieve the 1st 1 we need to use a tribute called data right and assigned to each Reppert developments with a value Corozzo. So if I save it, then slideshow will start working automatically as the sea slights are changing with some interest. But for now, the controls didn't work. So let's go ahead and give them functionality again. We need to use some attributes. The 1st 1 is going to be an I D. And we have to assign eight to rapper developments with the value of customer Corozzo. This idea tribute should be connected to controls and for that, for each ally item, we need to use another attribute called Data Target, which should have the exact same value as idea has, I mean customer corrosive. For now, the control still didn't work because we need somehow to indicate which slide is going to be shown when we click on specified control. In order to achieve that, we need to use another attribute called Status Like to this attribute should have as a value index off slide, and you have to note that they are zero based. So in order to indicate the first light, we have two right here, zero for a 2nd 1 right one and for 31 2 let's test how it works. Click on the controls and you see that slides are changing properly. The last thing that I want to do before we finish this lecture is to set by default. First Control as an active, and for that we need to use class active. All right, So the Corozzo has created it, works automatically and also were able to change this lights manually. Besides that, it's responsive on all break points, so it's time to move on to the next lecture. 46. PhotoX Price Cards: Okay, So the most part of our third project is already created. There are left only a couple of sections in other. To finish this project in this video, I'm going to build new section, which is going to be for pricing. Actually, this section will consist of pushing carts. We will have three pricing cards with some content. And also, when we scroll down the page, date will be animated. So in this lecture, we're going to use some custom CSS for animations and also a little bit off Jake. All right, let's go ahead. Start building new section, right? The comments, pricing then and off pricing open section element. And I'm going to make the background off this section as light, then place the content in the centre using text center and also make putting on all four sites. Right, p dish fight inside section. We need to open container, which will be a gang container, Floyd and then inside container. I want to create title. Actually, title will be similar to Title of Calorie section because in both cases we have background light. So let's go ahead and copy the title from gallery section, then paste it and change the heading right. Join us. It's time to start creating the cards. For that, we need to open another role and inside role. We need column on large and extra large screen sizes. I want cars to be placed at the same level in one line and for the rest of the screen sizes . I want to break them. So in order to achieve that, we need here class call LG for then let's go ahead and create first card open developments with class card. Then inside card. We need card body which will wrap content off the card actually to consist of two heading elements. Then we will have least with several list items and at the bottom of the card, we will have a partner. All right beside card body, let's create first heading governments, which should be represented by H five with the content monthly membership. Let's transform text off the heading as opera case. Then make it bolt using fund. Wait, bolt and also make this pace at the bottom right and be dish five all right after the first heading. As I said, we need the 2nd 1 which actually will represent the price That's open H one heading element as the price right? 19 and in front, off the price. I want to place a dollar sign and actually it will be fun. Awesome. I come So it's open. I elements with Class F A s F A dollar sign and also in order to look the second having batter and bigger. Let's go ahead and assigned to H one element class display for So, as you see, we already have here some content in card. As I said after headings, we should have least with several least items. So let's open you elements. Actually, I want this you all to be on styled. So let's use your class least on styled. And then inside you element, let's create at least item with text photo shop that's make it bolds. Use your class phone Wait, bolt, and also make some potting on top and bottom. Right, Pete White Ash three. In the first card, we will have four list items, so let's duplicate it three times and change the content right after effects, then graphic design and video montage. Okay, so you see, that least is created. And the last thing regarding off the cart is to insert here after released bottom. Actually, I'm going to create button using link so it's open link elements and as a content right sign up, let's go ahead and assigned to link element classes like DTN, then make putting on all four sites. Might pee dish, too, transform texting to upper case and also changed the phone. Wait and make it both. All right, that's it. About the market off the first car. Let's go ahead and start styling it in order to create some CSS styles that's assigned to elements. Several additional classes for card with right card, Dash one, then for each list item when it here class car list item and for button right price card button. All right, let's go to styled with CSS file and first of all right to comment, pricing then and off pricing that select card elements using class cock dish one and then change the background as a background. I'm going to use your an image. So in your URL right images slash pricing card BG dot j. Peg, then right here, center as the position. Also, we need no repeat and write your last value cover. Then I'm going to make an image a little bit darker. Let's use for that linear Grady int with some RGB values right here. 000 0.6 and for second are to be a value right 000 0.5 and also make the shadow effect for card. Use your books. Shadow Property with the following values right, seven pixels, 18 pixels than 50 pixels and the color 555 All right, so we have here. Image backgrounds also shadow effect, but it's hard to see the content. Therefore, let's go back to index dot html file and change the color off the content. Let's assign to card development class text light and also did the same for the button right text light. All right now it's better. The content is visible. Let's go to style. It ceases file and continue creating some styles. I'm going to select card least item. I want to create the border at the bottom of the item with values one pixel group and make the color as light. I think that the border is a little bit big. Let's decrease the with off the item and make it 55% and also place items in the centre using marching auto. Now it looks better, but I think will be much better if we get rid off border from the last item. Let's do it Using bootstrap, go back to index rotational file and assigned to last item class Border zero. All right. As for the items were done, it's time to start styling the bottom. Let's go to style dot CSS file and select card bottom using class price card bottom. First of all, I want to change background color. Let's make it F 5593 D Then suddenly, with as 1 30 pixels. Also, I want to make border radius that's assigned to eat value as 25 pixels and then create a little shadow effect with values five pixels, eight pixels, 18 pixels and use your black called All right, so the bottom is styled and it looks good. I want to make hover effect. Let's copy close, then paste and at hover on hover. I want to change the background color. Let's make it F 9793 d and also move up to battle a little bit used transformed property than translate why, with a value of minus two pixels and as usually for better effect, let's use transition property with the value all 0.2 seconds. All right, Actually, first Carly's created. I just want to add to carve development several classes I want to make parting on top and bottom as p y dish for and also make some space using margin on top and bottom right M lighters for All right, so the card is ready. Let's duplicate column twice, and then we have to make some changes. Let's change the first heading right year. Unlimited access, then change the price right for 99. Also, I want to adhere. One more I come. Let's duplicate last one, then change the content. Right clip making and for previous item, lets the late border zero. As for the Foot column, let's change headings, right? Annual membership. As for the price, let's right 1 99 All right. Besides that, we need to change for second card class card one into cart, too, and also for 1/3 1 Let's use card three, and in order to share card stars for three off them, we need to add in style that sees his file. Those classes right dot card, too. And then that card. Three. All right, As I said at the beginning off the lecture, I want to animate those cards. So when we scroll down the page and rich to that section, I want first car to be appeared from the left side, 2nd 1 from bottom and 31 from right side. In order to create those animations. As you already know, I'm going to use key frames. Let's go ahead and for each card, create animation. Let's start from the 1st 1 Create key frames. Call it move from left because, as I said, I wanted to move from left side. So at this starting point, I mean on zero person, I want to place car at the left side. So let's use here. Transform property that translate X with the value minus 100 pixels. And also I want to make it hidden, using up a city with the value as zero. When the animation and Simon on 100 person, I want the car to be returned on its own place. So let's right. Try as far translate X with zero and also make it visible right, Capacity one. All right, so the animation for first card is ready. Let's duplicate it and make some changes. I feel third car. Let's change the name and college move from right because I want third car to move from the right side and also change the value off translate X property. We did hear 100 pixels, so let's remove the minus sign. As for the second car, let's duplicate again animation. Change the name right. Move from bottom in order to move the card from bottom to top instead of translate property , which moves the element horizontally, we need to use translate why, which is used in order to move element vertically. All right, so the animations are ready. And as it was in previous cases, we need to create new classes with several animation properties and then using J. Coury, we need to assign those classes to cards so create 1st 1 for first card. Let's call it proper name. Move from left and assigned to two properties. 1st 1 is going to be animation name with name move from left, and the 2nd 1 should be animation duration with two seconds, then duplicated twice and change the names of classes and animations For a 2nd 1 we need move from right and for 31 move from a bottle. All right. As foresee assess. We're done. It's time to go to scream. Blue Jays file. Let's select over Indo and then add to eat scroll method with function inside function, I'm going to create variable. Let's call it position and assigned to eat this variable with the method Scroll top. Before we add the classes to card elements, I'm going to choose the right position where we want to start the animation. So let's log in council variable position that inspector page, open council and scroll down the page. So I think that would be good if we indicate the position somewhere close to 4300 pixels. So let's go ahead and use FL Statement as a condition. Let indicate position greater than or equal to 43,000 pixels. So if this condition is true that we need to assign to 1st 2nd and third cards proper animation classes that's select Force one using class carp dish one. And use a method called ed class with an argument move from let then duplicated twice and change the cards. We need your cards, too, then caught three and also changed animation names, right? Move from bottom and moved from right. So if the condition is false, I mean, if the position is less than 4300 pixels, then we need to remove those classes. So let's create l statement than copy those lines paste and change ed class into remove cluster. All right, so now the animations should work. Let's scroll down the page and you see that it works. And I think that it's really nice effect. All right. Before we finish this lecture, I want to create little heading with front off the Michael down below. After the pricing cards, let's go to index dot html file and create development inside the deep Create age to heading government with the text. Thanks for being with us and then after heading open I elements for it classes F. A s have a coffee and also make it bigger. You see your class at my dish three x. I want to create some space on top and bottom on the development. Let's assign to it class and why dish life then change the color of heading, make it great using text muted class and also create some space at the bottom of the heading right and be dish for all right. Before we finish this lecture, I want to do one more thing. Let's place cards in the centre horizontally in a row. For that we have to assign to row class flying items center. All right, Actually, that's it. We're done. Let's check if this section is responsible. Different break points and you see that we have here a little problem on larger screen size . The weight off cards become bigger and they look really ugly. In order to solve this problem, we have to set marks with property for cards, right mugs with and started as 400 pixels. Now you agree that they look, but let's make browser smaller, and you see that on smaller screen size cards are not placed in the center. Let's go ahead and fix that problem as well. For that we need to assign to each card annex federal, and you see that now it looks good. All right. Finally, we're done with pricing section. I hope you like it because we have used some nice and modern effects, so it's time to move on to the next election 47. PhotoX Contact: it's time to go ahead and start building our next section, which actually will be last one because after it we're going to create footer and finish our third project. In this video, we will build Contact Section, which will consist of several four elements and also will use some modern and advanced techniques using CSS. All right, let's jump in and get started for the fall. Create comments, right contact, then end of contact, then create section elements and the first class that I'm going to assign to it is contact for custom CSS and also make parting on all four sites. Right P dish fight inside section open container, which is going to be container fluid, which then will be followed by row and then inside Rolling It column, which will wrap form elements on large and extra large screen sizes. I wanted to take up 5 12 off the row, so it's assigned to it class call LG fight. As for the rest, off the screen sizes will make this section responsive using CSS media chorus Also, I want to make parting at the bottom right P b dash for all right. The first thing that I want to insert inside. Calm is heading. Let's open H three heading elements with tax Get in touch. Let's make it looking a little bit better. Use your class display for and also make some space at the bottom off the heading right and be dish five. After having elements I'm going to open for which will have additional class for CSS, that's a contact for inside form. Will have to import elements with labels for name and email address. Then we have input for checkbooks and also button for submitting before. So let's open development, which will group input and label for name. It will have class, form group and also make potting on top and bottom right P White ash for inside formed group. Let's create April Element with type text and assigned to it several classes. The 1st 1 is going to be farm control. Then create some space at the top and bottom right M y dish, too. Then make putting on all four sites. Pete Best to and also for custom CSS at your class input. Besides that, I want to use here placeholder attributes with the text name. Okay, as usually when you work with folks you may use at first label and then input. But in this case, I want to use kind of different technique. And for that we need to insert label after input element, then add to label for a tribute. Actually, this guys, we don't need it. But anyway, let's assign to each value as name and then we need to you class for CSS. Let's call it label and also place your text as Nate. All right, that's duplicate for Group. Once we need 2nd 1 for email address, let's change type and four attributes, right email and also change placeholder and the label text right email address. All right. After that, we need one more form group for checkbooks. Let's open development with class form group, then make parting on top and bottom right P y dish for and also makes in space on top and bottom Right M. White is for inside the development. I'm going to create input with type checkbooks and by default, I want to make it checked and then, after input, create label with four attributes. We should have the value as check and also insert you text said announcements. All right, and the last thing that I want to insert inside. Formal with his bottom with type, submit and with text. Let's say subscribe. Let's go ahead and assigned to button elements Several books of classes when it here, BT and then make it between Block. I want to make some parting on all four sides. Right? P two. Don't change the phone. Wait. Make it bolt. Also, make text uppercase. Use your class text uppercase and for CSS. Let's assign to it additional class. Let's say submit button. All right, that's it for now about HTML. Let's go ahead and start styling this section. Let's go to style that sees this file and first of all, make the comments my conflict than end of contact. So the first thing that I want to do is to work on background. Let's select section with class conflict and at first as a background, I want to place an image. So in your URL, that's indicate the path off the image, right images slash for image that J peg then at your several values like center, then again center then no repeats And right here, less limb forward slash cover Now the next that I'm going to do is to change background color off the section. But I'm going to do it only for a left part of it where we have form elements. I will do it using linear ingredient. And besides just changing background color, I'm going to give it nice shape using mention property. At first, let's write code and then I will explain how it works. Use your linear radiant, then inside parentheses as a first. Well, you right, 105 degrees. Then we need are to be a value with color, right? 21 31. That 32 and as opposite the right one. Then we need 0%. After that, use another are to be a value, actually with the same color, right? 2131 32. And as capacity right 320.95. Then place your 50% transparent and again 50%. All right, so you see that we have nice background effect, but you may don't know how this code actually works as a first value off linear grading property we have here 105 degrees. It actually is the size of corners where background is split. I mean, those two corners in order to see it better. Let's change this value and make it. That's a 90 degrees, and you see that section is split in two equal size parts and the corners became perpendicular, so you can play around with it and change this value as they wish. But I think in this case, one or five degrees is perfect, and it looks modern, all right. That's the vaunted in next values. But at first I want to break this line in order to see the code better left side off. The background consists off those two values we have here 0%. It actually defines from where we want to mix those two colors according to the capacity it's for the 50 person. It means that this color will take up half off the background. For example, if we're right, you're 70%. Then 70 person off bare ground will be dark. Okay, lets get back here 50%. That's for the second part. It allows us to make the rest of the background transparent. For example, if we write your instead of 50 person, let's say 60% then transparent background will start after 60 person from left to right, and the 10 person, which is common for both bellies, will be mixed. I know that it seems little bit confusing and complicated. So would be better if you test it on your own and play around with different values. All right, let's get back here 50%. As for the background were done, let's go back to index dot html file and change the color of heading. I'm going to make it a white and also let's assign to the last label close text white as well. All right, it's time to move on and style inputs. Let's select them using for US input. At first I want to change the background and make it transparent. It's right, background, transparent, then make the border color transparent as well. Fight, border color Transparent. We're doing that because I want input to have border only at the bottom. So let's select border bottom with the following values right to peaks us solid and as a color right, C C c. As you see, we have here little border radius and actually it doesn't look good by default from control class assigns to input border radius so Let's go ahead and overwrite it right? Border radius and make it zero. All right, so inputs are styled. But if we focus on them, then you will agree that they look ugly, so we need to make you some changes. Let's select again, input and at focus. As for the background and border color, we need the same, so it's copy them and paste. Then if we focus again, you will see Hugh something like border. But actually, it's not border. It's a box shadow effect. So let's go ahead and remove it. Right both shadow. No. Also, I want to change the color. That's right, your color. F f f. All right on focus. I want to change color off the border bottom. So let's select it and write you the following values two pixels solid and change the color . Right F 5593 deep. And the last thing that I want to do is to use transition property in order to change the color of border bottom with a nice effect. Let's use here values all and 0.8 seconds. Now I think that it looks nice. All right, let's move on to button that selected to using class, submit button, change the backgrounds and make it F 5593 de and also changed the color and make it light. All right, I want to add some hover effective button Select again. It's then at hover change the background and make it f 9793 D and also move up, but a little bit used transform. Then translate why minus three pixels and again use your transition property with the value all 0.3 seconds. All right, but it is ready, and it's time to move on to labels. Actually, I want them to be heating by default and then when we start typing, make them to be appeared nicely at the top off the input. Imagine that the placeholder is moving up when we start typing. Okay, let's go ahead and start creating this effect. At first, I'm going to define styles for label, which we want the label to have when we start typing in input. As I said, I won't label to move up nicely, so let's elect label elements change its color making gray using 777 that then make it block level element right display block and also change its position. I want to place them at the top off the input. Let's use your margin top with the value minus 60 pixels and then use margin left with value four pixels. So, as you see, label is placed at the top off the input. But I think that we need some more space between them. So let's change 60 peaks. Listen to let's say 70 Peaks is, and I think that it's better. No. All right. Lusting regarding label is to decrease its phone size. Let's make it 13 pixels. So the position off label I mean, where we wanted to be appeared. When we start typing is defined, and now it's them to define its default position. So when the placeholder is shown, I mean, before we start typing, I won't deal able to be hidden somewhere behind the put. And for that we have to select input elements done in, CIA says we have selector called placeholder, shown using this elector weaken define styles which we want the element to have while placeholder is showing. In this case, this element is label and to remember when we created labels we have placed them right after input elements. So in order to select them, we can use your plus sign, which selects the next immediate sibling off the element. And in this case, it's label in order to place label a little bit down and also a little bit on the right side. Let's use here transform property with translate. We should have values 20 pixels and then 20 pixels. So you see that label changed its position. And now, in order to hide the elements we have to use following properties, right, opacity zero, then visibility on making heating. All right, let's start typing. And it said, that label moves up and it becomes visible, and I'm sure that you have all of the guests we need here transition property to make this effect. Looking better all 0.3 seconds. Now you agree that it's really nice. All right, Actually, that's it. We're done with Contact section. Let's check how it looks on different break points on large and extra large screen sizes. Everything looks good. Let's make browser smaller, and you see that we have to make you some change. As I said, I'm going to use CSS media because using pure bootstrap. We can make this section responsive on smaller screen sizes. I won't use just linear Grady in as a background without an image, so that's right at sign than media. Then we have to indicate as a break point large screen size. I mean, we have to use your marks with with the value 992 pixels. Then select Conflict section and change the background. Right, linear, radiant with our to be a values right 2131 32 the opacity one. And for second rgb value. That's right. 21 31 32 capacity as point 95. So as the sea background has changed. But besides that, if we make problems a little bit bigger, then you agree that we need to decrease with off form element and also place it in the center. So it's elect contact form and set with us 80% that also margin Amy. All right, so on smaller screen sizes, contact section is responsive, and we can say that finally we have finished building it. I hope it was interesting for you because we have used here some mother and nice effects and now it's time to move on to the next lecture in which will finish building our third project. Let's go ahead. 48. PhotoX Footer: all right. It's the last lecture for 1/3 project, because in this video we're going to be building Footer and we'll finish. Our third project footer will consist of four different parts. They will be wrapped with four columns, and each of them will include some content arrived. Let's go ahead and start creating it right? Comment footer then and a footer, then open html five footer element, and I'm going to make its background dark. So let's assigned to it class beauty Dark and also make some potting on left and right side . Using P X Dash five. Inside footer, we need container and again container fluid, which then will be followed by rope. The text inside row will be light, so it's this year class text light and also makes imparting on top and bottom right P. White dash for all right, as I set for terrible, consistent for different parts. So we should have four columns, but actually they will take different with for 1st 1 I want it to take up 1/3 off the road , but I wanted on large and extra large screen sizes, so let's create deal with class. Call LG Dash for for the medium and small screen sizes I want here, call as, um, Dash six. As for extras, most queen size each part of the footer will automatically take up the full with. So let's duplicate 83 times for second and for third columns. I want them to take up 1/6 off the road, So let's change your class called LG four into called LG to. As for the fourth column, I want for it called algae for Celeste, living as it is. Okay, so the columns are ready. Let's go ahead and start working on the 1st 1 It will consist of having and paragraph let's open age five, heading elements with text about us and also make some potting at the bottom use here. Class PB, Dash three. After heading, create paragraph with some text, and also I want to make text a little bit smaller. And for that in boot trip, we have class called small. All right, that's it about first column. Let's go ahead in the work in the 2nd 1 Actually, it will consist of heading and least in which will be represented navigation items we need here. Same type of heading. So let's go ahead and copied from previous column paste and change the content right? Visit us, then open on ordered. Least I wanted to be unstuck, so it assigned to it class least on styled inside a Nor did least let's open least elements , then open link elements with the tax hope I'm going to assign to link class for custom CSS . Let's call it Footer. Link that duplicate least item six times and changed the names off the items for the 2nd 1 we need to your mission. Then it will be followed by collection, then for the next one right gallery than customers. Then write your pricing and for the last one right contact. All right, let's go to sell that, sees his file and create some custom styles. I'm going to write just couple of lines of code, so it's right here at First Commons footer than and off footer. Then select foot or link. I want to change the color off the link. Let's make it light and also change the phone size right here. 13 pixels. Besides that, I want to create some little hover effect. Let's select again foot link, then add hover on hover. I'm going to change the color of the items. Let's use your call or 70 a e d to. Also, I want to get rid off. Underline using text decoration property, which would have value none and use again transition property with the values all 0.3 seconds. All right, that's it about CSS. Let's go back to index dot html file and start working on the third column. It will consist of heading and list again, but in this case, list items should be for something like Contract to Support that's again copied. Heading from previous column pasted and change the text, right, I need help. Then open all these elements, which again should be at least unstylish. Then inside least open ally elements, which will be followed by Link again with the text customer service. Actually, for those least items, I want to use the same CSS style, which we have used for previous items. So let's go ahead and assigned to it same class called Footstar link, and also I want to make text uppercase. Use your class text uppercase. Let's duplicate. Least I don't three times and change the content for a 2nd 1 right online chat, then we need support. As for the fourth item, I wanted to be email address, so it's right here. Let's say photo eggs at gmail dot com and also get rid off those classes. We just need to change the color off the text. Let's make it in Fort. All right, Third column is ready. Let's go ahead and start working on the last one. It will consist of having little paragraph. Then it will be followed by form elements and down below. We will have several social media icons which will be represented by phone awesome icons. So again, let's pace you're heading with text. Stay connected then, after having elements, opened paragraph with some dummy text and also make it smaller using class smoke. Next, as I said, we will have form elements. Actually, it will consist of input and button, which will be attached to each other. So let's create inside form elements. The which should have class called input group than inside here. Input element with type text. Also, let's assign to each class from control and at your place holder with text email address in order to attach bottom to input. We need this bottom to be wrapped with developments which should have class called input group A plant and then inside the deep create bottom with type bottom and with Tex sign up . And also I'm going to start this bottom using several boots from classes. The 1st 1 is going to be DTN. Then change the background, making the red using Bridget Danger. Then I'm going to change the color off the text, make it white, also make it uppercase and also change the phone. Wait, Make it