1 00:00:01,080 --> 00:00:08,010 OK, guys here, which will add to put in so the media, when I read the page, I want to hear a menu 2 00:00:08,490 --> 00:00:16,090 that will give the user a choice to choose between the dark mood and the light mood. 3 00:00:16,410 --> 00:00:25,620 The first thing we can do right here is to go to this party and then we can add here and Denver and 4 00:00:25,650 --> 00:00:31,400 give it a class menu or just that we can give it a class of choice. 5 00:00:32,790 --> 00:00:41,890 And then here inside we can make and another division and give it a class of two choices. 6 00:00:45,060 --> 00:00:54,800 OK, after this part, what we can do is to adhere to the S right here, OK? 7 00:00:55,200 --> 00:01:01,810 And for this one, we can make for where choice and choice. 8 00:01:03,960 --> 00:01:15,450 I want to be having position absolute for the width of one hundred the W and five of one hundred X and 9 00:01:15,450 --> 00:01:24,120 for the background color I want it to be having the background color of black or we can make it six 10 00:01:24,130 --> 00:01:31,750 percent and then here we can just decrease the reporting that first we can reload. 11 00:01:32,130 --> 00:01:38,040 So now we got this for all of the that we can just give it that index of nine to nine. 12 00:01:39,160 --> 00:01:46,560 OK, so now we got here the index again wanted the index or the index. 13 00:01:46,770 --> 00:01:47,940 We can delay this one. 14 00:01:51,210 --> 00:01:56,400 We can't scroll down here, we can see the images, but we don't want all of that. 15 00:01:57,300 --> 00:02:03,330 So this is having the index more than the index of the divisions. 16 00:02:03,570 --> 00:02:10,340 What we can do to solve this part is to go here and add the index with a higher number. 17 00:02:10,680 --> 00:02:15,940 We can give here an index of ninety nine and then we can reload. 18 00:02:16,290 --> 00:02:23,310 So here we don't have the images, neither the images nor the map. 19 00:02:23,970 --> 00:02:29,460 OK, after this part we can just decrease the degree of the plaque. 20 00:02:30,300 --> 00:02:34,200 We can start from here and see what we have now. 21 00:02:34,200 --> 00:02:37,040 We can make it again left before. 22 00:02:38,790 --> 00:02:41,910 I think that's good activist part. 23 00:02:42,090 --> 00:02:46,550 What we can do is to go to the index of esteemable. 24 00:02:47,310 --> 00:02:54,820 And for this one we can go now back to this disaster and make for the two charts 25 00:02:57,610 --> 00:03:01,520 and this one to be having the padding 26 00:03:04,240 --> 00:03:10,260 of twenty pixels, shadow of every pixel for pixels. 27 00:03:10,710 --> 00:03:16,170 So we so off the plank and this one to be having the position. 28 00:03:18,970 --> 00:03:27,680 Thought said, left off 50 percent, top of 50 percent. 29 00:03:28,990 --> 00:03:36,330 And here we can add, transform, translate negative 50 percent and negative 50 percent. 30 00:03:36,370 --> 00:03:38,050 And we talked about this before. 31 00:03:39,040 --> 00:03:43,720 So here we got this at the center and always be at the center. 32 00:03:44,380 --> 00:03:47,080 OK, that is good at this part. 33 00:03:47,290 --> 00:03:51,290 We can give it ground color white. 34 00:03:53,740 --> 00:03:56,180 So you've got the background color all the way. 35 00:03:56,530 --> 00:04:01,450 We will just hear a lot more content to spark the frisking. 36 00:04:01,460 --> 00:04:06,850 We will do right here is OK here. 37 00:04:06,850 --> 00:04:12,880 We can at P give class access with good morning. 38 00:04:15,520 --> 00:04:25,720 And here we can add another one day time or it's let's hope for an example, 18. 39 00:04:26,390 --> 00:04:28,120 Oh OK. 40 00:04:28,120 --> 00:04:30,370 So now we can go and reload. 41 00:04:30,770 --> 00:04:31,740 So here we got this. 42 00:04:31,960 --> 00:04:33,510 We can just make it larger. 43 00:04:33,520 --> 00:04:41,770 We can go to this bar and solve one and left be up to let's see what we have here right now. 44 00:04:42,760 --> 00:04:43,810 OK, that's good. 45 00:04:44,200 --> 00:04:48,400 We can just make it for the text centered. 46 00:04:50,820 --> 00:04:55,420 Senator, let's see what we have here now. 47 00:04:56,140 --> 00:04:57,060 OK, that's good. 48 00:04:57,430 --> 00:05:06,550 We can go here and pile off the weight of Holder and then we can cover this one and apply it also here. 49 00:05:08,320 --> 00:05:09,640 OK, that's good here. 50 00:05:09,970 --> 00:05:17,440 And then what we can do after the start is at a pool, the radius for this thing, we can go to the 51 00:05:17,530 --> 00:05:19,210 seats right here. 52 00:05:21,850 --> 00:05:34,240 And then here we can make the yes, here to be having broader range, uh, let's try the 10 pixels on 53 00:05:34,420 --> 00:05:38,950 that 10 pixels and we can just try to add more padding. 54 00:05:39,280 --> 00:05:44,590 We can add padding of, uh, where to be 30 or 40. 55 00:05:45,620 --> 00:05:48,260 OK, 40 is very good. 56 00:05:48,640 --> 00:05:52,270 And then after this party, we can add a porter. 57 00:05:52,570 --> 00:05:59,910 We can just go here and give and give it a class line. 58 00:06:00,370 --> 00:06:08,020 And with this line, we can go to the system and add some styling like here the line. 59 00:06:08,630 --> 00:06:16,570 This be having background color of black width of one hundred percent of this part. 60 00:06:16,960 --> 00:06:18,820 And I like it. 61 00:06:18,950 --> 00:06:20,740 So let's see what we have here. 62 00:06:21,550 --> 00:06:23,680 OK, now we got this and this is good. 63 00:06:24,160 --> 00:06:32,710 And then we can add margined top and and put Putin we can just go with your margin type of pixels and 64 00:06:32,710 --> 00:06:33,180 margin. 65 00:06:33,190 --> 00:06:34,570 Put them there. 66 00:06:37,000 --> 00:06:38,260 OK, that's good. 67 00:06:38,630 --> 00:06:46,120 After this part we can add two charge here, but first we can add what do you prefer. 68 00:06:46,390 --> 00:06:50,800 We can just go here and add to here. 69 00:06:50,980 --> 00:06:51,430 Yes. 70 00:06:51,730 --> 00:07:00,750 Be with one and stindl phone wait all older and here we can add Athabascan retallack. 71 00:07:01,930 --> 00:07:03,010 OK, that's good. 72 00:07:03,310 --> 00:07:09,280 And inside here we can make what we do or what. 73 00:07:09,430 --> 00:07:19,690 Like what would you prefer and then we can go here. 74 00:07:20,030 --> 00:07:22,530 So now we get what like mood, what you prefer. 75 00:07:22,780 --> 00:07:25,390 And here we want to add two items. 76 00:07:25,990 --> 00:07:32,740 The first one to be for the light and the second one to be for the dark. 77 00:07:32,980 --> 00:07:43,510 We can just go here for this part and here we can make do with class of road and then we can make here 78 00:07:43,630 --> 00:07:47,260 the great system we can make here in here. 79 00:07:47,260 --> 00:07:52,750 First, we can make justified content evenly and align tends to be centered. 80 00:07:53,200 --> 00:07:55,180 No flex both center. 81 00:07:57,250 --> 00:08:00,400 And then here we can just make uh. 82 00:08:03,250 --> 00:08:05,020 OK, let me think about it. 83 00:08:05,380 --> 00:08:13,320 What you can just do here is Devon with class column expects large of four. 84 00:08:13,330 --> 00:08:24,450 We can just make it four column that's large for coal and large for OK column medium all five columns, 85 00:08:24,480 --> 00:08:29,360 small twelve or just let's make it ten and column often. 86 00:08:30,160 --> 00:08:43,450 OK, and we can give here an idea of life and for the other one we can give it for the dark dog and 87 00:08:43,630 --> 00:08:46,600 then he's not here but we can just get it for the put in. 88 00:08:46,840 --> 00:08:53,350 We can add here a button and give it a class of uh, light. 89 00:08:53,890 --> 00:08:57,370 And then inside here we can type light. 90 00:08:57,860 --> 00:08:58,240 No. 91 00:08:59,960 --> 00:09:10,780 And then we can't copy this one and apply for the dog would just be for dog, go here and reload. 92 00:09:11,090 --> 00:09:13,820 So here we go, the light mood and the dark mood. 93 00:09:14,090 --> 00:09:19,240 Let's go to the teeth so we can add some styling for both of them. 94 00:09:19,730 --> 00:09:32,800 We can just go here and add for the light to be having Peg left off Phil's padding right there because 95 00:09:32,810 --> 00:09:38,180 those padding top of Phil's padding put them all in films. 96 00:09:38,750 --> 00:09:50,720 And this to be having quarter of, uh, three pixels solid black and then here to be having background 97 00:09:50,870 --> 00:09:51,350 color. 98 00:09:53,660 --> 00:09:58,520 So we got the light and we can just delete the background color in the background. 99 00:09:58,970 --> 00:10:00,680 So here we have no background. 100 00:10:00,890 --> 00:10:02,990 We can just the phone size. 101 00:10:03,290 --> 00:10:05,650 We can go here and make font size. 102 00:10:05,660 --> 00:10:07,510 Let's try to identify. 103 00:10:10,670 --> 00:10:11,990 No, that's very big. 104 00:10:12,620 --> 00:10:16,610 What about just, uh, 15 or 17? 105 00:10:18,060 --> 00:10:19,790 No, that's not very good. 106 00:10:20,390 --> 00:10:23,360 OK, we can try for 20. 107 00:10:24,860 --> 00:10:25,880 No, no, no. 108 00:10:26,180 --> 00:10:27,190 This is not very good. 109 00:10:27,200 --> 00:10:31,470 We can ask for this one to be five and five. 110 00:10:31,490 --> 00:10:32,730 Let's see what we have here. 111 00:10:34,370 --> 00:10:35,840 No, that's not very good. 112 00:10:36,560 --> 00:10:37,400 It's OK. 113 00:10:37,400 --> 00:10:38,810 We can try four. 114 00:10:39,410 --> 00:10:40,100 Where is it? 115 00:10:40,760 --> 00:10:41,840 It is at the top. 116 00:10:43,820 --> 00:10:47,750 OK, this one here, five, 117 00:10:50,390 --> 00:10:53,780 five, five, four and five. 118 00:10:55,280 --> 00:10:56,750 OK, that's good. 119 00:10:56,750 --> 00:11:00,560 Right now we can just add some margin for this part. 120 00:11:00,890 --> 00:11:05,090 We can go here and add a little margin top. 121 00:11:06,040 --> 00:11:08,180 It feels OK. 122 00:11:08,180 --> 00:11:10,940 We can add more something like fifteen. 123 00:11:11,270 --> 00:11:11,990 Sixteen. 124 00:11:13,220 --> 00:11:14,810 OK, this is good right here. 125 00:11:14,930 --> 00:11:17,870 We can just make it TGP in the past. 126 00:11:19,880 --> 00:11:24,680 OK, after this part we can add the of the radius. 127 00:11:24,680 --> 00:11:34,580 We can just go here and, and look for the radius from here, the radius of five pixels. 128 00:11:36,170 --> 00:11:37,270 OK, that's good. 129 00:11:37,520 --> 00:11:47,360 Now we can infer the dark lord we can just go here and add this one here for the dark, this one to 130 00:11:47,360 --> 00:11:50,000 be having the new quarter. 131 00:11:50,750 --> 00:11:54,950 But the pink from to be black color. 132 00:11:55,370 --> 00:11:58,400 Why we can just go in there and reload. 133 00:11:58,760 --> 00:12:05,670 So here we got for the dark and we can just make the quarter of none because we tried in the quarter 134 00:12:05,700 --> 00:12:06,280 on the picture. 135 00:12:06,800 --> 00:12:12,830 So here we go no further and to be the same and the width, we can just copy this corner. 136 00:12:15,890 --> 00:12:18,980 So now we are equal in width. 137 00:12:20,120 --> 00:12:21,620 OK, that's good. 138 00:12:21,630 --> 00:12:27,740 No, they're not equal because we have to for department and here they are equal. 139 00:12:28,040 --> 00:12:28,980 OK, that's good. 140 00:12:29,000 --> 00:12:36,110 Now it comes with me whenever we go in the next video, we will learn about the OnLoad function because 141 00:12:36,110 --> 00:12:37,310 I don't want this to be up. 142 00:12:37,310 --> 00:12:41,930 You're always I want this to be appearing for the load function. 143 00:12:42,320 --> 00:12:51,020 And when I click on something here, like Dark Mood, like mood, I want it to be disappearing and have 144 00:12:51,140 --> 00:12:52,700 the dark right here. 145 00:12:53,030 --> 00:13:00,050 And also we want to change this one according to the data or the hour, and we want to change this one 146 00:13:00,050 --> 00:13:02,150 to be dynamically added. 147 00:13:02,510 --> 00:13:04,340 We will do that in the next week. 148 00:13:04,610 --> 00:13:06,350 So good luck and have fun.