Materialize CSS Framework + 1 Project

1. Introduction: Let's see what Materialize is and why use it, Materialize is a front-end framework. 00:00:08.400 --> 00:00:15.600 What does this mean? that will help us as web designers to review the entire interface of 00:00:16.000 --> 00:00:23.000 user of a web application that we are developing or an application for mobile devices, was 00:00:23.000 --> 00:00:31.700 created and designed by Google in 2014, so it has been in production for four years is also similar 00:00:31.700 --> 00:00:36.300 like Bootstrap and Foundation which are other design frameworks. 00:00:36.400 --> 00:00:43.500 The objective of Materialize, is to provide web developers with the development of the appearance of 00:00:43.500 --> 00:00:50.600 different projects and mobile applications, what helps us in this case is to save a lot of time. 00:00:50.701 --> 00:01:00.000 Being able to focus on what we really need as developers. Why learn Materialize? because it is 100% 00:01:00.001 --> 00:01:06.900 adaptable to mobile devices, it is very easy to implement. 00:01:07.001 --> 00:01:13.900 We can build websites with very little knowledge and there are many interactives designed with JavaScript 00:01:14.901 --> 00:01:22.800 100% adaptable means that with a single design that we make, we will adapt 00:01:22.901 --> 00:01:31.200 to any screen where we see the web page or the application. Thank you very much. 00:01:31.201 --> 00:01:38.600 In the next video we are going to start the practice now and begin with the installation of Materialize. 2. What is Materialize and why use it?: Let's see what Materialize is and why use it, Materialize is a front-end framework. 00:00:08.400 --> 00:00:15.600 What does this mean? that will help us as web designers to review the entire interface of 00:00:16.000 --> 00:00:23.000 user of a web application that we are developing or an application for mobile devices, was 00:00:23.000 --> 00:00:31.700 created and designed by Google in 2014, so it has been in production for four years is also similar 00:00:31.700 --> 00:00:36.300 like Bootstrap and Foundation which are other design frameworks. 00:00:36.400 --> 00:00:43.500 The objective of Materialize, is to provide web developers with the development of the appearance of 00:00:43.500 --> 00:00:50.600 different projects and mobile applications, what helps us in this case is to save a lot of time. 00:00:50.701 --> 00:01:00.000 Being able to focus on what we really need as developers. Why learn Materialize? because it is 100% 00:01:00.001 --> 00:01:06.900 adaptable to mobile devices, it is very easy to implement. 00:01:07.001 --> 00:01:13.900 We can build websites with very little knowledge and there are many interactives designed with JavaScript 00:01:14.901 --> 00:01:22.800 100% adaptable means that with a single design that we make, we will adapt 00:01:22.901 --> 00:01:31.200 to any screen where we see the web page or the application. Thank you very much. 00:01:31.201 --> 00:01:38.600 In the next video we are going to start the practice now and begin with the installation of Materialize. 3. Color palette: Guys in this case we are going to see all the part of the colors that have Materialize, then we are going to start 00:00:06.200 --> 00:00:13.900 first of all explaining what this "card-panel" class that I already have at this moment is for. 00:00:14.000 --> 00:00:21.700 Here I have a structure of what I already have, here it is, this first class of "card-panel" what makes us 00:00:21.700 --> 00:00:28.800 is to create this little shadow that this box here has, if I remove it there we can see that it is no longer 00:00:28.800 --> 00:00:33.500 have, ready then the colors 00:00:33.500 --> 00:00:38.400 We already know that all that we are going to enter with Materialize, we are going to enter it through the classes, 00:00:38.500 --> 00:00:40.800 everything that has to do with styles. 00:00:40.900 --> 00:00:46.400 If I want to put a background color, I put a class and I put the color I want in English. 00:00:46.400 --> 00:00:57.400 In English there are almost all the colors and there we can see that if I want to add a color to it 00:00:57.401 --> 00:01:06.700 tag "h3", what I do is not only put the color but also has to put "orange-text" 00:01:06.701 --> 00:01:08.700 Then this would serve for the text. 00:01:08.901 --> 00:01:16.800 There we can see, there is another class that we are going to use a lot in the course of the course, which is the class 00:01:17.201 --> 00:01:25.100 of "container", this one what we are going to do is box in a box and put a width of 70% 00:01:25.101 --> 00:01:33.800 and focus, as it is here in this case, I can apply the label of the class 00:01:33.901 --> 00:01:40.500 the class attribute to any label, putting the color I want with the dash. 00:01:41.801 --> 00:01:50.400 There we can see, if I want several tones I go to "CSS / Color" and I can 00:01:50.401 --> 00:01:53.800 see all the shades that Materialize has. 00:01:53.802 --> 00:02:02.800 For example, if I want a pink color, this "lighten", what it does is list the saturation that goes from 00:02:03.302 --> 00:02:08.400 this is the natural color, it is the original color. 00:02:08.402 --> 00:02:17.100 Sorry, the color is there and with their performances it is from 1 to 5, so there are some that change. 00:02:20.102 --> 00:02:25.200 There we can see all the colors, if I want transparent I use transparent, later we will 00:02:25.202 --> 00:02:29.200 see then I will be an example for you to continue 00:02:32.202 --> 00:02:39.700 practicing all the colors that this pink one has, for example, I'm going to put this one here. 00:02:41.202 --> 00:02:47.100 And if I put it like this, what will happen is that I will put the background color, I want it to be put in the text 00:02:47.802 --> 00:02:50.000 the color in the text. 00:02:50.002 --> 00:02:59.500 So I say "pink-text accent-3" and if I want to, the original color is getting me there, here I have to put "text-accent-3" 00:03:00.003 --> 00:03:02.200 to change the key. 00:03:02.703 --> 00:03:04.800 So it may not show much. 00:03:04.803 --> 00:03:11.500 We're going to change the hues on these here, to see how it works. 00:03:12.003 --> 00:03:27.600 This is going to be 5, 4, 3, 2, so I can see the shades it has, this is red, we are going to put the color as such. 00:03:27.603 --> 00:03:37.200 So there we can see the tones as they change, so I leave them for you to continue practicing 00:03:37.203 --> 00:03:37.000 all parts 00:03:37.003 --> 00:03:44.400 of the colors, you can be guided by this document that I leave you in the description of the video and see you 00:03:44.403 --> 00:03:49.000 right now continuing with the columns of materialize. 4. Grid system: This time we are going to look at how the materialize columns work, the materialize columns 00:00:08.100 --> 00:00:15.400 is how can I distribute content across the screen with columns. 00:00:15.500 --> 00:00:23.000 In Materialize it is defined that the columns, the maximum that I can define is 12 columns, so we are going to 00:00:23.000 --> 00:00:25.900 give an example that in practice is where you see how it works. 00:00:26.400 --> 00:00:34.000 So for that I must create a tag "div" with class "Row" and inside that mean rows and inside 00:00:34.000 --> 00:00:46.900 Those rows I am going to create a label "div.col.s1 * 1", and I am going to explain what that 1 is for. 00:00:47.000 --> 00:00:57.900 and I'm going to tell it to multiply by 12, so here I'm going to say 1 column, 2,3,4,5 00:01:01.301 --> 00:01:12.300 10, 11, 12, so there we can see that I can distribute 12 columns on the screen, in this case I 00:01:12.401 --> 00:01:21.500 appears up to there because I have the "container" class that is putting the screen at 70%. 00:01:21.501 --> 00:01:29.800 But here I can distribute my 12 columns, as it is in this case; let's color them to see how 00:01:30.701 --> 00:01:32.000 is working. 00:01:36.401 --> 00:01:37.200 And here I am going to put you. 00:01:45.101 --> 00:01:46.800 So let's see how it works. 00:01:47.301 --> 00:01:55.000 So there are the 12 columns that materialize has, which I can distribute. 00:01:55.502 --> 00:02:04.800 So I'm going to explain what this s1 means, this s1 what it will do is optimize the screen size 00:02:05.802 --> 00:02:09.100 on the mobile device. 00:02:09.302 --> 00:02:15.900 Here, this is how it will appear on the mobile device, if I have not declared the "m" for it, it will put me in 00:02:15.902 --> 00:02:21.000 all, the "m" is for medium screens and the "L" for large screens. 00:02:21.002 --> 00:02:23.500 Let's put this to work as it should. 00:02:24.202 --> 00:02:35.900 So I want large screens, that is, laptops to have a class "m", let's go 00:02:35.902 --> 00:02:36.200 Let's see 00:02:39.502 --> 00:02:46.900 "m1" when on the large screen, it measures a column, but when on the small screen it 00:02:46.002 --> 00:02:48.800 I distribute two columns. 00:02:48.802 --> 00:02:57.300 For that I have to say that these measure 12, then when this one measures me 6 and this one measures me 6 00:02:57.703 --> 00:03:05.100 what it is going to do is distribute itself in 2 columns, because when it reaches 12, the next column goes 00:03:05.303 --> 00:03:08.700 locate at the bottom, let's see how it works. 00:03:08.703 --> 00:03:10.600 So they can see it here 00:03:14.703 --> 00:03:15.500 we'll see. 00:03:16.303 --> 00:03:22.800 So there it is, when it is on the laptop screen, 12 columns will appear. 00:03:23.403 --> 00:03:30.200 because I have it distributed in one column, but when it is on a mobile device, they will be done in two columns 00:03:30.203 --> 00:03:40.800 because I have to be six, then there it is, there I have a small error, I am going to correct it at once 00:03:45.203 --> 00:03:56.800 sorry! , this one, ok so there we can see that when I am on a mobile device, they will find me in two columns. 00:03:56.904 --> 00:04:03.600 When I am on a big screen, they will place me one column at a time, then I can start playing 00:04:03.604 --> 00:04:09.300 With all this, if I want it to be placed in three columns when I am on the big screen. 00:04:09.304 --> 00:04:16.200 So I put four to measure 12, and when 12 is measured, the other column will be 00:04:16.204 --> 00:04:17.300 in the bottom. 00:04:17.404 --> 00:04:25.600 So we are going to modify this, so that one remains in three columns, then I remain in two columns and then 00:04:25.604 --> 00:04:27.200 I have a column. 00:04:27.304 --> 00:04:39.100 That is 12; Here I can tell you, four columns have to be measured by three, 3, 6, 9 00:04:39.804 --> 00:04:40.600 and 12. 00:04:40.804 --> 00:04:44.000 And this last one with two columns each. 00:04:44.504 --> 00:04:46.200 Let's look. 00:04:46.604 --> 00:04:52.200 Here it does not change because we are on the mobile device and the "s" that is mobile and that I did not modify anything. 00:04:52.205 --> 00:05:00.800 I modified when they are on the big screen, so there we can see in the first one. 00:05:00.805 --> 00:05:05.900 I have to be 3, 4, 8, 12 so here I have one two three columns 00:05:09.405 --> 00:05:13.900 three columns, one, two three, we're going to change the color here. 00:05:16.905 --> 00:05:19.600 To those two, we are going to tell this one to be black 00:05:22.405 --> 00:05:29.600 So there we can see the first one will have three columns, the second has two columns and the third has one 00:05:29.605 --> 00:05:38.100 column because it is "m12", and the other has four columns. 00:05:38.105 --> 00:05:42.600 Why is it in three, I can do this in this one. 00:05:42.605 --> 00:05:50.600 same row, or I can create multiple rows and organize this a little better 00:05:51.305 --> 00:05:57.600 I can locate this here 00:06:00.906 --> 00:06:03.400 so that you leave me a space in this column. 00:06:03.906 --> 00:06:07.800 Here we can see that in the first "row", in the first row. 00:06:07.806 --> 00:06:16.200 I have three columns, as in this case and here when I am on my mobile device, what will happen? 00:06:16.406 --> 00:06:22.000 There we can see that on the mobile device I have a column of 6, another de 00:06:23.406 --> 00:06:24.400 and another 6 00:06:24.406 --> 00:06:26.600 That's why I have this space left over. 00:06:26.806 --> 00:06:32.500 I want that when it is in the device, it remains 12 columns. 00:06:33.306 --> 00:06:44.300 That is to say, complete, then here it is, there we can see how they are all accommodating in the last one, I will give the same 00:06:44.306 --> 00:06:53.000 to accommodate, as in this case, if you have questions about the "Grid", you can leave me comments 00:06:53.006 --> 00:06:56.100 and I am going to be very pending to solve them. 00:06:57.107 --> 00:07:05.000 So there we can see how I can create several columns and distribute them in the way I want. 00:07:05.007 --> 00:07:10.800 It is time for you to start playing with those columns and start practicing, if you have doubts 00:07:10.807 --> 00:07:18.700 I remember you can ask all the questions you want in the comments, see you now to continue 00:07:18.807 --> 00:07:20.700 right now with the "helpers". 00:07:21.207 --> 00:07:22.400 In the next video. 5. Helpers: Well here we are going to see everything about the "Helpers", which are aids that allow us to use materialize, as in this 00:00:09.300 --> 00:00:16.300 case, I have classes that are to center the texts, align them to the right or to the left, as is 00:00:16.300 --> 00:00:23.100 here, I have another class that is "overable", which is when I pass the mouse over it it gets 00:00:23.100 --> 00:00:31.800 a shadow and another is that the "truncate" class is what makes us hide the text when 00:00:31.800 --> 00:00:33.800 screen is being switched. 00:00:33.000 --> 00:00:45.100 There we can see how the text is hiding from us and another class that I have is the class of 00:00:45.100 --> 00:00:54.400 as in this case here "hide-on-small-only" hide only on the smallest device, hide me 00:00:54.401 --> 00:01:01.500 this "card-panel", then as I have it here, when it is on the small screen it will hide from us as it happened in this 00:01:01.501 --> 00:01:09.200 In case, the "card-panel" is no longer there, but if we put another screen it will appear again. 00:01:09.401 --> 00:01:17.100 So let's see what I have in the code, here I have the class "center-align", there I can tell you 00:01:17.101 --> 00:01:29.300 also that it is "left", that if it aligns us to the left, I can say "righh", I can say only "right" too 00:01:29.301 --> 00:01:38.900 without putting the "center", but what happens is that it takes away the margin that it has so we need 00:01:39.001 --> 00:01:49.800 to continue with the same margin, so that we only have the title, then as in this case "right-align" 00:01:49.901 --> 00:01:59.200 Another class is "truncate" which is going to show us the points when 00:01:59.202 --> 00:02:07.900 it is hiding the text in another screen and we can see, another class that I have is the "hoverable" 00:02:08.102 --> 00:02:14.000 The one that I just showed you when I pass the mouse over it, here I have the class "right" that aligned the text for me 00:02:14.002 --> 00:02:17.100 on the right 00:02:21.802 --> 00:02:29.700 and I have the class "hide-on-small-only" that will hide the "card-panel" when it is in the 00:02:29.702 --> 00:02:43.300 smaller device, as we can see here, there are also other "hide-on-med-and-down" classes that 00:02:43.302 --> 00:02:51.000 What this class is going to do is hide the text from us, this "card-panel", I can also put this class on it 00:02:51.102 --> 00:02:57.500 just the text, in case I have many more things in the panel then I can do this. 00:02:57.703 --> 00:03:10.400 Let's say I have another "h4" and I only want to hide that text, this title, I want to hide it 00:03:10.403 --> 00:03:15.800 when i am on the medium and smallest device i am going to save and 00:03:15.803 --> 00:03:18.700 I'm going to update, then there it is. 00:03:18.703 --> 00:03:26.800 I have my two titles and when I am on a medium screen, the title that I put that was hidden 00:03:26.803 --> 00:03:35.500 hide in the middle screen and in the smaller screen, here I have other classes that I'm going to 00:03:35.503 --> 00:03:37.400 leave for you to practice. 00:03:37.603 --> 00:03:47.300 If we enter the "Helpers" part of Materialize we can see, we already use the "hoverable", we already use the "truncate" 00:03:47.303 --> 00:03:57.100 We use these from here, and what we need is to use these that I leave them for you 00:03:57.104 --> 00:04:05.000 practice putting what is hidden on the device, hiding only on the middle screen, hiding 00:04:06.204 --> 00:04:14.800 in the middle screen, hiding in the measure and the big one hiding only in the screen 00:04:14.804 --> 00:04:24.300 large, show only on the small screen, and the others that are here, then 00:04:24.304 --> 00:04:29.100 I'll leave you there to practice, see you in the next class. 6. Average CSS: In the "Media" part of css, we are going to use three classes; one class is to circulate the images. 00:00:07.300 --> 00:00:13.700 Other class is to make the images responsive, when we are on other screens and another 00:00:13.700 --> 00:00:18.000 classes is to make the videos responsive when we are on smaller screens. 00:00:18.000 --> 00:00:20.900 Let's see how it works. 00:00:21.100 --> 00:00:27.800 Here we see how the image adapts depending on the screen where we are located. 00:00:27.000 --> 00:00:36.800 For example if we are on the screen of the smallest mobile device, we can see how the image and 00:00:36.800 --> 00:00:40.400 the video is adapted, we can see it here. 00:00:40.400 --> 00:00:49.700 Here I have my image, I have the class "responsive-img" and that makes my image adapt to the screen. 00:00:49.800 --> 00:00:59.400 I also have the class "circle" which is what makes this image go in a circle and I have the class 00:00:59.401 --> 00:01:08.200 in the "responsive-video" video that makes the video fit the screen, we can see that if not 00:01:08.201 --> 00:01:09.300 I have this class 00:01:12.201 --> 00:01:18.700 on the screen the video will be extended and I have to scroll all over the screen to be able to see it and 00:01:18.701 --> 00:01:21.500 Same goes for the image class. 00:01:21.601 --> 00:01:29.400 If I don't have it, I have to scroll to see all that complete image, this is what is in the middle part 00:01:29.901 --> 00:01:37.800 to be able to optimize images and videos on smaller devices. 7. Press: In this case we are going to focus on the Materialize part of Pulse, this pulse has a class 00:00:09.100 --> 00:00:15.400 which makes the buttons more striking, such as if I have a promotion on my website 00:00:15.700 --> 00:00:19.600 and I am giving importance to it. 00:00:19.600 --> 00:00:23.900 I need you to click that button. 00:00:24.100 --> 00:00:33.500 I put them as in this case, we are going to see what there is, in this case we are going to focus not only on 00:00:33.500 --> 00:00:39.400 the "pulse" class, which is what will make our button have that effect that we are seeing in 00:00:39.400 --> 00:00:40.700 this moment. 00:00:40.900 --> 00:00:47.100 I have four buttons, we see that they have icons, for example this one has an icon, but later we will 00:00:47.100 --> 00:00:49.000 to focus on the part of the icons. 00:00:49.000 --> 00:00:57.300 I want in this case, we only focus on the class that "Pulse", which is the one that does 00:00:57.801 --> 00:01:02.200 that we see that effect as it is here, to make that button more striking 00:01:06.301 --> 00:01:07.200 here we can see. 8. Shadow: Here we are going to focus on the part of "Shadow" that shows us how we can apply a shadow to our 00:00:07.900 --> 00:00:08.900 boxes. 00:00:09.000 --> 00:00:16.300 For that I have created a row with five columns. 00:00:16.300 --> 00:00:17.900 Here we can see. 00:00:17.900 --> 00:00:25.600 I also have you here giving a review, that when it is on a mobile device it becomes a single 00:00:25.600 --> 00:00:29.300 column, to focus on what we are seeing. 00:00:29.500 --> 00:00:33.100 There is a class called "z-depth" 00:00:33.100 --> 00:00:42.300 They go from 1 to 5, with 5 being the most prominent shadow, as in this case, we can see that this is "z-depth-5" 00:00:42.300 --> 00:00:47.800 5, 5, it is decreasing, 3,2 and 1. 00:00:47.900 --> 00:00:51.500 I can also zero it. 00:00:51.800 --> 00:00:54.700 I can put zeros so it doesn't have any shadow. 00:00:54.901 --> 00:01:03.000 In that case, it is the same as removing the class, but there will be occasions, such as in the menus 00:01:03.401 --> 00:01:06.800 which have a shadow and do not have the class "z-depth" 00:01:06.001 --> 00:01:09.400 So what if I want to remove that shadow. 00:01:09.401 --> 00:01:17.400 I add this class "z-depth-0", but later when we are in the menus we will see how it works, then here 00:01:17.501 --> 00:01:23.300 we are going to leave it at 1 to see how we get the shading in our boxes. 9. Table: Tables are a good way to organize a large amount of data, Materliaze provides us 00:00:06.200 --> 00:00:14.600 a host of utility classes, to help us design a table as easily as possible. 00:00:14.600 --> 00:00:22.400 In addition, with the classes that we are going to implement, we will improve the appearance in the mobile part and focus 00:00:22.400 --> 00:00:23.600 the data. 00:00:23.700 --> 00:00:32.000 In this case we can see how I have a table already designed in this case with some data and here we can 00:00:32.000 --> 00:00:34.700 I do not have any class for the moment. 00:00:34.800 --> 00:00:38.500 But materialize already has some classes defined. 00:00:39.000 --> 00:00:41.200 Only with the table tag. 00:00:41.500 --> 00:00:49.600 For example, if I remove the materialize stylesheet, we can see what my table would look like without styles. 00:00:49.700 --> 00:00:57.200 Here it is, this is my table without styles, but with the materialize stylesheet, we can see how it gives us a better 00:00:57.201 --> 00:01:00.500 appearance, done. 00:01:00.001 --> 00:01:06.800 Now we are going to implement the classes that they have; the classes they have for the tables are four 00:01:06.801 --> 00:01:09.300 one, two, three, four. 00:01:09.401 --> 00:01:15.300 We are going to implement them to see how the "striped" class works for us, we are going to implement it 00:01:18.701 --> 00:01:31.600 here, here we can see how we are putting some funds to the rows, alternating, we are going to use the 00:01:31.601 --> 00:01:36.600 the "highlight" class 00:01:39.701 --> 00:01:46.000 That is when we hover the mouse over it, it will show us 00:01:47.201 --> 00:01:50.700 in which row we are located 00:01:54.301 --> 00:01:55.500 the "centered" class 00:02:01.502 --> 00:02:05.000 here it shows us how the data is concentrated. 00:02:05.202 --> 00:02:13.000 All the classes we have here are responsive, we can see when we are on a device 00:02:13.002 --> 00:02:21.100 mobile as the data and the tables are accommodated, but if we want it to be more responsive, we are going to use the class 00:02:21.102 --> 00:02:26.300 by "responsive-table" 00:02:26.302 --> 00:02:31.500 We will see when it is on the mobile device it accommodates us in this way. 00:02:31.502 --> 00:02:41.500 Here we have the header of our table and if we have more data we can with the "scroll" move towards 00:02:41.502 --> 00:02:49.600 on the right, these are the classes that Materialize provides us for the tables, so we'll see you in the 00:02:49.602 --> 00:02:52.200 next to continue with the components. 10. Badges: Let's start with the components section, where it shows us the magic that Materialize has, in terms of 00:00:07.300 --> 00:00:14.600 to many interesting things and effects that it has, in this case we are going to start with the "Badges" which are 00:00:14.600 --> 00:00:22.400 notifications that we can add to our page, to show messages, alerts, as in this case here 00:00:23.100 --> 00:00:31.200 and this one from here and this part; let's see how they work, in the menu part. 00:00:31.600 --> 00:00:38.100 I have a spam class "white-text", I can remove it. 00:00:38.300 --> 00:00:41.300 It doesn't change anything. 00:00:41.600 --> 00:00:43.600 the class "new-badge" 00:00:43.800 --> 00:00:50.700 This is the one that is adding this alert here, I can change it if 00:00:50.700 --> 00:00:52.100 I want. 00:00:53.201 --> 00:01:02.900 The text that I want to appear, with the attribute "data-badge-caption", here I can tell it to say "messages" 00:01:04.301 --> 00:01:08.900 So there we can see, if I want to change the color here I add 00:01:09.101 --> 00:01:19.000 The kind of color I want, for example "blue" in the background, there it is, there I already have the other three examples of the 00:01:19.001 --> 00:01:23.900 other "Badge", which are in this little part. 00:01:25.001 --> 00:01:27.000 I can change the color that I want. 00:01:27.001 --> 00:01:32.300 For example "orange" and red alerts 00:01:34.901 --> 00:01:43.200 We can see that this one from "Admin" here has nothing, it only says "badge", what it does is align them to 00:01:43.201 --> 00:01:45.500 the right, if not there is that class 00:01:45.501 --> 00:01:55.000 The message will remain in this part, here what I can do is add the background color that I want, for 00:01:55.502 --> 00:02:08.100 Red example also and I leave "new" to leave it white as in this case, you can already experiment 00:02:08.102 --> 00:02:12.700 and add the Badges that you want, and see you in the next class. 11. Icons: This time we are going to be working with the icons that provide us with materialIZE such as the 00:00:06.200 --> 00:00:13.100 that we can see on this page, we can embed them where we want, in any 00:00:13.100 --> 00:00:14.300 part of the page. 00:00:14.300 --> 00:00:24.700 In the text boxes, in buttons, I can put them here in the menu, I can change the color, we'll see how they work. 00:00:25.100 --> 00:00:33.000 First of all, in order to use them, I have to import this style sheet that is here. 00:00:33.100 --> 00:00:39.900 this link, sorry !, where are our icons of this materialize 00:00:39.000 --> 00:00:48.800 With that to use them, they are used as follows with the i tag and with the class "material-icons" 00:00:48.000 --> 00:00:57.500 and this is to tell you in which position I want the icon to appear on the right or left. 00:00:57.801 --> 00:01:05.600 So, here we can see that they are also inside a button here is the icon, we are telling you that 00:01:05.701 --> 00:01:10.300 be the left, if I want to change position. 00:01:12.301 --> 00:01:17.500 Here we can see how he changed his position to change the icon. 00:01:17.601 --> 00:01:25.500 I come to the part "Materialize / Components / Icons" and I can see all the icons that I have here. 00:01:25.601 --> 00:01:36.600 Let's say that I want this icon, then what I do is copy this title and where it says "Clud" I'm going to replace it 00:01:36.001 --> 00:01:38.300 inside the "i" tag 00:01:38.301 --> 00:01:43.100 That's where I put the name of the icon. 00:01:43.201 --> 00:01:46.800 Here I can see that I changed the icon. 00:01:47.301 --> 00:01:50.800 Let's do an example with this icon. 00:01:50.801 --> 00:01:57.700 This one here to see that I can also change the sizes; the sizes it has are these that are 00:01:57.701 --> 00:01:58.700 here. 00:01:58.702 --> 00:02:03.900 Those four classes, "tiny" is the smallest and "large" the largest. 00:02:03.002 --> 00:02:04.800 Let's look 00:02:07.002 --> 00:02:17.100 there we can see how the size changes "small", we can see it "medium" 00:02:19.802 --> 00:02:31.600 and we can see the icon in "large", there we can see how our icon gets bigger, let's see it in "small" 00:02:31.802 --> 00:02:34.300 and we are going to change the color, to change the color. 00:02:34.302 --> 00:02:43.200 It is as if it were changing the color of a text, for example "blue-text", there we can see how 00:02:43.202 --> 00:02:45.100 changes the color of the icon. 00:02:45.302 --> 00:02:54.300 If I want, I can add icons to the menu as well, I'm going to go to the menu and I'm going to put "i.material-icons" 00:02:54.602 --> 00:02:55.600 icons 00:02:58.003 --> 00:03:07.200 and here I am going to put the icon "home", we are going to look for it to see if it exists 00:03:07.203 --> 00:03:13.300 Here it is, I save and there it stayed. 00:03:13.303 --> 00:03:22.000 But since I have not specified in which part of the menu it will be my turn 00:03:22.003 --> 00:03:31.400 specify that I want it on the left, there it is. 00:03:31.803 --> 00:03:40.800 You already know that if you want to change the color you can do it with the color and putting "-text" on it. 00:03:41.803 --> 00:03:42.500 there is. 00:03:42.503 --> 00:03:49.900 We are going to put another Message icon "i.material.icons" 00:03:50.504 --> 00:04:02.900 We are going to see one for messages, to see which one we can use, it is already a matter of looking for it to see if it is 00:04:04.004 --> 00:04:08.700 the email 00:04:08.704 --> 00:04:09.700 Let's put this one on. 00:04:14.704 --> 00:04:22.900 There it is, so you guys can't forget to put the "right" or the "left" where I want to place the icon 00:04:23.304 --> 00:04:24.200 from the menu. 00:04:24.404 --> 00:04:31.900 If I want the icon, they only know that they delete the text, the text that is here, if I only want the icon. 00:04:32.904 --> 00:04:37.500 and voila guys see you in the next lesson. 12. Buttons: We are going to continue with the buttons and the buttons that Materialize provides us are the following. 00:00:07.000 --> 00:00:14.900 One long button, one small button, normal medium buttons and floating buttons. 00:00:14.900 --> 00:00:21.200 I can add the buttons where I want, in the menus, in tables. 00:00:21.400 --> 00:00:23.400 In this case I have a button in a menu. 00:00:23.900 --> 00:00:32.100 Let's see how these buttons work. So in the button I have a hyperlink label with the class 00:00:33.300 --> 00:00:40.400 "waves-effect wabes-light btn" the one that gives me to be a button is the class "btn" 00:00:40.500 --> 00:00:49.600 Let's look, there I can see that it looks like a hyperlink, normal but the "btn" class is the one that suits me 00:00:49.600 --> 00:00:57.800 to convert that hyperlink into a button, I can change the color of that button as I want, yellow 00:00:57.801 --> 00:01:03.400 red, as I wish, let's make it gray. 00:01:04.201 --> 00:01:09.600 So there is that button, it does not mean that it is disabled, we are going to put the color it had. 00:01:14.401 --> 00:01:15.000 For the size of the buttons. 00:01:15.001 --> 00:01:28.700 There are two sizes, sorry, three, one which is "btn-small", "btn-large" and "btn-flat" 00:01:28.701 --> 00:01:30.000 We are going to use them. 00:01:30.001 --> 00:01:33.200 Here we have the "btn-large" which is this one first. 00:01:36.301 --> 00:01:37.500 the "small" that is this. 00:01:40.701 --> 00:01:45.200 we are going to use the "btn-flat" here 00:01:47.701 --> 00:01:48.000 flat 00:01:51.501 --> 00:01:57.600 What this one here does is take away the color, if we take away the color. 00:01:57.602 --> 00:02:07.900 Sorry! what we are going to do is turn that button into a, as if it were a hyperlink, but it is a button 00:02:07.902 --> 00:02:13.200 complete because if I pass the mouse over this side I can see that the cursor appears. 00:02:13.302 --> 00:02:23.100 We use this more than anything when we are going to use "card-panel", right now we use it directly in the project. 00:02:23.302 --> 00:02:30.000 I can also add icons as we saw in the previous class, there is another button that is the floating button 00:02:30.002 --> 00:02:40.400 It appeared to me as it is here in a circle, for that I am going to use the class "btn-floating" and I can change the color. 00:02:40.402 --> 00:02:49.600 I can change the icon that I want, for example an icon to search, I can add the icon, always 00:02:49.602 --> 00:02:52.800 and when the icon exists in the Materialize classes. 00:02:54.203 --> 00:03:00.700 Ready, I leave you for you to practice with your projects and see how you can implement 00:03:00.703 --> 00:03:01.700 those buttons. 13. Cards: Flashcards are a convenient means of displaying content made up of different types of objects. 00:00:07.500 --> 00:00:14.300 They are also suitable for presenting objects and for presenting images with text, as they are in this 00:00:14.300 --> 00:00:15.600 case. 00:00:15.700 --> 00:00:22.100 In this example I have seven cards of different types. 00:00:22.100 --> 00:00:27.300 This card has two links with a background, without images. 00:00:27.300 --> 00:00:31.500 This is a card with a picture and a link 00:00:31.500 --> 00:00:41.900 This is a card with pictures and a floating button. This is a horizontal card with image and text. A card 00:00:42.000 --> 00:00:45.000 with a menu that we can see more information. 00:00:45.000 --> 00:00:54.600 A button, This card is a bit similar but here we have a button that we can click to see 00:00:54.601 --> 00:01:01.100 the information and leave the button in case the user wants to continue browsing to another destination. 00:01:02.801 --> 00:01:07.500 And this is a card with tabs 00:01:07.601 --> 00:01:14.500 Here we can see that within the same card I have different types of information. 00:01:14.501 --> 00:01:21.800 Let's see how they are built; in this case I have a "container" class that contains everything for me 00:01:21.801 --> 00:01:27.400 power that is located in the center and with a size of 70%. 00:01:27.401 --> 00:01:35.300 I have the title as I have had it in all the examples, here I have a row class and inside the row 00:01:36.101 --> 00:01:38.400 I have the different columns. 00:01:38.401 --> 00:01:47.300 In this case I have three columns in each row and when in the browser, on the mobile device 00:01:47.801 --> 00:01:48.900 it's going to be like this. 00:01:49.001 --> 00:01:51.400 I imagine you already know why. 00:01:51.601 --> 00:01:53.900 We are also going to do a review. 00:01:53.902 --> 00:02:02.300 We already know that when it is in the small device on the smartphone it will be size 12 and when it is in 00:02:02.302 --> 00:02:06.600 a medium device is going to be size 4. 00:02:06.702 --> 00:02:17.800 For this reason, since they all have the size "m4", then there we comply with what Materialize says, which is 12 columns 00:02:17.902 --> 00:02:20.000 or sizes 12, ready. 00:02:20.002 --> 00:02:31.700 So in this case the basic "card" is this one that we have here, up to here, it is this one; here I have my column 00:02:31.702 --> 00:02:39.800 What is this, and inside the column I have the basic "card" with comments so that it can serve you, so here it is 00:02:39.802 --> 00:02:48.800 the class, the background color of that class that you already know how it works. 00:02:48.802 --> 00:02:56.500 The content of the class and the color of the text, the title of the class is "spam", I can change everything 00:02:56.502 --> 00:02:57.500 what you want. 00:02:57.703 --> 00:03:07.200 The "card-action" are the links that are in this part; equally so I have the other; in one column I have the other "card" 00:03:07.903 --> 00:03:19.400 the link with "card-action", the content, here besides having the title, here we don't think we can enter 00:03:19.403 --> 00:03:26.900 an image with the class "card-image", so that the image remains in the background, compared to this one which is "card-content" 00:03:28.203 --> 00:03:33.200 only; here we see another one that is to add an image. 00:03:33.703 --> 00:03:35.000 another "div" which is this one here. 00:03:40.903 --> 00:03:50.500 as it is in this case; here we also have another one that is the same another "Card", but also enter a button 00:03:50.503 --> 00:03:54.600 floating, as it is in that case red color. 00:03:54.703 --> 00:03:57.900 The effects for when we pass we click 00:04:02.204 --> 00:04:09.700 the button and this is so that it is aligned in this part of here 00:04:10.904 --> 00:04:12.800 on the right side. 00:04:14.104 --> 00:04:23.900 And it stands out above the image and the content; here we have the "horizontal card" is this that we have 00:04:23.904 --> 00:04:34.000 here, that we are going to locate the content horizontally, the image and the content and the "card-action" with the links. 00:04:34.104 --> 00:04:41.000 I imagine that you are wondering why it looks like this and the "card" doesn't match, just like many 00:04:42.104 --> 00:04:45.900 many, such as buttons and many objects. 00:04:45.904 --> 00:04:55.700 There are three sizes that I can modify, the size is "small", "medium" and "large" 00:04:55.904 --> 00:04:59.300 and here you have their description of how much each one has. 00:04:59.705 --> 00:05:02.600 I can specify what this "card" 00:05:03.405 --> 00:05:14.500 I have a "medium" size, let's see how it looks, so that this "card" fits me 00:05:14.505 --> 00:05:24.800 also have "medium" and this one here also has the class of "medium" so that they all have a size of 400 00:05:24.805 --> 00:05:28.300 pixels. 00:05:29.205 --> 00:05:31.900 You can also apply the same for this one. 00:05:32.105 --> 00:05:41.600 Here I am going to explain the "card" with activator, this is when I click on these 00:05:41.905 --> 00:05:42.900 three points 00:05:45.805 --> 00:05:51.600 this one works with that "activator" class in spam 00:05:51.705 --> 00:05:58.800 Spam is the one with those three points, to me 00:05:58.806 --> 00:06:06.200 Click on these three points with this class "activator", if I remove it, that is the one that is making it work. 00:06:06.506 --> 00:06:11.500 See that I can no longer click, then that activator 00:06:11.506 --> 00:06:15.500 what it does is that I can look at the information. 00:06:15.506 --> 00:06:23.900 This is one similar to this one, only it has a link in this part down here that it would be this, has 00:06:23.006 --> 00:06:30.500 the same activator and also has "card-action" 00:06:31.106 --> 00:06:40.600 I can remove this class and what this class does is that when I click on it we will look at this link 00:06:40.606 --> 00:06:49.100 from here, when I click on the link it will no longer appear, it will also be covered; so that's what this is "sticky-action" for 00:06:49.506 --> 00:06:55.800 so that when I click on these three points the link is visible. 00:07:01.207 --> 00:07:13.900 and we already have this part here which is the "card" with tabs which is this one here, the latter, I can 00:07:13.907 --> 00:07:22.200 change the color if I want to the color I want, we can do it there. 00:07:24.607 --> 00:07:32.400 And here I have the menu that I have in this part here above the "card", I can change this menu as I 00:07:32.407 --> 00:07:42.000 want, and here in the "href" of the hyperlink I am telling you to take me to "# test4", that is to say to this one here. 00:07:44.307 --> 00:07:51.200 So I tell him to open this link, to this one of vision I tell him to open this one and show me this information, and to 00:07:51.208 --> 00:08:00.600 I'm telling you to take me to this part of here, just as I did with the ones above, I can put a 00:08:01.908 --> 00:08:13.200 a class to this "card", so that all have the same size "medium" and is a little more 00:08:13.208 --> 00:08:15.900 organized medium and 00:08:18.708 --> 00:08:19.400 means, medium 00:08:24.608 --> 00:08:33.900 All these images remain that you see here at this moment, they do not have rights of 00:08:33.908 --> 00:08:45.200 author and can be used, where do I get them? I got it from here from Pixabay, there you can search for images 00:08:47.308 --> 00:08:52.200 look for images that you want, for example 00:08:55.509 --> 00:09:04.400 landscapes, for example this one, and one can say here free download and it says that it is free for commercial uses and that 00:09:04.509 --> 00:09:09.700 recognition is not necessary, you can download them in the following resolutions that are here 00:09:10.509 --> 00:09:18.100 and this is where I am using all the images of the course in case you are interested and not 00:09:18.109 --> 00:09:22.600 They are copyrighted, so they can be used without any problem. 14. Collections: Collections are a group of grouped lists as we have in this case, collections 00:00:07.400 --> 00:00:09.600 that exist in Materialize. 00:00:09.600 --> 00:00:19.700 These are what we see here, the first collection is a collection with hyperlinks. 00:00:19.700 --> 00:00:28.100 This is a collection with a header; this is a collection with icons and this is a collection with Avatar as 00:00:28.100 --> 00:00:28.900 we have here. 00:00:29.900 --> 00:00:33.200 Chili we can add images and colors. 00:00:33.500 --> 00:00:43.100 This is a collection with hyperlinks that I do click, here I have to take me to icomoon 00:00:43.100 --> 00:00:50.900 These are free icons and royalty-free images from pixabay. 00:00:54.501 --> 00:01:03.900 Let's see how they work, here we have the collections that are lists, indefinite lists. 00:01:03.901 --> 00:01:12.400 With the class "collection" and "collection-item", then what it does is group us like this here, this one first. 00:01:12.601 --> 00:01:17.300 The following is the same collection but also 00:01:20.201 --> 00:01:22.600 sorry! It is not the same. 00:01:22.601 --> 00:01:28.900 It is inside a "div" and inside are the hyperlinks with the "collection-item" class. 00:01:28.001 --> 00:01:37.400 Here we have an "active" class that is showing us which ones are underlined; let's put it on 00:01:37.001 --> 00:01:40.000 first, to this one here. 00:01:43.001 --> 00:01:50.500 The next collection is this one we have here, which is a collection with a header. 00:01:50.501 --> 00:01:58.200 It is also an undefined list, the first list is not "collection-item" but "collection-header" for 00:01:58.202 --> 00:02:08.600 put the header with a title tag, remember that they go from "h1" to "h6"; this list with content 00:02:08.602 --> 00:02:10.100 secondary. 00:02:10.102 --> 00:02:22.500 sorry! like this, it is the one we have, like the indefinite list with a header and the list shows us a 00:02:24.302 --> 00:02:33.700 hyperlink that we have here in this case, with secondary content, which shows us this hyperlink, and this 00:02:33.902 --> 00:02:42.900 It is a list with Avatar that what makes us, is that it gives us the possibility to put various information in a list and 00:02:43.202 --> 00:02:55.900 put images and hyperlinks like this here. Here I forgot out of habit, although in this case we will not 00:02:55.903 --> 00:03:01.600 to use JavaScript, Jquery, sorry! 00:03:01.703 --> 00:03:03.600 That was all the collections have. 15. Floating Action Button: In this case we have the floating buttons if you want to add them to the project. 00:00:06.500 --> 00:00:12.600 They are very interesting because with a single button we can display multiple options as I have in 00:00:12.600 --> 00:00:22.000 in this case the floating button that when hovering the mouse over shows me the four options I have; is 00:00:22.000 --> 00:00:32.500 very easy to implement here we can see it inside this div with the class "fixed-action-btn" and here we have 00:00:32.800 --> 00:00:44.200 the first button that is the one that appears here red, inside this I have a list with the others 00:00:44.200 --> 00:00:51.600 buttons this one here and so on. 00:00:51.600 --> 00:00:55.600 We already know that these here are the icons. 00:00:55.001 --> 00:01:08.300 I can change the direction depending on these four parameters, on the left. 00:01:08.401 --> 00:01:16.500 I can also modify "hoverEnabled", when I hover the mouse over it, if I set it to "false" 00:01:16.501 --> 00:01:20.700 It no longer works when we pass the mouse over it but when we click it. 00:01:21.001 --> 00:01:30.900 As in this case, click to open and click to close, or click when you select one of these events that 00:01:30.901 --> 00:01:43.500 I have here; There is also another option, which is turning this button into a menu. How? adding to it 00:01:43.601 --> 00:01:48.100 the "toolbar" class 00:01:52.202 --> 00:02:03.200 here I am going to comment on these parameters, I am going to uncomment this one, when I click it it will put me as it is in this case 00:02:04.302 --> 00:02:17.900 If I don't want it to look round like this, I'll change it, instead of putting "btn-floating" on it. 00:02:18.002 --> 00:02:25.600 I put this color here 00:02:29.702 --> 00:02:42.100 this one and this one, then when I click it it will appear as it is in this case, here I have the green one, I'll 00:02:42.102 --> 00:02:53.100 to remove, I can remove these, then when I click this "toolbar" will appear, these are the 00:02:53.102 --> 00:02:57.300 options that the "Floating Action Button" brings us in materialize. 16. Footer: Materialize also provides us with the footer, the footer to embed it on our page. 00:00:09.500 --> 00:00:15.800 It gives it very organized for us to include our information, in menus, social networks. 00:00:15.800 --> 00:00:23.000 privacy policies copyright and here we can embed the logo we can put many things 00:00:23.000 --> 00:00:24.800 plus. 00:00:24.900 --> 00:00:26.700 How does it work ? 00:00:27.100 --> 00:00:35.400 At the end of the Materialize page, it provides us with this footer which is the one already designed with its classes 00:00:36.300 --> 00:00:39.500 "footer" the color that I wanted to put. 00:00:39.500 --> 00:00:42.300 That was the color that I decided to put on it. 00:00:42.300 --> 00:00:47.400 You already know how to change the colors. 00:00:47.500 --> 00:00:51.500 I really like black so I'm going to leave it. 00:00:51.900 --> 00:00:59.200 We already know this class "container" is useless, this class of "container" what it does is put us 00:00:59.201 --> 00:01:07.900 a default width of 70% and center, that is why this information is here centered up to 00:01:07.901 --> 00:01:19.100 here and inside we have a row with some columns, which I imagine you have already seen 00:01:19.101 --> 00:01:26.700 in the previous videos, you could learn them and if not I invite you to watch the video for "Grid" 00:01:26.701 --> 00:01:34.000 Here we have the title, here we have a list where I put the social networks. 00:01:35.001 --> 00:01:45.400 and the class "page-footer" what it does is put a copyright, here I am going to make it gray and this one here I am going to make it black, then 00:01:45.501 --> 00:01:53.100 there we can see the footer and the "footer-copyright" is 00:01:53.102 --> 00:02:00.200 This little part here below, where I put the privacy policies and copyright. 00:02:00.502 --> 00:02:11.200 Let's invert the colors to make it look better, there it is 00:02:11.202 --> 00:02:13.600 that is the footer that Materialize provides us. 17. Navbar: getting a girl. Condos may bring good day. Materialize. Could you get the woman was now much of the bizarre thing goes men angle is sickest and part area. Anything goes stick Germanicus mental does girl. And But after I had a look a career and metal cutting Where Rio? Syria s the second You want to run through a class? A color Catholic It happen here. Settlement. Get this thing I gotta do you Ah, Dr Luckless, not rapper ISS. The tariff close brown logo is circulating Worker, You know what we call a mood killer Before you can say in Central, there is a hey lovely saying that you knew necessarily Secretary Tango Calculus. Jonas, you're Kittleman Liboi. Don't they steal a public are literally scared them. I left England just a listers deaf in you is a sucky s s early said icily So you can Is this the group? Don't get anything working. Okay, So Okay. Is that in a classy valentic is dropped down. Trigger? Yes. They thought they get me out of the restaurant. Drew down on a say ideas. Reverential. Say study second thing. Walk off where your they will jam are losing world Proper cannon. Yeah, like Aleppo is unique. You know, I did your president most potency muffins, you know, And but initially, several mental dent. Really? This great a rectangle. A class segment now, yes, there's pregnancy. Exactly. Group down, Lipponen gonna class overthrew. Practical underlay battle most put in semen. She acted silly. Parcel Departmental funds 30 A condo delay Click. Joe says it's going love for my release. And tjorhom. Yemen is a judoka. Sincerely. But I saw material lightness. Probably classical and not fees it Committal Comey War that tore minerals in Sierra Terminal Mood entry indeed. Come with nothing. Worker looking, go going class. No, but fears it. What about fees? It quando is your host. Amy finally stands the admin well on the corner name and your criminal report equals your sequins. Put in that is Ah, metal casually in a park It surgically Conrad HL it scared, but I couldn't even recognize him in the heart of the nine men And a sucky CDO a low moral . This Presidio Mori Doria nose and 1/3 is prettier. It's amazing, but I but I they'll at theory it's the equal. You better being cool. Okay, is when he could Okay, in that target case, a target. Look at that. It's gonna really that worried s seminal. Could've worker then Germany Worry more of them. Come on. Nothing. Worker. Luckless signing trigger Lucas It is our little miss the It's ah listened. If you knew, Don't is Did your lower bow our eternal this positive morally click I endemic, uh, not bar a few bullets killed a condescending Julie broke And you're a love normalised bordering equals Q musical career. It's a seminal it's similarly aka Is Cuando staying Pantoja grand? Yes. Seemingly Arkan is Cuando este lepen days positive or more Did Rocky Lippo come here? Josico knows Aleppo Come your colores. Lippo comparing polarized the ah, a popular tropical your praying No tambien things like kill Georgia Pull my car. Come on, guys. Here it says it malakunas program not realized aqui tenemos alot criminal system case You need the element of union See Pacific Order Nagel e la misma was in the rental not dropped in class Yukiji tango and then put those care they seem put those that in any label but ah and equally Hruska because it is the You couldn't getting work? A little Peter? Yes, they close. Is this the? But they did a good thing. Worker CSKA Matzzie configured understands there the materialize equal to several planets out there. You material do tomatoes which we indoor lap I in practices in less Christian Pakistan's born this car. Very comparable. Is he a printer not infringing on. 18. Preloader: see tenemos Informa's young kissing and what I'm gonna drink are. But most of these areas so stressed spread longer does finally materialize. But in the cardiology Mario minus Karaganda, you know it's considered trawl Internet or not by now. When was that? Because that is, say, deter me Now it's on the terminal. Always stick a sucker. Why must come off 29 inches below? I got denim Ozy and was pretty loaded. A cat Animals preload the term you know, Then it would look like progress. I answered tenemos otra plans. Determinate. He'd rocky being bqool then the killer. Okay, parties can preload this acosta in India's portion. It's again a ceiling Determine now getting it wasn't seconds off Candles bar a quarry in darkness. Moment you say, though, is it is sick it in a moussaka? Simple longer. Then it wants asked Ah, market animals that could have done this being here lazy most cause blue lips must come Very little money. That's all the time on you. A you open it beak. But on the ocular meeting, Mom was open. No is more doctor me. That was Homo Kambia. A credible threat alone. It's not big because I love him. Was Grandi? Yes. More. It's cool. Most, uh, once already did. Your miracle is a less spinner. Cumbia Condor. Judoka ago. Interesting below. Boy are gonna go through spin in a coma. Your copious a spinner. Their car. You're gonna go and trace amusement deep our car. Kids. You can try, then trace. They know that either speaking. Oh, no. You know you get sick. Come here. I mean, come over to as I know it must ones you, Nando kidokoro, throw Camby already. Entrepreneur Christina, Telecom vehicle. Your most wins you, Nando. They want school. Cumbia sued. Grow trans bear Day least once was almost ready for their close. Eventually materialize. Problems are less and less by NASCAR its aims. 19. Carousel: one day my Korea's more material. What is under your script uniform with Entrada? No Tahoe geometry like slow You subscribe for desert Medium. Lucky thing going, Carl C. I got tingle through what will materialize open Carlos A. I don't I mean, from junior college coach. Then his boy More Sunday. Oh, no throne The icon A Carlos a bad my mother. And you're kidding. Go cars in New England when they conduct, listen Carlson and being cool. No calling car Still eating e a supplemental misstated. England will go to a little tangle. Next. You know you're keeping Willacy margins. It says here, when little college with a series of Carlos said no, I usually point on the enemy's kill military implement no Jones creep, but I so important. Among those pros. A. J Equity. He materialized. A giant screen My mother move in June, but American airlines, you know, and equality this placed into consideration. One. Materialize. Eat what you pull it off in General Caruso single kidneys. Elizardo. Then thrown etiquette Ice cream in Connecticut Ice cream Joe Initially so congee. Quality LePen, Go deokman Pinto, E. J. Dionne Jr. Caro said Sir. Classic Caro Sale is like a samosas in the best. Yeah, LeSean risk a secular Zaccaro said. No, that ideal meto Carlos. They can also peruse knows interest in and cars. It was really only cocoa. In Tereza, it's government. You only work enormous and diagnose are a lovely near the cocoa. Can we still import? Aka I was with more Muslim. We have you gotten eyes Japanese? Coolio's was bringing me that. What s the cause of Mormonism? Wavy karma. So no one was initially Yes, sir. Initially says, you know, still era. But was I Okay, pass? No, no, some partisan Carlos say it's a classic case they say lies in his car. But I gelatin Cocaine usually is Carlos L. A. Signature. Easily premed. Yes. Is it window? Caro said Yes, I am in touch. She's three A. In this perfectly or more, they don't like movement. United second car commenting on a classic car. So I'm not saying like classic cars. L. Jones is Lear you? It's a car czar. Pointers! Lear! Eunice Lier dinners, apps, Uranus. There's I could tell it was your busy looking toe lunch. You I was up on his loan cards. I mean, are moving to Ana I was gonna symptom is more like my income creator. Losing the card is so those pointy cause me to lose Cassandra's politicos. Pelosi lucky to lose in the coyotes. No part, no me uprising in opposite come from Carlos. You know, Qazwini minds older. You sold us you is load. Actually, Emily said one does wonder you're possibly mine. The most Knesset casually mind when the apostle grab you. You know nothing will. Soon. Yes, I don't efecto Miles Weslyn took on the CIA restaurant. The lamer a boy must be. You're Notre Caro said, Is this a car? Continentals? Panelists. I got tangled Carlos Ill. This is in both tone. I'm in a classic, Carlos. I'm a physical. Total taste it says in and with your little more rigorous testing most colleges eliminated . Contestant, It's Italian French toast. Thousands important correspond CEOs. Did you sleep in room Happened that expose it to you? Luis Carlos Velez. Semi on. Oh, come on, don't meet your son. I said, come on, Porc issue here and I will. No central a muscle cars. Elissa, you know, continue Tando of the medicaments. This is a lustrous Carlos Ellis could try, but their lives must Atlanta Mazar Okay, like most more. If you can't contests 20. Collapsible: my most Americans. Could I served it or in a car? So yeah, of course. The only you're both and not called the own. Come on, the ticketing worker materialize can as a click. Click now, starting from a June. Continue. You are cute. Yeah, I can't explain. Was there? Yeah. Keep when was there Homolka avenues. So long as Lisa's In 19 years. It's his secretary Masaka Classic. Collect Soviet, least us. The classic collapse here. Really? They connect. Certainly E. It's a spine is incorporated Collect. Certainly. Very click. Okay, look, a monster. The fact is, your job your home with the car. It's actually split mis selling. Um but I am good. Well, it come get equal. Okay, Joe, I am I must track classic. No, Cassie, it's come here. Most likely. Worker, come here. Nozzle efecto windows is play. A guy collects art movements. You know, it's a point. Most bad literary clique. Sim responded. Okay, come on. Finding sort of corn products in the coming star. Come get rise. I put my mother because responded. It is so they look. But it was there. This is looking us really collapse early in the black lives matter realize 21. Dropdown: for most of these are boat owners commonly, said the spirit. Karlis, you're kidding. Bluetongue puzzling. Most foreign seamen. My waist, Rama said in If the furnace you put a throne hurdle and down trigger you that target. Is it true looking thing? Work up the number L. A second cousin is playing. Put Improve Dracula. When I did my stylist, I don't generally will it continue list? It does no good demos with you trying to do anything like last year. Lucas's Claire knows it's still in use. It was like product and at least says glossy Carlos Cage multiple ism, his Penis. In that interview, it put upon arriving tonight in the initial Deserve Something welcome Trail horse a lot towards through its bracket. One. The factory. Most principle. It's the act years old you left from go files. They make all kinds that likely You know that the molten zemun often, Jonah Very likely. Yes. You men from united saying they don't and likewise ending Pimenta It looked more like moment to record. Was distance partners okay? Yeah, 22. FeatureDiscovery: mark your most likely their money muscle on their materialize because my younger hourly Yumi elegant theories were meant to put Attila's around Nuestra Spina. Exactly. Are they really click in my gym for months? Come within this because Because they're bacterias is so don't let them take a thing working. You know, realism was the logic in Former How could you think of your dunking at the target? Elderly and tongue click? It was more of a target on his body. It was a murder parliamentary open carry State Council because, he said, Target the ACA. I said Target. It's selling for much in Pakistan through a sizzle. But Tuncay Sanli skin and it's a part of E thing. And what's good? Ah, initial example. Universalism. Other stuff. Do not take a target because it can. Usually when I stroke or you go, it's only forcing. Views are implement that he is my best world. Gilligan tapering clearly stress Pinas with Come on, put him proper unexciting for months unionists, and it's a 23. Media Javascript: materialized. Tambien podemos in contact most critical local mayor, then the most wireless signal. A C minus. Determine those bones and contract couple say, Come on, came within a stick. US cars exit process. Although do you want to actually scared that's in trouble? Even those in control. Medical necessity minus quality deposit Click is in my Granddad, a Senate in England. Sorvino. Yes, I a car to click your bra. Gregory. They're so nice. Kitchen. I see mine. Tambien tenemos Carson. Full screen they call upon was second. It's It's a museum or Cultural said Okay, it's Siaca, Then emotion did Sheila A may say. But its in this city Council safety safety intones in a supreme I remind you, cargo me, mine material boats it circle as it is like a mental me tickle. Is it likely remind? Say, condom was grand e equals Come on, it's time one day. Mind Estella. Me more classy. Jack s electrical. That Captain that the cups In its practical Layla description, only my foremost says you guys, we my audio. It's your most Oculus. Really. Click was in controversies. Connery lie scripture. Ian Leslie Karl said Contra Masaka, not for a moment. First decorator? Yeah. Loyal like classes Lear one night and my mind, Captain. A cut lip. Well, compared it there. So, um Centro, let's get, uh, my scare The you're late into, um, the hippo Coming. So look in your eyes. The cowboys a dynamo Amy in tow. Keynesianism Lakmal Initially so. And I think that's great Document in some things and they quit. Yeah, car. It is Lear. This is near the classes. Leers Jamuna metal. When does Lear K just program? I'll in less classism materialize in those j query. You know, Joe screen less nosy was probably Arkansas Scenic setting for equity. I still stand being there. Rio? Yeah. Any materialize into Memphis today? It's Yeah, I'm full screen. It's a miserable Caruso Loney Cocula Greg a moose is class Sackler safe scream their mosque in El Bulli. So my stash for my silence. It was a full screen market toe. Not playing much better in a closet. Full screen. Play Yemen that you, Nicky start initially so pregnant from soon. Okay, so not the names. This is looking us proportion. I love Piccolo Marea in materialize 24. Modals: has been the numeral is knows point is there a better paradigm? Is that Carmen's? I was getting the Moors. The computer Mince your own, but I need your says Young. Conform. Hilarious. But a most rare requires a cold I could Your stimulus transformers. There has been 10 as moralistic industry materialize. Then it wasn't so in the normal separate most guys up. We must taste remind his boat owners It's on Dunham on Is not Dunham are gonna be buying? Was good about tone and see, you know Ah, yes and animal. But see our elephant Angela Pine is known. The normal, he put most likely got a tower last. But most regard there's so imagine is for malaria bought. Onus. Yeah, it's just a good eyes milieu. It was like at the time was a But don't get gonna classes, corners, classes more. Treeger is Ebola's effect. Here's some of I think. Okay, Is there evident? A number Lantana. More A Children in the middle of a more summary llama gets his second worker. Good luck. Listen well, I don't know, but I like the more, you know, electric similar. We'll continue in a local jail and you keep working. But I had a blow. Hey, Mental computer. My soon. This is a and even that you keep work that they look at you. Say what? Tony? Stay. So. But I got a button Connect. Yeah, but then ah, it lies! Here you go. No, you throw. Think. Uh, let's see. There is your couple Lenoir. Yeah. Thank you. Okay, because to think there Nazi Germany Yes, they met in intestine. Does your leg this as a live alumina? The jack, A post election. Our CEO? No se toca getting work Are your security slowpoke? ITAR is They have been the commercial kid organism instruct right more. It's the ambience is a term or their Pindling miners in the car look a practical more What ? A putz in my hand. A starless e is suddenly faisaly spark a Leicester by just a few near community. This isn't more. Those in more threats. Apron is a lizard initially in silly summers. Condos. Colonel is great. Getting worker collect less immoral. You may total more. Yes, Here. Fabulous career has been telling Marley school materialize 25. Parrallax: but most of the nets A castle may implement Aries and Jama El Efecto consists in letting minors bomb passion the Muslim toe They look at parts of those blokes they continue Let him pregnancy cash You are release clothes. You almost Mosby Endo Kamala mind so many in the Muslim he'll test tomorrow Happy those blocks you are not but is in the lives of 20 minus commerce is we don't know It doesn't affect the winter. Isn't the mother nisp artiness? It could materialize is when we first them on cementing fasting Hello school Volta will represent low dream I my mother It says its support Keep going Go. I will not executive bottlers Container your keys cell A primary mind from the classic part of last Acosta lost axiom on this I'll continue. I feel that I'm in this container. Give me a sit in and the cooler you keep mostly during my todo que sera Gregor Ultra continue locals copier training section in love part of their car. You could have got a month c minus bulls and get everything in the most minus. I am a day so tangle get initially Zawra Park from General tone. Just a Connecticut that's green. Deloitte chilies are honest. I mean, you necklaces and Prada Atlas. The less in my hands, the suddenly minus e the borderless. I see his intentions clear. Specific. The mother communities. Carlotta Through those blockers, I blame Osborne. Good, innocent. But it's like a massage. Culturally, Martin easily pull apart. Area Iraqi a suddenly mine. Local budgets. Conseco Islami member was I can barely see my prior coma care. Okay, at least My girl by Muskoka Chair Olympic the Populist Because our local stability miners, you are telling the last word. I love the particle operatic in income Jedi mind. 26. Scrollspy: it's clearly Spy is we'll put in the aquatic arrest, raise your toes elementos beginning in k elementos and Quinton lists in trial. Aponte agendas were you? And I said Cars are getting with him. Ploy. Look, most do you think God ryzik Jonas Una proletariat Instrumental in missing the condo in Cape in Cape Bartella since June Issa, there's a drawer or Kaja. Magic is realistic in physics. U K system yucky medicus, A letter said. A six year government. A seven minute You're like, you know you don't sexual no no click protection trays. It was we CanDo could not class Actiq in Cape Come on, How cute. You're single alias. Grow a Linenger. It's good. A key thing. Wanna feel, then throws a villain that Angola's coldness commercial compartment in the dispositive, more less common comparator in Montana. Poconos in Trezza assess the ACA. A cat tango, The let Jimmy Bravo. No look as in Sixth is cruel. Despite looking born in Govan, do not look at someone else in they say only those trace Don't Zaki Zelman. Luke. It is we candle apart a bridge like a musical, but I waas, but I don't raise the less external mosey Press a class. If he said this provocation was okay with that, it's in the back garden Mean about their area? Yes, I could have a weapon there. Yes, that the militant Look initially there. No initially said Commerce. And it's because what did the mayor initially? Zakarneh Selenia Kogo is clueless by classes, chorus play and Metal America. Silly Camby. Oh, a little parable. Trees collecting. Okay, Kambia Sexual Impressively tango six yuan trays calculating. Look upon her 16 threes. There's by most Berken Hovan tuna that 10 in Pakistan implementing human animals. Commentaries. Communists Well sitting indoors so you can't do this. 27. Sidenav: Mama's Hartocollis excitement can Nuestra materializes mean back to you and I say It's a skin of a single bottle. Equal killed lately knows our estimate because we attract you it will men take one This a dozen of these pretty or more, click in a human waste out a response CEO a year Because in the area Yeah, Rocky Tango come in town The piers on the terminal Mineral Graham, Most Lisa in the Vigna. Grandma, That's class settlement complex. Do you have people come back someday? And it's tactless him tailing the second developer community The opening input into the scene You call you mentally more Angela, you must Come on. Come on. A mine A kid, your Camberley, My kindle per field Your book a keeping go It's those taste is coming But it's in the car case on European coolers Borg etc. Is a month inessential releases We must bear The second Lebouc Angelico was going down the stairs in Nikko. A couple of courage. It does them in, but in a good year. I kept forgetting that truck. Visit me the weapon they come. Okay, Joe, you're gonna Yes, there are is a leak. Mineral mineral kcts collaborative classes. But then okay, but it's going both on Intel mentis RC the government, you must. There's only probably like less than 10 star. But after nobody's got meaning and Guatemala border don't kiss. And so could you say, Do you know boy, that are gonna go and see the broken guitar securely Corner chip was a look. Akira, Call me with me. May know and I must. There's no commerce, mainly dynamical if I tell him important Chico's anymore. You know, just in case. Case initially zarrell seen, seen injuries and stuff for a moment. Farsi and Kasey the Company. Three minutes Reason. Country Equity Jamala Classic Katainen menu And it's because they say no. Yes, he's English. ELISA. Yes, you can. A smooth passing implementer locally near Chicago do so Teaching in those are a circle Me? No, no less. When Jenna, when there was commentaries is pregnant, have been, wasn't proximo Year 28. Tabs: Okay, let's repair. Based on years consists in Mali says Get any hearses correspondent this unless Pistoiese and evict guys I don't know the lack on the Black lick and not based on, you know, viola section indica come upon him. Nothing working, you know it's click Insects. You know, my own a part of China on a sick partner for a sexual. Then throw me will continue a census section trace majalla section. Tracy, my three continues. What? And implement Tireless Your kind of thing were coming, though, but analysts were like When Le Closet tapped, Leslie says, And I mean like that. Our captain it has. This is a German sex, you know? Yeah, that them did. No idea. They are sequel. An idea is sexual, you know, is a say sexual. Ono has Stepanian Quantum a clique Media says excuse a no means more prosecution section Those a sick in lesson, Mr John Doe, I says action! It's this eccentric Majorino. True? Yes. Uses Yemen. You're personally parent Has a sec tenting bonuses it different. Peculiar is a leader in section praise from that Leslie say boy and this gentleman from jeweler organize this thing. Yes, equal momentum. A token is Elizardo. Pregnancies are murder in each of these with you a key thing. Go three with look as it is on the field and through my communal efecto Karmapa's Unless X journeys I remember keep as a Muslim toe nothing was bad this season. It's a lovely poorest. More toast coming there, you know, on board, appointed in funds For the most burke a nothing is if they took it in your goes it was it inclement tableau steps you think went running in part a matter realize injured screen. 29. Toast: most Muslims worries them. Very fickle world until last year. Oh, no, it s a Krisel do 10. Good prison is Americans. Good boy. Was better. Can handle it. Clear lesbo Tony's But I am still a click about Philomena. My present elements. I talk. You hear me? Now you know you clean a king. Click and racetrack. My parents Achille, anti Italian Colarossi wear the uniform. Aronda. Yes. They don't remember German Aleta equaled a little is a policy. Jamaat Truffles, You get English script blocking, Letting go solo. Come in. Beer. MENSA. I must get the animals and take us. Akitani Most lost about illness. Thank you both on. But then read cooler because local mass as in the Bongino land Along click. It's not intended as great because the lake little bottle combines with the air. Don't just give me Jimmy materialize pronto towards you. Just save in here. You in a second, tangos. But I'm a Druze premarital MENSA. But is there? Yes, Windows. Lylo. See, Connolly. Case supported settlements. I was on my car. Is, um wasn't a general. It is. A prison will drop you. It is going critical. But in a Quadra me Emily said Windows and Harriet Enemy. And it says you want no question. Tenemos anymore tone that the name was. And it's Sikasso. A ultra parliamentary months. Those millions of Windows E tra parameter entry comedians going Let's classes schedule aggregate. Very likely wrong. Did he like Lance agreeing? Okay, most. How could you? Lies? He's wrong. Lawyer came in, so I started calling. All right, there's a look. When was better? Yes, sitters are both on and I'm in the name and cycle, but is there? And Lucy a conch is a is a crazy lass like, you know, letting gonna steal a supplier issue. You know, quarter the parameter teenage enough in June, the JavaScript coming, Simon Doonan. It's a little miss and most oil. And I thought this place is that bodies. But I Yes, sir. Yes, we're looking listening Tours in seconds will materialize 30. Tooltips: lost all Thompson a Roman test or Informa's young Keano's Brendan informant Look a last act in Iscar. Really good. No great cooperation. Pencil. Both Ernest, your people will call forensic myself. Turn my political nine for months in Nigeria, the more mentally compare taste in a cicada member. 03 You are late. Scare the nature. So John Principle is Brendan Informa. Soon enough, creators can, on a steam income, nothing in which inform us you'll come upon him. Blow. It's a casita, generally bungle course. Or but then I don't talk to committees it either. He needs you. Local movements do nested Castle a vote on the issue in a tangle of class. It told he that opposition is done. Them apart isn't a civil tone on the map. A little review our when they actually scared that it's because we're letting go booting our Yeah, I told him. It's a test psychedelic. Your little button and that name for my mom. AKI Tangled restarted its system in Mason told Ah, this isn't a bookie time and that the position are you MENSA? That the position Could your poetry serves on what the position Bhutan. Hold the area really scared that you let it as you come understanding moussaka. Oh, how do you scared the the Rachel Eat A mean looking working illegal. It was looking Hasbro in 20 in a party materialized in jazz screen. 31. Waves: flows waves a similarly very Sirnak Italy somewhat really lies the info kind material. The same from the simple kinda prolific told us both. Tony's Communistic casual click by most bear Gondola Click a pretzel color. Okay, okay, sideways. It was on the waist. Kitrey materialize. It was just this in the car. Could you think will call you Go Waste effect? Yes, We both down a collect phone call later. This is really the phone. But let's get come in the cooler. Communistic Kaiser Coming up with ways If it your grace spread and for condoms in the Cisco train materialize Come on and say car, kiddo Cedo Caro Personal media personalities That means properties of ways. The all clear now still lives. Yeah, Carson. Welcome in June was dizzy on the Sabraw in a great if it bro. Aleppo. Cumbia Gabor, You're black. You kill upon will color casually saying what? Okay, what a legend. Low still does not letting go to let you know E s is a lawyer up liquor. Bottle him black that Locke assaulting a mosque movement can do. Your broker could have told us weights, could you? A c almost on me. That I could add up through. I think yeah could happen in a cooler being and then stickers off most long. But it wasn't clear recollection through wait being your key litem well being but moves on me. I said kill. They also say, ***, but musical our law from and back. Someone had looking with, uh he told me that I see this is a black being third green. It just educators grandeau mass effect. But I could say it's better known instances Book is weights. 32. Autocomplete: and I seconds almost sympathetic allows for more use. The materialize your boy on a cornice complain about this product is the most general Most are soon is there That was interesting in this play. A few years for him. A lot, Do you think? Wait, What? Your community service car 100. But our in many Nespola is getting an Electra. A community will track UK solamente Cuttino Neymar to determine for you. What I mean by that is you know my with Jonah Lucky and me so line tango alien put deportees Leaders of the complex input like classic complete The complete circle is is lucky knows bad you are a injuries are local jobs create because it's silken is a really meant as in dilemma. But I am academics Trajan saying pulled the complaint. It's a classic. He loves that schedule. Super scandals Anouska Seneca A poor lonely parking occuring in my system Poco there's a getting go Thank goodness my could do nothing can go A local maintain you may mind Could you get I mean thing Weapon Her carpenter 10 T minus Cuomo Directamente Trey is the Internet. It's an infringement present. Park is a jewel compliment Extension put what unemployment There was skirt. When I stay with the complaint 33. Checkboxes: There are lots yet Boston's property not materializing. Instead, cancel the animals got animals in pizza, a a similar lack and services, no margin on track on a juice, Cuando someone responded, and the growing desolation on the prime flow. It's 60 in my brightness property tress classes the checkbook. Well, no. Is this the car? A such a girl, then tied up where? Mostly Arazi. Chinchilla. A second uppermost, then Incontrera bus you. It's a case is a Connolly quality. So Geno or Sudhakar Collusion Contra monetary details. So only facilities implement any point. Trust checkbook. Earlier, the weapon Moony airport and low tech Cinco, you know, label the MRC welcoming family Approximate from zero. You know each element. If angina C Jatoi program off steam A se just such a kill and, uh, and such a Q and A selection. Now it's gonna through the chicken and you nail if the original When Contra mosaic upon a classic feeling e community. Really, there's little muse, moccasin and for their labor, eat them in a such a geo. But I really terrible three with three sable. I see them in such a go. He hasn't got a report that said he was implement remote in West Rogers work before more variance 34. Chips: last features that we lose our present are taking a look using from assume there was a mosque movement they contacted off facility Let's features. So come on, let's get your thing when it's the chasm Because a poor apprentice contact or heretic caters timing. That's really mean that come in, tango in. Put down the book that features Ah, come on foot and broke. I'm impoil definite bonus features Cage appointments there. Then try this. Park it early. Any equal, the rattles. Does he? I am being spoiled cone placeholder, but I convey MTV. You could look a thing. Okay. Gonna eat that or just time in poker after a ISOS a penises here, including losing dick. That breastplate car parking. When was I mean that I should call you go. Thanks. Instant cheap is steady. Could you think? What? Come playing my hand? Yeah. Number could keep risk. I was, um you dive a couple of big. It's the classic. Chief is like a Mr Convicting. There's a contact and is, as it does mean this console. It's a classic like a gradual for money. A ticket talk minutes because, um, yes. So try to stay a car it's the Is this a talk? Pokhara in material? Leekens elect! Listen close cause they commit. Really? And both of these are you. Look a little Neymar. Come on. Zika Um Lucas Anarchy. You're Poile Claire in the corn chips deep, he conjures Create elite Initially Czar Lottomatica mentum at grilling Giotto's is a problem all and also looking whose interests can risk must be in l initially Czar, conjure a screen Bonnie and the cheap ultimate become internal but gradually input Communist casually a car Ah said she needs aces in the city's young tenemos aka appointments care that opinion though Tax Then try From when they said Castro, everything work out Three stocks Your boy got a monthly bill is here talking yet but it's coming in opposing Gondo My stuck where the good ones It's their carcasses Placeholder Julian injuries O'Korn is there. Ring is a result myself from two ET now isn't really to speak. Hold there You're Lubango Because look, a kill kept Mariska Yeah, secondary placeholder is one degrees Rescue you and it's pretty. My don't make apple, is it? It's a window secondary placeholder. My second Muslim Yes. Second president Car Who says such things work out well, grab the chips. He then through July, Pokharel Really for Tunisia took me in a world that is in for much now it was on the chips . Paulus features clothes problem. What they realized is more utility. That's promotion more cheesy most 35. Date Pickers: Bama's osario speakers can use facilitator materialize because it means that active. You know, when a Interfax on its the moment told your thing Go in a beaker. But I you drop a little order but had come over from gender? No, Our click I staying put isn't basically a guy coming that you coming up but is in London. How come imprison select. But I just election already. Maze cudgel posit exit 80 and then you program on you. It's about under the Millipore Cumbia Really test Julie spoken being this way. So your liberal click Isaka the medicamentos is you ever and Loretta got time being the way said you look, poor programmer. Your post election, our issues Bottom 10 minutes, Brooke Community Taysom So on interposition graft is calling. Hello? You can call in that. You I'm gonna come over in June. Lucky thing. Will a classy import tight A's like classes that they speaker is looking those as a in a circle asi equally needs of the surgeon general's creep coming circa on that the speaker in my big day Your boy here is a selection already messed up Anglophiles You know poor selection on males occasional no members. Incirlik. But your computer, they made okay. You know, come in their Zerka Margallo thing. You I don't see. Did you look for your selection? A little medicine? Look, Bianca alone. AKI jealously selection underneath in a Okay, So lamenting in West Ray. Coming with three. What? In onions. Ah, Archym. There's Academy in prison. Don't you know what they okay. I could tell me. What is in those weapons and Kamala form will be cut. Intestine oil bar. Okay. Yes, Close on. Selling is protected. One logistics and left. I mean, what is? And though this legs in 11 in Paris, they were automatic commenting in Chicago Knows your rope because about one funds one through appendages elected elevator semi zero. Marty, come in. Then there's more corn, etc. I can speaker looking worker connect less staying speaker and they said cars in Tobago. Coming with lower estimate. There's going to look election in with the Lord a key. Aleppo. Come be a sea monster, Laura, And has been throughout your comment. Is it okay? No system? Yes. Is such a poor likely And I am a will pay simply Quander. Do you think I'm funny? So let's step out of the able thing. Um, through going partisan, I mean paying your funds. No, the boy click Because there are no Korean. Please. So is there some of those Big Culkin is proposing a materializes and interactive you must by Muslims that ministers they are doing with UNICEF for ladies, you know, just by work. 36. Radio Buttons: and our Ryota elsewhere. Unisys assert my selection. The group of elementos for him, you know, easy to square only strays. But as you know and materialize knows probably those classes muscles are Ah, come on. It's a cash into a tangled a right, Putin said. Original completamente. When is the A car can support, etc. It was a different original. I said The right. It's only five lives in blaming there and what they may do. You think you need food? Can you name group straightening group Poon Dennis Elementary Makopo was that case since Germany Product work Unless election my company see a number of different ways on the Georgia is a Nixon or Sunday's election under stress. Intelligent Luisito is Kingston Entertainment Group, but up where one does in ex uni the Colombian or because I can complete a screen that one either. I stayed it. There's enemies marketing. It's safe for this school. No reconnect weapons, you know in Joeckel Ego Kirsty Poise in time value E check. It s back then tracks for malaria. It's in that, but it's kind of like, you know, I said cardinal cumbia is invisible. So looking at the chicken Yes. A aka looking like Greg is in surplus with God looking my underneath you correct Windows Election. Come get more like the nicotine and sex selection. Institutional mutants. Canas, Proia A materialize. 37. Range: and I said, Cause of it's a Mossad Rigondeaux input tyrant Looking about permitted selection are far lower than through triangle. And it's because within through also Clancy in calling many months you more We are gonna liberal Larissa, you know, spoil Muzi in Obama s trending can water so much Rico is practically see similarly Carhart the Lemon thing It's It's the input tyrant There's solamente so implement Rogatica more than throwing a ticket up We left the caramel UCLA's ahrensfield file You the corn is so get any moves Ladies what he says you you can imagine getting in Masaka Solomon taken is only keen usually Zerlina lemon 38. Select: close. Alec Nirvana. Primitive Esquire, Intra meticulous of fairness. Coleman put him blow. So let's get the gates. I'm nursing a sprained as well, but I was election. It looks clean. Needles The legendary pregnant doesn't more sleepless. A materialize Primeau's was. Are you never moment Practically que Ramos was. I don't like Norman. Thank you. Someone was causes imprint Malaspina A couple moves a selection of the bodies of two units and sailing a couple most the report groupers. I am a some employment, including minus. We'll sail it. Yes, lt more and still No, no I and nine hours and hours Almost angelic but implement are long Pataki Thomas A ticket as a liquid journeys Every man Celik Lazy Muska says Alex, you know. Yes, I did, Though. Dr. West, you know most there's election are losing. Okay, City. Come on, Nigel, You got a 10 emergency Ehrlich A label isn't indica. He has a reputation. She is the Selic captain emits in the Morty place cause I realized that my mother square bar you celic a Ramiz won't temple. Asi means more unique. Oklahoma's is a lot to multiply. You know those grupos and Ramo's It said like in in an option off group ticket up through Really? Lapolla Moza, Hillary Group Pokemon stickers. Yeah, No, True. And the lessee minus. It was a good thing. Was that come good happening more slowly, uncertainly equal Lebanon Luckless equals. You know that happened. It was like my Uncle Sam Waas case the most was on yellow team. Oh, closing sale like it's a more like classier broads. Therefore goodness but most driving a go ask wordlessly looking cute little night are for the victim you. But I mean at least there the those initial is Adul Cilic in Metro from Celik. Yes is just great. Last year's come a police amano sell it so practical eating still only around 39. Switches: close, which is so long people that checkbook skip way Moore's please are part of a similar but him blow to encompass, uh, in sin deal with up ago. You're keeping with those checkbooks. They say I can go The bullet, you know. Unknown. Yes. You know Obama's there. You know Zaka misma looking. I must in a glass case Science A little Oculus The model, please under a Lawrence, Rome wasn't room. They've compressed switch and labour condos in the car is really important. Tight checkbooks. You respond canna bis even in your equal status in misma. Okay, I must tow the Oculus promotable. But our sonando Yes, it says I really though no says way if my inner senses projected Kamata point implement that 40. Project: the terminal took it and go in The same momento stays but simply car body is causing task of removing the transport. The last closes my eyes termina Russian Do it stays in your supplanted Yah person These in your own name? Ah, it's on go a loss. But you're projecting last buses. They let the look. We must get rid. Of course, Like I almost get things up accordingly. No, thank Replica Loseem put both Tony's bottom floor Colono sequence the trap. When was I gotta go? I got an internal josico A couple must've been 10 a moralist. Lucky. Okay, I think will be a patina a 10 gonna scar Graham was that was that? The s a T minus last bone This cargo today big So I get in this car Garcon a minus leader that there is your tour Be those There's but unprofitable interest categories The dominant tries that Martina and that they re more a Your Muslims car issues a a second critical. You look at the nays but implement our economy. When was the mental quickie recolonized? But I am blowing The Guber must implement there It's the part of things that is the tone A surprise thing is this is the outcome. A second thing was the Beibu Google Instagram Twitter You look away Also Minister Counsellor, is this car Got it? Sykora Peter do that I think was cargo. A gondola is cardigan in a dozen contar Quincy or to my mother. Copia is second operator. Islam was a bigger than true project. Dude, you're letting up Oracle. And what I was in moderate to the you need but was a copy of the southwest. They lose your somewhere settle Their crime alarm was including this has got a bit Interns is the noise The seminal projector relating worker celebrate explica on the practice of Georgian on the product removes much of Temple Way a car jetting Go religion Woz New I still salah a single day They might realise last one despite those equals the materialize Lo has kilos, games, card games. But those equals there. The baby toe is still Google. Let's get guys Karlgaard. It's so I see a self went It's Pelosi Kono's more congenial Attica moister And at the animals online a Let's get them in. A couple still owes this tie. Colin Contra motions resonating a lot of legend was that I can pump is are getting really cool. No. Then make the meat more local. The Iraqi jet Engelmann wound is Menefee. Who it's in. The barfi said they could or Blanco a layman. Getting will tingle a classy response. E um he is a loyal Nikola tango. It's a nothing letting go a little easier. Every strips Cuando lately Medio I don't know anything on more. Let's get that thing worker they are doing letting go Zico knows Ah, Acorns Airport Your A to you were there cold or Kennedy and studio aka well but own Dinis yourself, Sir John Doe More because they say Okay, well, you know, density eyes thing. You're more Luna letting go and and for the Moolaade opens what you contracted in your human button It was Where are you going? To continue, But dont getting worker They can be cool aura like Look, this little plane Come here. Come said this in year, both under histories in those then this tongue I think Mr John Dory more does Good thing worker comes to you on those, um, through someone you're letting go it in young for malaria of course, itchy eyes, The outcome. Everything that normally possible repeated possible a man you don't. Okay, Can you go? These stars list all a cadet in almost every mineral does because we metal bar fees it you have been visit. But Cuando by him was me. My music If you wanna participate your communities that cousin letting will a class and, you know look like regimen responder No, in non Georgian Taste Inc toe important. But it's always so that's created milk it Unless you look at the new a eyes, you know, certainly no. Is so a kid, original package or anything with all those economies. Ali al Minnow Singling You also scared ago? Yes, Simon Luca is even more human. More hazel Grace and Grace Potter understand this perfectly or more just how we must get seminal your car, he said, May look back on this in Montana. Runde, Yes, women. But when this thing happened that they're picking, you gotta be a fund wrote and goto play practicing to play look, but because they don't the total gym go to Monte therapy Tucker guys, get that I mean a poor because they are more agenda right Magister in borderless Parker Cuando Georgia Landau. It mens are more in the Muslim toe. You'll be able produce. Ejaculating will not be able fund. Yes, your full knew nothing worker. It's so high, Steelers. His luck is kind of the most Corneau's equal amount is three aka venues are computer. There's your okay thing and a kid your thing. Go, Eddie, be off on the position for you, huh? Minimum Andrea Jin por ciento said the minerals is attended Minnows mill Practical Fundo You're slow Hide Pakistan was his conduct. There's a look tingle continuum score will contain it It's a container the car. But I was Carlos Berlocq Is it the obvious thing? And you're letting go like lives in my black Ah, yeah. Colin Treating o r d Tullow Electing western for malaria My block letting go background Ah , air Here s a cooler is Negro and grew Look not crucible moves cocking Quakers Caloric When the card coolest cooler teas in quicker loose colores You're boil mirror looks but I came. Thank you. Okay. A kid A portal. Kakadu is Inigo when you educate a Negro? Did you guys do you You made on? There's a sun angle to your look your toe in here because I must respond into you open a keeper. Implicit entire yoachum. Yeah, Doesn't happen. It must cloudy Djalo Human 10. But in blue? No in date yet that I suppose all my school Ah, you're sick. In early times they make a movie transport anything. Do you have been the goose circle rocking in decision digit? Oh, Okay. Ah, that's ready to tangle me. Container the corners, boy. Lose. You're keeping girl container Cornhuskers. I mean tango letting when you stay low. Continue on Jews in PRESENTO for though, is one from the old uncle? Yeah, a little goon not responding. Look, you just a little more if you cut you to the car. Get unit is still uncle, that's you. Only open a leopard spotting, putting do anything with I see. Ah druggie tingling his car. It's a computer locker. I mean, lifting. Going over a ballpark on delaying fungal Most quarantine embryo letting go. Maybe you think it was me any world but it isn't. You able to handle a raises your list iss dissecting Battaini. But Lieutenant, a silicon a super Super by Cercone associate Kunal see Europe Where a live look they want tearing apart. You know, emedia according liquid Oka do is say there's like, um ese polysilicon Communal bowls are your thing. Go put Imprint rebuilt and wasting class. I mean, it was in the fable. Ah, burn it equal. Nothing Welcome. They looked in Sochi Is that it's good of a job. Or, uh, I used something for support because you look a really poor being cooler. You. And in the cooler I am most government Ondo elect Children on them in your there is usually a car you say young seen on letting go Fuller and Poor corner the video store They're says I was born with Cara Gusteau. You nothing Go Illini Religion No limit Girls cargo The Lapa hina News equals tango initially, czar, but are less the good news of his own Parlous fucking It's this perimeter monument Third view Do you know sweet And for the last and Bill I am a camp local mosquito a safety except in Bhutan accorded the meniscus. But I bought back in the boat in that the speaker. But our laws and Caroline Doty use it is clear you don't say anymore but, uh I see nothing. Good, Ahmad. More inside. You know, Berta, what would you not any I think this party or more nothing. And so that Chico's project, you could play a most implement that in which is part is a preeminent terrify us my cell and they continue the project took one The Jet Cesar agenda. Oh, he there are king. But I have been in effigy, not locum playtime intake on our doors. That's when she Wednesday the injury zone. The racetrack the A consul Terrible ellos even until must causes a part. Implement It is aggressive. What those put our since returning. Cool. So in the assistance A but are a came seasoning and residency Leontes Prince in your legs Public Ari work in forcing gravity's single A communicable leaker intense close and the school e s battle because insecure analysts against school school starts winding. Check it out 41. Instalacion materialize: We are going to start by installing materialIZE on our computer, so we are going to enter the page 00:00:09.600 --> 00:00:12.300 from materializecss.com 00:00:12.600 --> 00:00:18.700 Here we can see the two versions that are at the moment, we are going to use the beta version that is very 00:00:18.800 --> 00:00:20.400 stable so far. 00:00:22.000 --> 00:00:29.100 I'm going to click where it says "GET STARTED", in this part it takes me to the download part. 00:00:29.100 --> 00:00:39.100 Here I am going to click where it says Materialize, we hope it downloads, once downloaded I am going to unzip it 00:00:41.200 --> 00:00:42.900 and here we have the folder 00:00:46.100 --> 00:00:55.900 I am going to change the name of this folder to "section1" and I am going to drag it to my text editor in this case I am 00:00:55.901 --> 00:01:03.600 using sublime text, you can edit it and use the text editor you feel most comfortable with 00:01:03.601 --> 00:01:04.300 comfortable. 00:01:05.301 --> 00:01:12.600 Here to test, to show you what it contains we are going to open the "css" folder where we are 00:01:12.601 --> 00:01:16.500 two style sheet files. 00:01:16.501 --> 00:01:24.600 In this case the first stylesheet has all the classes that Matarialize has, here we can see 00:01:25.501 --> 00:01:34.400 it's 9039 lines of code, materialize and is used through classes, it's a file 00:01:34.401 --> 00:01:39.600 with many kinds of codes that we are going to use in the course of the course. 00:01:41.401 --> 00:01:45.300 There is also another stylesheet that is already more minimized. 00:01:46.001 --> 00:01:56.500 It has the same thing only that it is not down, here it seems to us that it has 13 lines, in the sources folder 00:01:56.501 --> 00:01:58.500 there is nothing because the sources 00:01:58.502 --> 00:02:10.000 we are going to use them directly from the Matarialize material, which I am now going to explain to you 00:02:10.002 --> 00:02:18.800 what is it about and in the "js" folder, the same thing happens there are two files, which contain many functions of 00:02:18.802 --> 00:02:28.000 JavaScript that we are going to use in the course, there are already many codes that are already programmed. 00:02:28.002 --> 00:02:36.600 The only thing we are going to do is use them, so here in the "section1" folder we are going to create a new one 00:02:36.602 --> 00:02:48.200 file and I'm going to call it "index.html", like all HTML files. 00:02:48.202 --> 00:02:54.300 Here what I am going to do is that I am going to go a little lower and here the structure appears 00:02:54.303 --> 00:03:05.600 that our file should have to begin with, I'm going to copy this whole file and here we can see that in that first 00:03:05.603 --> 00:03:12.200 style sheet, in this first style sheet 00:03:12.503 --> 00:03:20.800 In this first link I have a link that redirects me to a page where all the sources are 00:03:20.803 --> 00:03:22.100 for icons. 00:03:22.203 --> 00:03:29.000 In order to work with the Materialize icons, in this case you are relating the stylesheet 00:03:29.003 --> 00:03:31.100 that I have here. 00:03:31.103 --> 00:03:43.800 Here we can see CSS location and we can see that this style sheet and this line are importing 00:03:43.803 --> 00:03:51.000 that is here, it will help us to optimize our work on any mobile device. 00:03:52.403 --> 00:03:59.700 And in this case here I have the Materialize JavaScript. 00:03:59.704 --> 00:04:05.300 We are lacking for our well optimized work environment. 00:04:05.404 --> 00:04:14.800 Download here JQuery, Jquery is a JavaScript library that must be indispensable for the 00:04:14.804 --> 00:04:16.600 course functionality. 00:04:16.904 --> 00:04:26.500 In the part that we are going to use JavaScript in the dynamic parts, then I am going to download this file. 00:04:26.804 --> 00:04:36.700 I am going to save this file here, it may already depend on the operating system you can give 00:04:36.704 --> 00:04:44.500 click and automatically they are downloaded, I have to copy the entire file, copy everything and save it inside 00:04:44.504 --> 00:04:58.400 from the "js" folder and I'm going to call it "jquery.js", that's where it is, and in this part of here the Jquery should be 00:04:58.505 --> 00:05:14.500 before Materialize, here I will say that it is "js / jquery.js", here to test if the sheet 00:05:14.605 --> 00:05:20.400 of styles is well related and if I have downloaded it well, I have a menu here that is materialize 00:05:20.405 --> 00:05:27.700 to test if the codes are working. 00:05:27.705 --> 00:05:37.300 Likewise after each video in the description I will leave the file for you; ready 00:05:37.405 --> 00:05:39.300 I already saved it here. 00:05:39.305 --> 00:05:40.500 "ctrl s" 00:05:40.705 --> 00:05:47.400 I'm going to right click open in the browser and it opens in the browser that is by default, so here we can 00:05:47.405 --> 00:05:56.100 see that they already have styles, that they are already taking the styles of materialize, we are going to continue with 00:05:56.105 --> 00:05:58.800 all the CSS that has materialize.