1 00:00:00,730 --> 00:00:06,130 OK, so before we get started with the actual project, I would like to introduce you to all main tools 2 00:00:06,130 --> 00:00:11,840 that we're going to use within this project, and we're actually going to use a set of different tools, 3 00:00:11,860 --> 00:00:14,890 like, for example, font özlem for our icons. 4 00:00:15,310 --> 00:00:22,120 And I'm also going to use bootstrap just because I don't want to get into styling a lot of small little 5 00:00:22,120 --> 00:00:23,510 things like, for example, buttons. 6 00:00:23,530 --> 00:00:31,330 OK, so we just came to the class on bootstrap and it will automatically style not definitely, but 7 00:00:31,330 --> 00:00:33,220 some style will be applied to a button. 8 00:00:34,770 --> 00:00:41,150 And then we're going to Texas for our image, actually for this background image of refind it again, 9 00:00:41,700 --> 00:00:47,400 and I'm also going to be also going to use a bubble image for this one. 10 00:00:47,400 --> 00:00:50,070 And also this images also that bubble image. 11 00:00:51,070 --> 00:00:52,450 OK, so let's get started. 12 00:00:52,480 --> 00:00:58,060 I already created a. folder and I just named it project and I made the bubbles. 13 00:00:58,090 --> 00:01:01,860 OK, so let's go within er create our image folder. 14 00:01:02,920 --> 00:01:08,350 Then create the index, that HMO, and then create a style. 15 00:01:08,480 --> 00:01:12,370 Now, not here outside, just going to move through quickly. 16 00:01:13,340 --> 00:01:18,130 Sorry about that, so don't create the index in the image folder, I just created an empty image folder 17 00:01:18,800 --> 00:01:22,610 and then also outside I'm going to create a standard access. 18 00:01:23,270 --> 00:01:23,770 All right. 19 00:01:24,110 --> 00:01:30,290 Now, within our image folder, we're going to actually search and Google that for the PMG because it 20 00:01:30,290 --> 00:01:34,310 needs to be a PMG file in order to have that background effect. 21 00:01:34,340 --> 00:01:36,460 So here is the file. 22 00:01:36,470 --> 00:01:38,420 You can also download this file. 23 00:01:39,300 --> 00:01:43,620 OK, so I'm just going to keep it in here and there's a bubble hello, bubble. 24 00:01:44,900 --> 00:01:47,940 Right now, let's go back into our e-mail. 25 00:01:48,810 --> 00:01:58,170 Hit that exclamation mark, create our template and see Bubble Bubbles website. 26 00:02:00,750 --> 00:02:02,400 OK, now within here. 27 00:02:04,790 --> 00:02:08,710 All of us should do this or should do something else before. 28 00:02:09,350 --> 00:02:11,330 Let's actually do that. 29 00:02:11,390 --> 00:02:11,840 So this. 30 00:02:13,020 --> 00:02:19,200 Everything would be contained in a main container, in the main tag, which will have a class of main 31 00:02:19,200 --> 00:02:19,800 container. 32 00:02:23,610 --> 00:02:29,640 OK, within the main container will now create a nest egg with a ideate now. 33 00:02:34,460 --> 00:02:37,220 And within our Naftogaz, we'll create an image file. 34 00:02:38,940 --> 00:02:51,570 This image file will then have the bubble and will have a Iot of logo and also alternate text of logo 35 00:02:52,920 --> 00:02:55,860 because it's only open this up using leftover. 36 00:02:58,720 --> 00:03:07,520 And it should be the huge bubble, but we have this at least now underneath our image tag. 37 00:03:07,540 --> 00:03:12,340 I will now create a label and a button and this will be excellent. 38 00:03:12,370 --> 00:03:14,260 We go back, you know, finished project. 39 00:03:14,440 --> 00:03:22,420 This label will be this tech tax right here and our image and our bubble, which is this would be the 40 00:03:22,420 --> 00:03:26,020 logo, you know, make this smaller and then this is the button that we need. 41 00:03:26,050 --> 00:03:29,080 OK, so let's go back into our e-mail. 42 00:03:29,410 --> 00:03:31,400 So we're still staying within the Naftogaz. 43 00:03:31,480 --> 00:03:37,660 OK, now let's create the label tag uncrating label test because they're in line automatically. 44 00:03:37,660 --> 00:03:40,110 And also they're great for targeting things. 45 00:03:40,110 --> 00:03:45,550 So I'm going to give it for a logo and I'm going to give it a name for as bubbling. 46 00:03:49,930 --> 00:03:58,030 OK, after night, after our label going can trade our button for the navigation and this will have 47 00:03:58,030 --> 00:04:00,220 a class of between. 48 00:04:01,350 --> 00:04:02,340 And 49 00:04:04,470 --> 00:04:06,600 yeah, and sign up. 50 00:04:09,710 --> 00:04:16,430 OK, so as soon as I do this, I would take a look at this finished project we have here a bubble and 51 00:04:16,430 --> 00:04:20,750 we have here are icon, not a computer, but our button. 52 00:04:22,810 --> 00:04:26,630 Now, let us link up a couple of things, so let's go to our website. 53 00:04:27,100 --> 00:04:29,700 First of all, I want to ask some of your stuff. 54 00:04:29,860 --> 00:04:31,880 Now, let me start with post-test. 55 00:04:31,900 --> 00:04:37,040 So if you never use bootstrap is a kind of a quick way to throw together a website to prototype them. 56 00:04:37,380 --> 00:04:40,060 They are also a lot of website using both steps out there. 57 00:04:40,060 --> 00:04:44,720 And you can obviously recognize them because they look really bootstrap. 58 00:04:45,340 --> 00:04:49,750 So let's go to get started and let's copy this link right here. 59 00:04:49,750 --> 00:04:52,600 And this will link up the success for the board. 60 00:04:52,880 --> 00:04:58,240 So I'm always putting them into right above our title, not. 61 00:04:58,240 --> 00:05:00,610 Next up, I'm going to link up my assessment. 62 00:05:00,700 --> 00:05:01,040 Hello. 63 00:05:02,350 --> 00:05:05,010 Link and style DOCSIS. 64 00:05:05,860 --> 00:05:06,230 OK. 65 00:05:06,340 --> 00:05:08,590 And actually above my success. 66 00:05:09,850 --> 00:05:17,260 I also used to link up my font, awesome, so you just go to fantasy and grab on to your kit and to 67 00:05:17,260 --> 00:05:22,540 grab onto mine, to go to your account kids and click right here on your kid. 68 00:05:23,260 --> 00:05:25,440 You can grab your kit is the free kit. 69 00:05:26,170 --> 00:05:28,770 Don't have a professional account on your free account. 70 00:05:28,780 --> 00:05:30,760 This is enough for me for now. 71 00:05:31,650 --> 00:05:35,920 OK, so as soon as I have both set now linked up, let's take a look at our button. 72 00:05:36,520 --> 00:05:40,960 Let's go back to our website and he button should be right here. 73 00:05:41,290 --> 00:05:42,190 And it is right here. 74 00:05:42,190 --> 00:05:45,460 But it is it's it's bootstrapping. 75 00:05:45,640 --> 00:05:46,930 This whole browser buttons. 76 00:05:46,930 --> 00:05:48,820 Look, it has black. 77 00:05:49,330 --> 00:05:51,900 Does it have a white or transparent background? 78 00:05:51,910 --> 00:05:52,990 I don't even know. 79 00:05:53,250 --> 00:05:53,560 Hmm. 80 00:05:54,730 --> 00:05:58,390 Nevertheless, be considered as, for example, primary. 81 00:05:59,400 --> 00:06:03,730 We have a button that would extend this close to Betty and. 82 00:06:05,070 --> 00:06:05,730 Primary. 83 00:06:08,870 --> 00:06:14,590 And go back in here, that would be a blue button, they could go to blue stepping, go through to try 84 00:06:14,600 --> 00:06:22,610 to two components and if you go to bartends, you see this button, secondary, primary success, danger 85 00:06:22,610 --> 00:06:23,450 and so forth and so on. 86 00:06:24,520 --> 00:06:29,600 I'm going to stick with the normal button because I need to do something else to it later on. 87 00:06:29,720 --> 00:06:31,430 OK, so we have Bozkurt linked up. 88 00:06:31,430 --> 00:06:32,840 We have also linked up. 89 00:06:33,680 --> 00:06:43,550 And if all we need to do now is link up our main source for this, I'm going to take the class of Maine. 90 00:06:45,290 --> 00:06:48,790 So we're going to access first of all, let's do a general reset. 91 00:06:51,560 --> 00:06:52,750 So margin zero. 92 00:06:52,760 --> 00:06:53,660 Padding zero. 93 00:06:55,990 --> 00:06:57,700 And then boxes and bought a box. 94 00:07:00,870 --> 00:07:06,870 Now, I'm also going to create a few variables, if you never use variables in success, one to create 95 00:07:06,870 --> 00:07:08,480 a variable is the way he can do it. 96 00:07:08,880 --> 00:07:11,210 First of all, target the root, OK? 97 00:07:11,760 --> 00:07:18,990 And within the root, the way to create a variable is by tapping Dash Dash, then the name of the variable. 98 00:07:18,990 --> 00:07:23,100 For example, I'm going to name this crime scene to be my primary color. 99 00:07:25,330 --> 00:07:30,280 And I thought, well, you could leave it a color, you could give it, you can type in here, whatever 100 00:07:30,280 --> 00:07:33,290 you want, whatever characteristic you want to have this variable. 101 00:07:33,760 --> 00:07:46,360 Now, I'm going to go with RGV and 255, 255, 255 and zero point eight nine later project will use 102 00:07:46,360 --> 00:07:47,710 variables more often. 103 00:07:47,710 --> 00:07:50,020 But for now, you're just going to create two variables. 104 00:07:50,590 --> 00:07:55,330 So secondary color and this will be actually the same color almost. 105 00:07:57,280 --> 00:08:06,320 Let me take this order copy paste down here and going to just change the capacity to hold all part of 106 00:08:06,320 --> 00:08:10,330 free the you out and close up the SEMICON. 107 00:08:12,130 --> 00:08:19,520 Not the way we use variables, for example, going to take the body and body tag and say color in a 108 00:08:19,570 --> 00:08:25,060 bar and within parentheses, I need to call upon my primary color. 109 00:08:27,550 --> 00:08:29,830 And that's it, that's pretty much it. 110 00:08:29,860 --> 00:08:35,800 So if I would change this color right here, then also the variable would change or the color within 111 00:08:35,800 --> 00:08:36,310 the variable. 112 00:08:37,450 --> 00:08:39,430 Now, let me I want to link up. 113 00:08:39,430 --> 00:08:41,740 Here is Google fonts. 114 00:08:42,370 --> 00:08:46,360 And for this to just go into typing Google fonts. 115 00:08:51,300 --> 00:08:57,150 And go and I think they use the phone space, something space. 116 00:08:58,130 --> 00:08:59,810 I see space. 117 00:09:05,430 --> 00:09:12,190 That is praise, grotesque, OK, and I think I use the regular form. 118 00:09:12,210 --> 00:09:12,550 Yep. 119 00:09:13,050 --> 00:09:21,450 So select the style, go to import and I'm going to import it in our success. 120 00:09:22,060 --> 00:09:26,880 So let's go back to our document and I get to import it right after our reset. 121 00:09:28,940 --> 00:09:33,100 So the first thing that will be called upon is this link right here. 122 00:09:33,770 --> 00:09:37,970 Now, in order to use this, we're going to copy the font family. 123 00:09:40,650 --> 00:09:48,490 So for font, font, awesome and the copied into a body and now if I type in any kind of text, I should 124 00:09:48,490 --> 00:09:49,140 do as I said. 125 00:09:51,330 --> 00:09:57,540 It will have that font now can see our text right here, because it has now a white color. 126 00:09:58,500 --> 00:10:02,010 OK, so the last thing I want to do is when I hover over something. 127 00:10:02,950 --> 00:10:07,600 All right, to have a HRO setting, for example. 128 00:10:10,060 --> 00:10:16,990 We're going to take a let's call this a utility class, I constantly use utility classes and I'm also 129 00:10:16,990 --> 00:10:19,750 going to explain to what their meaning is. 130 00:10:20,320 --> 00:10:21,780 CTT class. 131 00:10:22,180 --> 00:10:29,740 Well, utility class is a class that you wish to call upon when something is repetitive, for example, 132 00:10:29,740 --> 00:10:30,580 Hober Effects. 133 00:10:31,420 --> 00:10:33,440 And to be more specific. 134 00:10:33,460 --> 00:10:35,590 This site has a lot of power effects. 135 00:10:35,920 --> 00:10:42,280 If you go or finished project, you see, if I go over this icons, they all have a halo effect and 136 00:10:42,280 --> 00:10:45,940 the effect is the cursors pointer and the color turns white. 137 00:10:46,270 --> 00:10:49,990 And also you see the car turning white, but not instantly. 138 00:10:49,990 --> 00:10:51,160 It has a bit of a delay. 139 00:10:51,610 --> 00:10:58,180 And this means it has a hit, it has a transition and a transition is well, I used three zero point 140 00:10:58,180 --> 00:11:02,290 three seconds and is a key each item has. 141 00:11:02,290 --> 00:11:08,950 It is also the box here has a helper effect, but this is another how they affect this shadow hover 142 00:11:08,950 --> 00:11:09,300 effect. 143 00:11:10,420 --> 00:11:17,170 So let's create also this icon right here or this button has this hover effect and this button as well. 144 00:11:17,560 --> 00:11:18,850 So let's create this class. 145 00:11:20,960 --> 00:11:31,190 I'm just going to create a class called power, and when we hover over this class, the cursor is pointer. 146 00:11:33,180 --> 00:11:33,960 The color. 147 00:11:35,300 --> 00:11:45,020 Is actually primary color, so that variable called educated Savar and primary color. 148 00:11:47,170 --> 00:11:53,590 And as I said, it needs to have a transition of zero point three seconds and ease. 149 00:11:57,240 --> 00:12:03,960 So that's basically it for this class, and I'm also going to create another class, which is Box Shadow. 150 00:12:05,510 --> 00:12:12,350 Delete this and say box the shadow on our box shadow. 151 00:12:16,640 --> 00:12:20,780 So this class will have a few different specifications. 152 00:12:22,340 --> 00:12:26,180 First of all, I want to have is that index of six. 153 00:12:27,200 --> 00:12:34,710 Now, we didn't learn about that thing this says, but this just means this needs to be on a list. 154 00:12:34,810 --> 00:12:36,290 Just imagine this as layers. 155 00:12:37,280 --> 00:12:40,730 If layer one is that index one. 156 00:12:42,320 --> 00:12:48,440 For example, then they should be on the atelier with the king, the six. 157 00:12:49,440 --> 00:12:50,050 Obviously. 158 00:12:51,530 --> 00:12:58,100 All the layers that are using that the index must be positioned, there are either position, absolute 159 00:12:58,100 --> 00:13:04,260 or relative or fixed or sticky, but they need to be positioned OK. 160 00:13:04,280 --> 00:13:09,890 Another characteristic is well going to the shadow, obviously, and it's punctured. 161 00:13:09,940 --> 00:13:13,010 We have a transition and not a transition. 162 00:13:14,050 --> 00:13:19,730 But it will have a collar, so it's going to be zero zero, the shadow itself. 163 00:13:20,150 --> 00:13:29,800 Forty five pixels, the spread of it and the intensity of two pixels and the color will be a deficit 164 00:13:29,800 --> 00:13:30,460 of white collar. 165 00:13:31,570 --> 00:13:37,680 Now, the last thing is that it's going to have a transition to less property and I'm going to use all 166 00:13:37,960 --> 00:13:38,990 the same transition again. 167 00:13:39,010 --> 00:13:41,770 Point three seconds and it's. 168 00:13:47,310 --> 00:13:52,860 OK, so how do we use these classes where we just apply them, for example, in a bottom here? 169 00:13:53,930 --> 00:14:00,360 And we get to choose Hober and I could go back to our project we have over the button. 170 00:14:00,930 --> 00:14:04,120 Well we can't say anything because we need the background color. 171 00:14:05,030 --> 00:14:10,850 But let's listen to the background color, not the background color, but the background itself, not 172 00:14:10,850 --> 00:14:14,570 the background itself is true. 173 00:14:14,630 --> 00:14:16,130 We didn't take care of it. 174 00:14:16,490 --> 00:14:23,690 So a Castlemaine container and within this class we're going to set the background. 175 00:14:24,140 --> 00:14:27,860 Now, first of all, we need to have a few general settings with. 176 00:14:29,460 --> 00:14:36,540 Of one hundred percent and a height of 100 Hupert Hind's. 177 00:14:37,920 --> 00:14:46,050 And this just basically means that our entire page will have a height of one viewport now for the image 178 00:14:46,050 --> 00:14:48,540 because I need to use his background. 179 00:14:51,900 --> 00:15:00,960 Image and this will have a you are L and within here actually going to target our image folder again. 180 00:15:05,590 --> 00:15:08,740 And this search, why the search bubbles? 181 00:15:11,860 --> 00:15:22,120 And, Carol, I hope I'm going to find this image quickly, although this was this one, yeah, it was 182 00:15:22,120 --> 00:15:22,540 this one. 183 00:15:23,260 --> 00:15:30,400 So go here, go to free download now would suggest to take a smaller image, a medium size image was 184 00:15:30,410 --> 00:15:32,420 noted for a patient load quicker. 185 00:15:33,130 --> 00:15:35,660 So let's go with download free download. 186 00:15:36,580 --> 00:15:45,220 You can donate something, but we're going to just go to a page into images and save our image. 187 00:15:46,800 --> 00:15:50,400 And now we could actually choose it from the URL. 188 00:15:54,480 --> 00:15:57,690 Images, and it was this one. 189 00:15:59,190 --> 00:16:08,720 Probably not a single, so there's a website and it should be in here, a, oh, OK, I misspelled the. 190 00:16:12,880 --> 00:16:18,730 Our container there, so there's a background image and there's a huge bubble, and if we hover now 191 00:16:18,730 --> 00:16:19,420 over. 192 00:16:21,270 --> 00:16:24,090 Or a button here, you can see the effect taking place. 193 00:16:25,000 --> 00:16:27,470 I guess that's basically it for this video. 194 00:16:27,880 --> 00:16:29,540 You can continue on in the next one. 195 00:16:29,550 --> 00:16:30,600 So see the next one.