Transcripts
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.