1 00:00:00,710 --> 00:00:05,750 This lesson is going to be focused on success, so you're welcome to skip this or you're welcome to 2 00:00:05,750 --> 00:00:07,070 apply your own success. 3 00:00:07,370 --> 00:00:13,940 And as well, you can listen through what I'm going to be implementing in order to provide some styling 4 00:00:13,940 --> 00:00:16,660 for the various elements that we created within our e-mail. 5 00:00:16,940 --> 00:00:21,140 So first of all, starting with the clock, let's add some different styling. 6 00:00:21,140 --> 00:00:23,120 We can add a background color to that. 7 00:00:23,750 --> 00:00:25,180 So make our clock blue. 8 00:00:25,760 --> 00:00:29,590 We'll set our width to be six hundred picks. 9 00:00:30,520 --> 00:00:32,360 Also, we're going to text the line. 10 00:00:32,630 --> 00:00:34,010 So text the line center. 11 00:00:35,340 --> 00:00:38,730 Update the font color, so turn out to be white. 12 00:00:39,630 --> 00:00:47,490 And we'll update the font size as well, so font size and set that to 2:00 a.m., so refresh, see what 13 00:00:47,490 --> 00:00:48,090 that looks like. 14 00:00:48,120 --> 00:00:50,040 So there's our clock output there. 15 00:00:50,850 --> 00:00:53,190 And of course, I do have it really on a big screen. 16 00:00:53,220 --> 00:00:59,100 So I can actually I'm going to make the smaller down to 1:00 a.m. so you might want to adjust. 17 00:00:59,100 --> 00:01:00,900 It, however, works best for you. 18 00:01:01,110 --> 00:01:04,460 I get to update those inner spans of class. 19 00:01:04,470 --> 00:01:12,990 So the first spans that we have within the clock, so clock and all of the first spans, but we do five 20 00:01:12,990 --> 00:01:18,690 picks of padding, also do a border radius to round it a little bit. 21 00:01:20,450 --> 00:01:28,220 So 10 pics of border radius and do a background color for this one as well and set that to be black 22 00:01:28,230 --> 00:01:28,970 so it stands out. 23 00:01:29,930 --> 00:01:31,810 So now we've got our countdown there. 24 00:01:32,150 --> 00:01:36,410 We also need a little bit more spacing around the clock from the input field. 25 00:01:38,760 --> 00:01:41,640 Let's select our input, play some styling to that. 26 00:01:43,210 --> 00:01:52,480 I do 15 pics of podding, also a margin of 20 pics, and we'll do a larger font size for this one as 27 00:01:52,480 --> 00:01:54,680 well, refresh and see what that looks like. 28 00:01:55,630 --> 00:01:57,200 So we've got our input there. 29 00:01:57,250 --> 00:01:59,530 I've got my time that's being put there. 30 00:02:00,340 --> 00:02:08,110 And let's update the last bit here where we've got a span and a span inside of a span and setting that 31 00:02:08,110 --> 00:02:10,150 as how about we set it to Darkbloom. 32 00:02:10,780 --> 00:02:11,520 So refresh. 33 00:02:11,680 --> 00:02:14,290 So there's our times there that we're setting. 34 00:02:15,550 --> 00:02:18,790 So there we have our countdown timer with a little bit of styling. 35 00:02:18,790 --> 00:02:23,230 And of course, you can apply your own styling as needed and actually are going to change it from dark 36 00:02:23,230 --> 00:02:29,470 blue to red so that they stand out a little bit more, so that when we refresh it, we've got more outstanding 37 00:02:29,470 --> 00:02:29,950 content. 38 00:02:30,440 --> 00:02:35,230 We can also add in a little bit more padding as well, maybe a little bit less padding so that we've 39 00:02:35,230 --> 00:02:40,870 got our days, hours, minutes and seconds so we can always adjust this and select it and we can see 40 00:02:40,870 --> 00:02:42,400 that it changes as well. 41 00:02:42,520 --> 00:02:48,130 In addition to when we make our updates, let's take something further into the future and see that 42 00:02:48,400 --> 00:02:50,560 we've got a nice looking countdown timer. 43 00:02:50,680 --> 00:02:52,990 And when we refresh it, all the functionality is still there. 44 00:02:53,290 --> 00:02:55,360 So go ahead and add this and update it. 45 00:02:55,570 --> 00:02:57,550 Add some styling, have some fun with it. 46 00:02:57,790 --> 00:03:01,900 Thanks again for taking the site and learning how to develop this countdown timer.