1 00:00:00,000 --> 00:00:08,679 well in this video we are going to see how to make a card is worth what they call with the 2 00:00:08,679 --> 00:00:18,600 from with the frameworks the faces that is a very visual way very friendly to show information 3 00:00:18,600 --> 00:00:26,760 when you access a database all the information that is extracted from that database 4 00:00:26,760 --> 00:00:37,039 and showing it in this way, okay, this is what I told you in the last video that I uploaded, okay, 5 00:00:37,039 --> 00:00:42,820 then here we have we are going to do this so that you can see how it is, I am going to explain different 6 00:00:42,820 --> 00:00:54,740 classes as you can be the grid that is interesting and we could see this in an example that if you 7 00:00:54,740 --> 00:00:59,740 you want, well, I also do it if the video is not very long, you see this type of cards, 8 00:01:01,979 --> 00:01:07,500 also notice that I have not told you how the tailwind documentation works, not first they tell you 9 00:01:07,500 --> 00:01:14,620 how it was done before we had here our our html code and we are going to put the classes 10 00:01:14,620 --> 00:01:19,859 then in the style and we are going to do the different classes, it is worth that I understand that you this is 11 00:01:19,859 --> 00:01:25,319 what you have done with the css in the end a framework is this then now they tell you no this is no longer 12 00:01:25,319 --> 00:01:33,859 used if this now what is done is this code because you are using the framework the framework of 13 00:01:33,859 --> 00:01:52,609 tailwind ok then if we take this for example I copy it we go to the code here we are going to paste it 14 00:01:52,609 --> 00:02:09,750 for example here this is worth this this is not going to recognize me this we are going to put here it is the reason 15 00:02:12,770 --> 00:02:15,129 then sign 16 00:02:17,590 --> 00:02:18,870 dot jpg 17 00:02:20,930 --> 00:02:29,939 and this and mg this does not catch me I do not know why 18 00:02:33,939 --> 00:02:41,680 is because of the type I think 19 00:02:44,740 --> 00:02:56,169 well, what I am going to do is 20 00:02:57,610 --> 00:03:10,240 this now, yes, if we come to our website, this is the point, I think 21 00:03:10,240 --> 00:03:21,740 to see if it is worth then you see that this card has been put to me in this way, now I tell you 22 00:03:21,740 --> 00:03:27,340 why these margins are so wide, it is because I already had this one that had this size 23 00:03:27,340 --> 00:03:33,580 then this one is suitable for this size, but you see that right now it has worked for me as easy 24 00:03:33,580 --> 00:03:40,539 how to copy and paste the code and we would already have it here ok with its use with all the stories 25 00:03:40,539 --> 00:03:55,460 well let's go again to our web we have here already put the page the visual studio code with the 26 00:03:55,460 --> 00:04:08,199 página web vale y pues vamos a borrar todo esto desde este reto hasta aquí vale bueno ya está todo 27 00:04:08,199 --> 00:04:14,960 borrado ahora me está dando aquí cantidad de errores vale porque esto siempre tiene que ir 28 00:04:14,960 --> 00:04:28,959 with the div, and from here we start to do the different things, we are going to put for example here a hello world 29 00:04:28,959 --> 00:04:42,040 to see what we are doing as we are putting the code, then we are going to make this a little bigger 30 00:04:42,040 --> 00:04:53,019 y así lo vamos viendo mejor vale entonces tengo ese div este es el contenedor vale el contenedor 31 00:04:54,360 --> 00:05:00,279 principal y hay que distinguir entre lo que es un canvas que eso lo vais a ver mucho mejor 32 00:05:00,279 --> 00:05:08,139 cuando empecemos con el tema de unity y lo que es un contenedor dentro de ese canvas vale al 33 00:05:08,139 --> 00:05:14,319 in the end a container is like if I am talking about classes it is the parent class ok and it will have 34 00:05:14,319 --> 00:05:21,639 different children everything and the children will inherit from the father ok that is, the reasoning is always 35 00:05:21,639 --> 00:05:28,819 the same ok then here I am going to start putting classes and I am going to see them with you 36 00:05:28,819 --> 00:05:39,259 ok then for example the quotes quotes ok the first one that I can put where it is worth around what 37 00:05:39,259 --> 00:05:50,819 that class does round the straight angles of the background ok or of an image if we put 38 00:05:50,819 --> 00:05:59,439 una imagen cosas así vale pero lo que hace redondear luego tenemos diferentes veis diferentes 39 00:05:59,439 --> 00:06:06,319 grados de redondear más pequeño menos menos grande vale puedes decirle que sea full entonces te hace 40 00:06:06,319 --> 00:06:12,540 casi como un círculo vamos a meterle ahora el 2xl y luego lo voy cambiando y vais viendo y diferentes 41 00:06:12,540 --> 00:06:28,980 things ok I have here I have the over flow haydn ok if you see the over flow it has here different 42 00:06:28,980 --> 00:06:36,420 options the over flow is when a text or something is overpasses the container as you want it to 43 00:06:36,420 --> 00:06:43,220 act is worth the typical of if it is rap because it takes you and divides you for example I am talking in 44 00:06:43,220 --> 00:06:49,939 text does not divide the word and it starts to put the line below it is worth me in this case what 45 00:06:49,939 --> 00:06:57,259 I have told him is everything that exceeds in my container you hide it ok and that's it but this 46 00:06:57,259 --> 00:07:02,779 you already see that later we can modify it as you want, it is worth and in fact I encourage you 47 00:07:02,779 --> 00:07:09,920 to modify it as you want to go doing you and seeing different things the shadow 48 00:07:09,920 --> 00:07:17,240 which is what the shadow or shadow 2xl does, for example shadow what it does is put a shadow on the container 49 00:07:17,240 --> 00:07:28,639 or on the image anywhere that you put this shadow it will give it an aspect like in 3d it is worth like 50 00:07:28,639 --> 00:07:37,079 several layers what else can we put the green axis the color the background is worth then we are going to 51 00:07:37,079 --> 00:07:44,879 put the blue and we are going to put it because a 600 for example is worth then you see how now if you 52 00:07:44,879 --> 00:07:53,579 see the background the bg in blue it is worth it is seen that it has rounded the corners you see that if I take 53 00:07:53,579 --> 00:08:07,170 and remove this is the background there is not this I have removed something that I did not have to have removed 54 00:08:07,170 --> 00:08:24,560 we are going to avoid this, notice how now the corners are straight angles, it is worth 3 because 55 00:08:26,560 --> 00:08:36,480 we are going to put the 2 xl the overflow haydn the shadow 56 00:08:38,220 --> 00:08:41,519 is worth and the shadow is not that it looks too good 57 00:08:41,519 --> 00:09:06,559 well, we are going to continue, we are going to continue putting more little things, more classes, then 58 00:09:06,559 --> 00:09:11,960 notice that here the classes have been put in a div that in the end is to make a block, then 59 00:09:11,960 --> 00:09:19,679 the dao programmers work a lot with the div, it is not always necessary, but it is 60 00:09:19,679 --> 00:09:26,179 true that I am going to make those blocks block is equal to container is worth in this way 61 00:09:29,659 --> 00:09:34,360 ok let's do for example something else and I'll tell you I'm also telling you new things 62 00:09:34,360 --> 00:09:42,059 we are going to put here is this dip that is the container is worth that it always has to accompany 63 00:09:42,059 --> 00:09:50,470 and it always has to accompany the challenge we are going to format this 64 00:09:52,590 --> 00:10:01,090 ok well then I have the hola world ok I have this good dip if I want ok because 65 00:10:01,090 --> 00:10:10,610 here you see that well, it is taking care of everything that is the entire width of my body of the 66 00:10:10,610 --> 00:10:22,750 web page, then there are several ways to position a gui or an element of the water and 67 00:10:22,750 --> 00:10:29,789 better said a container or a button or a container is worth in the end they always end up 68 00:10:29,789 --> 00:10:39,169 becoming containers there are several ways to order these containers in the 69 00:10:40,610 --> 00:11:09,009 on the screen, okay, if we don't tell him anything, he'll take care of everything, unless we play with the property width, okay, or the height, the width, we can play with that, okay, well, there are two properties that are used a lot, two classes, which is the gray one, and the flex one, in this case I'm going to use the gray one, okay, so here I put the class, as we're doing all the time, 70 00:11:10,610 --> 00:11:30,210 Okay? And when you use the gray class, the first thing you do is put the gray. The second thing you do is say, gray, and here, if you look, I can move by columns and by rows, okay? 71 00:11:30,210 --> 00:11:34,429 So, what does this do? It makes a kind of table, okay? 72 00:11:34,429 --> 00:11:40,809 So, when you tell it the number of columns that you want your page to have and the number of rows, 73 00:11:41,809 --> 00:11:48,450 that allows you to place the different components, the different containers, 74 00:11:48,450 --> 00:11:56,129 in the places where you want to place them on your web page, in this case on the From, okay? 75 00:11:56,129 --> 00:12:05,549 y eso es es cómodo porque también nos permite pues lo que nos suele permitir una tabla expandir un 76 00:12:05,549 --> 00:12:13,590 objeto un contenedor entre dos columnas entre dos celdas o entre dos filas o decirle dónde empieza 77 00:12:13,590 --> 00:12:18,330 dónde termina vale hay diferentes opciones yo en este caso le voy a decir que voy a hacer un 78 00:12:18,330 --> 00:12:27,330 grid of five columns is worth then look at how already when I tell him the grid calls 5 he has already 79 00:12:27,330 --> 00:12:36,929 taken me and he has made me smaller this this this container is worth with the text that has happened with 80 00:12:36,929 --> 00:12:46,769 the text that he has taken and he has adjusted it to this size, it is good 81 00:12:52,970 --> 00:13:00,429 here I have used 2 xl I do not know why it is that it is not a box this is a box 82 00:13:08,360 --> 00:13:22,080 should give me a shadow and it is not giving it I do not know why you border 83 00:13:37,750 --> 00:13:50,620 what happens is that they put it in a very black color, you see here now when I have put it with the 84 00:13:50,620 --> 00:13:58,879 plan that you can see more if I was putting it ok here you can see more I am going to leave it like this so that it 85 00:13:58,879 --> 00:14:03,799 looks good but also you as you have the smallest screen, well, notice that I have erased 86 00:14:03,799 --> 00:14:11,039 the overflow haydn then what it does to me that the letters are coming out here, okay 87 00:14:11,039 --> 00:14:23,480 if I put the overflow haydn here again, you see, it already hides it and I think it is better, okay 88 00:14:23,480 --> 00:14:29,539 but we could go playing with the different options that the overflow gives me, all this as 89 00:14:29,539 --> 00:14:35,480 siempre lo tenéis en las opciones vale en la documentación técnica aquí tenéis todo lo del 90 00:14:35,480 --> 00:14:41,480 grid vale cómo empezar a trabajar con el grid las columnas todo todas estas historias las 91 00:14:41,480 --> 00:14:51,740 tenemos todas aquí vale vamos a seguir entonces bueno ya más o menos si tiene forma de tarjeta 92 00:14:51,740 --> 00:14:58,460 vale y entonces podemos por ejemplo y decirle al texto pues en el vídeo anterior vimos que 93 00:14:58,460 --> 00:15:05,399 to change the size of the text we could put tex 94 00:15:19,120 --> 00:15:29,230 we are going to see it in the documentation that is for that we have text typography text text color 95 00:15:29,230 --> 00:15:39,049 ok then it is text the white slate ok then here it is not the color it is the test the size where it 96 00:15:39,049 --> 00:15:49,940 is a white font site ok and in the font site we say the text xs sm text base then we are going to put it 97 00:15:49,940 --> 00:16:02,940 here, for example, because text sm for example, it is worth that it has been noticed a lot 98 00:16:09,259 --> 00:16:24,679 here we would have with more xs x is that it would be the smallest to see if it shows if it shows 99 00:16:24,679 --> 00:16:39,149 ok if I put the axis here if it is noticeable we are going to put the one or we leave the one that gives us this 100 00:16:39,149 --> 00:16:47,629 own ok we can leave the base or if not the xs we are going to leave the base and that's it and then if 101 00:16:47,629 --> 00:16:55,470 ever because as always we can modify the base ok well what else can we do put 102 00:16:55,470 --> 00:17:02,509 that image that I did not know that I knew how to teach at the beginning well before that 103 00:17:04,109 --> 00:17:15,859 here you see that the text is sticking a lot to the edge of the left, it is worth if I wrote 104 00:17:15,859 --> 00:17:21,160 more, it would also stick to the right, it is worth there is not much space between the top and the bottom 105 00:17:21,160 --> 00:17:28,720 well there are two types of margins one is the margin which is the margin that will be between the 106 00:17:28,720 --> 00:17:32,660 different containers that is, it is out here this margin that would move around here is 107 00:17:32,660 --> 00:17:39,299 valid and another is an internal margin that is called the padding and if we come here 108 00:17:39,299 --> 00:17:54,230 you will also have the option of the margin and the padding around here, let's see if I can find it 109 00:17:54,230 --> 00:18:11,470 let's see if I see it here is the padding and the margin ok then here we have different 110 00:18:11,470 --> 00:18:18,390 options to play with the pad and not the margin if you look at the padding it always starts 111 00:18:18,390 --> 00:18:29,410 by p ok it gives you here the sizes of that padding to the right padding up ok this is zero but 112 00:18:29,410 --> 00:18:35,890 if you go down because you have many more sizes here of course it is worth and the margin because it starts 113 00:18:35,890 --> 00:18:46,150 by m m in x in and it is worth m r which is the right or the button or it is worth you have everything as always here 114 00:18:46,150 --> 00:18:56,369 well put then we are going to put an interior margin a padding to the right and to the left when I 115 00:18:56,369 --> 00:19:04,190 I want to put a margin on the right and on the left that is using the px ok then we are going to put 116 00:19:04,190 --> 00:19:15,029 px for example at 4 ok and it has already put me this that text is worth in 4 and I am also going to say that 117 00:19:15,029 --> 00:19:25,049 the upper left margin is sorry above and below it is paid to 2 ok then this is already 118 00:19:25,049 --> 00:19:33,210 is putting it like this, it is taking shape, we are going to put it so long and so we see it we see it better 119 00:19:33,210 --> 00:19:43,849 ok I have put it in pxp ok then I am already having this one is already taking its shape ok ok what else are we going to 120 00:19:43,849 --> 00:19:51,490 do we are going to put an image here then the image within src I have put an image 121 00:19:51,490 --> 00:20:00,349 which is logo sign point jpg which is the logo of the institute is worth then here what I put is the img 122 00:20:02,049 --> 00:20:12,210 the img class is worth the same as I already have miles and here so that the error is not giving us I am going to put this is 123 00:20:12,210 --> 00:20:18,130 worth then that I can tell the image because for example we can tell it that 124 00:20:18,130 --> 00:20:25,390 this one that has rounded corners that more I can tell you, for example, that the width 125 00:20:25,390 --> 00:20:34,750 is all the width of the image, that is, that it occupies the entire width of the container, what else can we 126 00:20:34,750 --> 00:20:41,890 tell it to have a shadow, for example, then we put the shadow lg this type of things 127 00:20:41,890 --> 00:20:50,809 vale esto en cuanto a las clases en cuanto al cargarle la imagen le vamos a poner pues src 128 00:20:50,809 --> 00:21:03,990 porque la tenemos dentro de la carpeta src y el nombre logo firma punto jpg y entonces ya 129 00:21:03,990 --> 00:21:50,140 I already have this image here the box out I go to the box out due to the issue of the bootstrap, which is another 130 00:21:50,140 --> 00:21:56,380 framework then there if there is boxing and in the css there is boxing then I 131 00:21:56,380 --> 00:21:58,339 here I think the same thing is going to happen to me 132 00:22:05,319 --> 00:22:08,809 now you have it all there 133 00:22:11,680 --> 00:22:13,160 we are going to put 134 00:22:15,720 --> 00:22:23,980 2 xl ok and even if you can't see the umbrella is there 135 00:22:23,980 --> 00:22:31,000 ok what else what else can we do we are going to put 136 00:22:33,859 --> 00:22:38,740 text and it is worth another container that is going to be text 137 00:22:41,220 --> 00:22:46,519 and we are going to put more classes ok but they are already classes 138 00:22:46,519 --> 00:22:55,400 that well, they are a bit the ones of all the ones that are used the most, then we have for example the font 139 00:22:55,400 --> 00:23:08,160 we want it to be in black, then we already saw that it was with font ball we want the text to be xl 140 00:23:08,160 --> 00:23:21,019 to make it bigger we want the margin for example lower is 2 this is the 141 00:23:21,019 --> 00:23:30,680 margin of the container and if instead of we are going to leave this and so now a test and here I am going to put 142 00:23:37,660 --> 00:23:38,519 and it is 143 00:23:38,519 --> 00:23:58,390 okay okay then here instead of the 5 we are going to say that it is 4 and so it gives me a little 144 00:23:58,390 --> 00:24:06,789 more of this size instead of the text being xl we are going to put it a little smaller 145 00:24:06,789 --> 00:24:35,650 that it is the axis, it is still very large, well something like that, for example, it is worth remembering that we have this 146 00:24:35,650 --> 00:24:44,710 set to 400% that if I put this at 100% it will be modified that also tells me I am going to 147 00:24:44,710 --> 00:24:51,309 leaving it already so we are seeing it well that is also telling me that if it makes sense 148 00:24:51,309 --> 00:25:01,269 that I put the 2 xl here, this comma is not necessary to put it there, it is worth doing the table in this way, 149 00:25:01,269 --> 00:25:06,430 vale en vez de mv si le ponemos m 150 00:25:11,599 --> 00:25:16,339 vamos a ver el margen hemos dicho que es 151 00:25:22,279 --> 00:25:32,920 botón right top es mt mt 2 vamos a ir viendo esto cómo va quedando vale le dejo un poco más de 152 00:25:32,920 --> 00:25:42,759 margin up there mp3 ok I'm leaving that margin and yes I can take it now and put the mp here 153 00:25:42,759 --> 00:25:53,140 because to 3 also ok and I keep doing my card ok then I'm going to put it now because for 154 00:25:53,140 --> 00:26:00,880 example a paragraph we can put a paragraph ok that says something like 155 00:26:02,920 --> 00:26:15,680 Centro situado en la calle Villablanca, Madrid. 156 00:26:15,680 --> 00:26:21,680 Ok, and here I have the class, and we are going to put classes in the text, 157 00:26:21,680 --> 00:26:32,680 because we can tell it that the text is gray, for example. 158 00:26:32,680 --> 00:26:54,680 We are going to put it in that gray color, we are going to tell it, for example, the family, we can tell it to be this one or whatever you want, we are going to put the size of the text, 159 00:26:54,680 --> 00:27:05,299 then we are going to tell it because the text is equal to xl and so it is putting it to me in this way, 160 00:27:05,299 --> 00:27:14,480 okay, well, for example, we are going to put the labels of this, for example, imagine that it is 161 00:27:14,480 --> 00:27:22,700 something from a chat, okay, then we can and tell him well, well, within what is this deep 162 00:27:22,700 --> 00:27:34,640 that contains these bases, let's see if it leaves me if I put it here I put the tip and here I am going to put 163 00:27:34,640 --> 00:27:52,019 this I think this cannot be here but hey we are going to see it right now we are going to put 164 00:27:52,019 --> 00:28:03,859 we are going to put that as it is this degree superior degree superior ok I see that when I take it out of the 165 00:28:03,859 --> 00:28:09,480 div I have already put it out here this is not what I want then this div I am going to take control x 166 00:28:09,480 --> 00:28:17,799 we are going to put it here control v ok I have it here ok I want it to have this 167 00:28:17,799 --> 00:28:25,359 an appearance of labels, so first I'm going to give it here so that it leaves me a margin that 168 00:28:25,359 --> 00:28:34,059 puts a margin between this container of this text, that is, the label, the paragraph and this one 169 00:28:34,059 --> 00:28:43,549 of the spam, because it puts me a margin of three, for example, margin 170 00:28:43,549 --> 00:28:55,299 we are going to put it here I could put a higher margin below but it does not matter we are going to put it 171 00:28:55,299 --> 00:29:13,490 like this it is worth then it is worth what I want to do now with this I want to put a background color 172 00:29:13,490 --> 00:29:23,809 for example it is worth then in the spam we are going to place this text well there you are ok in the 173 00:29:23,809 --> 00:29:35,269 in the span, in the class, we are going to pass it, for example, there is a class that is inline, 174 00:29:38,769 --> 00:29:50,450 this is the block, this is what it does, we are going to see it and so we are also seeing it in the documentation, 175 00:29:50,450 --> 00:29:54,789 then I look here in line as it is block 176 00:30:01,380 --> 00:30:07,220 ok and it tells me to use the line and the blog and the blog control tools for the flow of the text and 177 00:30:07,220 --> 00:30:14,839 elements ok well how it is going to go ok it is going to put me this because that is when I want to work with 178 00:30:14,839 --> 00:30:21,460 it because I underline it that now is the case because I want it in gray ok then we are going to put 179 00:30:21,460 --> 00:30:30,339 we are going to play with the inline blog or the ones that you want to use that of the ones we have here, 180 00:30:30,339 --> 00:30:41,660 okay, so I have the inline blog, it is valid, then this is what we are going to put it if you do not know that you can 181 00:30:41,660 --> 00:30:48,920 do the translations, it is worth it and then it is a bit good for what I tell you, it is worth the like, the block, 182 00:30:48,920 --> 00:30:55,799 background of the text is a bit of the workflow with the text ok ok I'm going to put this one 183 00:30:55,799 --> 00:31:01,859 I'm going to put it too let's go to the page again we're also going to put the class for example 184 00:31:04,359 --> 00:31:11,599 because of the old man ok what I want is that it only puts me with the inline blog is that I only 185 00:31:11,599 --> 00:31:17,200 work on this text that I have passed between where I open the span and I close it ok and I want you to 186 00:31:17,200 --> 00:31:31,430 put a background of type because this is gray and we are going to put it at 200 to see 187 00:31:32,690 --> 00:31:38,470 and it puts it to us in this way we are going to put here so that it seems more this theme of 188 00:31:38,470 --> 00:31:52,390 the labels, okay, what else do I want? Well, man, the rounder, we are going to put the full on it, 189 00:31:53,769 --> 00:31:57,170 I'm going to put it like this, okay, well, 190 00:32:00,789 --> 00:32:09,450 we are going to put a px and a pi, px we are going to put the 3, a pi we are going to put the 2, okay, 191 00:32:09,450 --> 00:32:20,529 remember that the px are the paddings are the internal margins, it is worth more things that we can 192 00:32:20,529 --> 00:32:30,089 pass the size of the text, what happens is that this is his, it would be to control it with, I will tell you 193 00:32:31,509 --> 00:32:36,049 the breaking points that we saw in the previous point, it is worth that it is important 194 00:32:36,049 --> 00:32:44,049 so that your front is responsive, I'm going to leave it like this, here I could 195 00:32:44,049 --> 00:32:51,490 play around too, I could put more classes, for example, to put something 196 00:32:51,490 --> 00:32:59,670 we could take and say here the px is going to be equal to 6 197 00:32:59,670 --> 00:33:12,849 for example the pay will be equal to 4 so that it is not stuck here or to the lower part of the 198 00:33:12,849 --> 00:33:18,450 card or to the margins of right to left, it gives it another feeling if we take this now 199 00:33:20,049 --> 00:33:31,440 and I duplicate it and I put three labels on it, then I put a medium degree here, for 200 00:33:31,440 --> 00:33:51,200 example, and here we put that, okay? Well, well, well, we would have here, okay? All these 201 00:33:51,200 --> 00:34:08,440 options, we can put the text, which is smaller, I'm not going to get it, there it goes, I'm wrong, this is 202 00:34:10,039 --> 00:34:16,940 xl I had it on, it seems to me, yes, and the text, well, we can put it, I haven't touched it here, 203 00:34:18,039 --> 00:34:45,659 I can put it right here, we tell it to be SM, I can tell it that the margin that is on the right, so that this is not stuck, then I can put an MR here 204 00:34:45,659 --> 00:34:48,659 and we are going to say it to 2 205 00:34:48,659 --> 00:34:50,659 ok 206 00:34:50,659 --> 00:34:53,659 and here the same, mr 207 00:34:53,659 --> 00:34:56,659 equal to 2, for example 208 00:34:56,659 --> 00:34:58,659 if we put more labels 209 00:34:58,659 --> 00:35:01,659 we could do it this way 210 00:35:01,659 --> 00:35:04,659 now, of course, I have also put the margin 211 00:35:04,659 --> 00:35:08,659 so instead of saying that the margin is going to be everywhere 212 00:35:08,659 --> 00:35:10,659 to 2 213 00:35:10,659 --> 00:35:13,659 and so I am creating 214 00:35:13,659 --> 00:35:28,659 that card is worth, then you see that in the end it is to put the necessary classes to work on and get what we want, 215 00:35:28,659 --> 00:35:40,659 then what else can we do? Well, going back to this grid, I only told you, well, I define the grid, I tell you that I am going to work in columns and in rows, 216 00:35:40,659 --> 00:35:50,760 we can tell him, okay, I have put four columns on it, if I, for example, this one, this one, I tell him 217 00:35:50,760 --> 00:36:00,349 gray, we are going to see that this has not been written well, let's go to the grid 218 00:36:00,349 --> 00:36:35,969 well, now I don't see it, it's going to be, well, it would be this, it's worth the beginning or end of the 219 00:36:35,969 --> 00:36:42,489 grid column, then you see that it says col span, so if, for example, I want this to start or 220 00:36:42,489 --> 00:36:51,849 to move it to the second column I am going to put it back in the original, it is worth seeing the 221 00:36:51,849 --> 00:37:06,420 critical to be in then here we are going to put it because that is the col col the span not the start 222 00:37:06,420 --> 00:37:12,480 is worth in this case what I want is for it to start in the column for example to be 2 223 00:37:12,480 --> 00:37:19,480 look at how this is already moving it if I put it in column 3 224 00:37:21,519 --> 00:37:29,920 because it will move it and you can move it that way by columns or by rows, 225 00:37:29,920 --> 00:37:35,320 then the way to work with the grid is very very comfortable, we could also take 226 00:37:35,320 --> 00:37:47,539 expand, for example, that this occupies me, let's see how it would be, okay, we have the 227 00:37:49,760 --> 00:37:58,480 col spam, it is worth the col spam because it will expand two columns, then if I also put it here with 228 00:37:58,480 --> 00:38:09,280 spam two columns is worth because this all expands two columns is worth then they are things that 229 00:38:09,280 --> 00:38:17,940 also with the breaking points they let you do very very cool things very powerful ok then 230 00:38:17,940 --> 00:38:23,000 if I leave you now because not to make this eternal video and well you already see how it works more or 231 00:38:23,000 --> 00:38:30,980 less what the different classes are, do not stop working with the documentation, I will not get tired of 232 00:38:30,980 --> 00:38:36,519 saying it is worth it because then they are also making changes in busters, for example, because they changed 233 00:38:39,119 --> 00:38:46,599 when you talk about the upper part, it is worth the but of the button of the bottom of the bottom 234 00:38:46,599 --> 00:38:54,940 inferior because they started to call it how it is or in all those things, well, you have to see 235 00:38:54,940 --> 00:39:05,030 why the only way you are up to date is to be working with the documentation, okay, and 236 00:39:10,530 --> 00:39:12,449 if it makes me the round 237 00:39:12,449 --> 00:39:29,719 we are going to do it the same way so that it follows the same way this is already being 238 00:39:29,719 --> 00:39:44,440 playing validating the form but the shadow well I would say that it is not that it is costing me a lot 239 00:39:44,440 --> 00:40:09,280 we are going to put it here, we are going to put the same one, it is that it is not noticeable, it is that the colors I have not taken them very well, but okay, well, well, well, this is all here, now I would need a little more space 240 00:40:09,280 --> 00:40:21,460 of margin that would be here is the button, not the button, not this one, I'm going to leave it at 3 and the one I'm going to 241 00:40:21,460 --> 00:40:41,300 modify is the margin, which is, let's see where I had them, the margin, the margin, 242 00:40:44,599 --> 00:41:12,429 the top, is mi, well in the mi, it gets, mt, 243 00:41:12,429 --> 00:41:33,219 and we are going to put the 6 here, okay, and so I give it space between the shadow and where I am 244 00:41:33,219 --> 00:41:40,800 putting everything, okay, well, that's all, I don't roll anymore, this is the way to make a 245 00:41:40,800 --> 00:41:46,460 card, okay, always taking into account that you can take you can erase all this 246 00:41:46,460 --> 00:41:51,699 it is worth a little what I have said before I can come to 247 00:41:58,719 --> 00:42:07,320 and we are going to take this instead of this I am going to take this one or there were more examples for example this one 248 00:42:07,320 --> 00:42:27,380 we are going to take this same 2 we are going to copy all this to the one we are going to copy with 249 00:42:28,739 --> 00:42:57,699 and I'm going to paste it here, ctrl v, okay, and we're looking at this, okay, he's done this to me, he doesn't find the image, but I already have this, that card, you see that I would already have it made, the image, I come to the img label, which is here, okay, and instead of putting the girl, we're going to put the image that I do have in src, 250 00:42:57,699 --> 00:43:10,320 src which is the logo sign point jpc ok then I would have it this way and I can 251 00:43:10,320 --> 00:43:17,159 customize it ok but this is a bit what I also like about the tailwind that if you do not know 252 00:43:17,159 --> 00:43:23,699 the css well you can do it in the end you can always look for documentation there and you can 253 00:43:23,699 --> 00:43:30,000 ir haciéndolo no pero si conocéis las css y conocéis lo que son las clases y empecéis a 254 00:43:30,000 --> 00:43:37,500 modificar las clases empezamos a configurar el time with conflict que éste no lo hemos tocado 255 00:43:37,500 --> 00:43:43,519 y lo tocaré ahora para hacer temas o vale bueno pues se pueden hacer muchas cosillas que son muy 256 00:43:43,519 --> 00:43:49,519 muy chulas entonces para todo el tema del desarrollo de interfaces pues podéis hacer 257 00:43:49,519 --> 00:43:58,159 things that later I hope to see in the part of the defense of your end-of-cycle project 258 00:43:58,159 --> 00:44:02,780 in the part of the customer a greeting to all guys see you later