All language subtitles for 7. Styling The Hero Block Continued

af Afrikaans
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
tl Filipino
fi Finnish
fr French
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian Download
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:01,130 --> 00:00:06,800 Let's start getting some work done on our buttons because we've neglected those a little bit so far 2 00:00:07,060 --> 00:00:10,580 and definitely doesn't look as good as our nice text over there. 3 00:00:10,580 --> 00:00:17,060 So let's go ahead and start by on this container the wraps all of our buttons. 4 00:00:17,060 --> 00:00:25,400 Let's go ahead and add a justify of center onto here and that will center up our items along the main 5 00:00:25,400 --> 00:00:30,120 axis which for this container is on the default direction of row. 6 00:00:30,140 --> 00:00:35,930 So that's the horizontal direction which is where we wanted to move our buttons over. 7 00:00:35,930 --> 00:00:38,030 So let's go ahead and save that. 8 00:00:38,060 --> 00:00:39,520 We'll see the page refresh. 9 00:00:39,530 --> 00:00:43,500 And now we've got very nicely centered buttons. 10 00:00:43,520 --> 00:00:52,720 Now let's go ahead and on our estimate button we'll say a class name of classes dot estimate button. 11 00:00:52,880 --> 00:01:01,130 And so let's go up underneath our animation style and we'll add our estimate button style if you remember 12 00:01:01,370 --> 00:01:02,480 in our theme. 13 00:01:02,510 --> 00:01:11,000 We actually already have an estimate style right here that we used for the estimate button in the header. 14 00:01:11,000 --> 00:01:13,440 So let's go over and here. 15 00:01:13,520 --> 00:01:22,140 Let's extend that theme theme dot typography dot estimate style. 16 00:01:22,280 --> 00:01:34,820 But then we're also going to want to add our background color of theme dot palettes dot common dot Orange 17 00:01:35,210 --> 00:01:41,230 a border radius of 50 50. 18 00:01:41,230 --> 00:01:51,620 You can just do the number there a height of 45 pixels a width of one hundred and forty five pixels 19 00:01:52,430 --> 00:01:56,960 and a margin right of 40 pixels. 20 00:01:57,050 --> 00:02:02,300 And that's going to put a little margin on the right side of that estimate button which is in between 21 00:02:02,360 --> 00:02:06,040 both of the buttons to give us a little bit of space there. 22 00:02:06,050 --> 00:02:14,870 So let's go ahead and save this to see our transformation and there is our nice very easily styled button 23 00:02:16,160 --> 00:02:22,940 if we come over and hover over this button though you can see the covers with a weird gray color. 24 00:02:22,940 --> 00:02:28,220 For some reason and that's definitely not the look that we want our users to see that's going to make 25 00:02:28,220 --> 00:02:31,870 you think it's disabled and you can't press it or something like that. 26 00:02:31,940 --> 00:02:42,080 So let's go up and on the estimate button style let's add an ampersand colon hover effect and we'll 27 00:02:42,080 --> 00:02:52,170 open that up and whenever we are hovering over this item let's set a background color of theme dot powered 28 00:02:52,960 --> 00:03:01,070 Howard's and this time we're actually going to use secondary and this is the system the I explained 29 00:03:01,070 --> 00:03:08,870 when we'd went over the theme they actually can generate other color variants for you based on your 30 00:03:08,870 --> 00:03:16,490 specified main colors and as you can see in our theme if we come up to the palette under a primary and 31 00:03:16,490 --> 00:03:22,510 secondary we've passed in our main of ARC blue and our main of ARC orange. 32 00:03:22,610 --> 00:03:28,000 And so what this does is it generates a light and a dark version that we can use. 33 00:03:28,010 --> 00:03:34,990 So let's come over and would access the secondary dot light version. 34 00:03:35,060 --> 00:03:39,100 So if we go ahead and save that we'll see the page refresh. 35 00:03:39,140 --> 00:03:44,200 And now if I come and hover over the button you can see it just kind of lights up a little bit and that 36 00:03:44,240 --> 00:03:46,360 I think is exactly what I would like. 37 00:03:46,460 --> 00:03:52,820 Definitely better than turning it gray and I actually notice if we come and check the button in the 38 00:03:52,820 --> 00:03:57,060 header we can see it does a weird opacity thing too. 39 00:03:57,080 --> 00:04:03,950 So let's go ahead and actually copy that hover style and open up our header real quick and scroll down 40 00:04:03,950 --> 00:04:11,480 to where we had the button style which is where we set up our estimate button and let's add that hover 41 00:04:11,600 --> 00:04:16,990 style to the button in the header and it will save that to see the page refresh. 42 00:04:17,060 --> 00:04:22,280 And when we come over and check that button now it does the same nice little highlight. 43 00:04:22,280 --> 00:04:29,860 There are other button does I want to add a little bit of space here between our buttons and the text 44 00:04:29,870 --> 00:04:30,560 up above it. 45 00:04:30,800 --> 00:04:35,450 So let's close out of our header dot J.S. file in here. 46 00:04:35,450 --> 00:04:38,520 The grid item wrapping both of our buttons. 47 00:04:38,600 --> 00:04:47,930 Let's add a class name to this of classes dot button container and we'll come up to create this style 48 00:04:48,050 --> 00:04:54,150 button container and we'll just give it a margin top of 1 am. 49 00:04:54,170 --> 00:04:59,760 So save that it'll push those buttons down just a little bit. 50 00:04:59,780 --> 00:05:02,000 Now let's get to that learn button though. 51 00:05:02,030 --> 00:05:09,530 We'll make that shape up a little bit and so on our button here for learn more will add a class name 52 00:05:09,770 --> 00:05:13,100 of classes the learn button. 53 00:05:13,100 --> 00:05:22,460 Hero so you can probably tell they will have a couple of those moments go and will add or learn button 54 00:05:22,550 --> 00:05:28,390 hero style with a border color of theme. 55 00:05:28,390 --> 00:05:42,440 Dot pallets dot common dot Blue a border width of to a text transform of none. 56 00:05:43,430 --> 00:05:54,720 A border or a radius of 50 font family will set to roam Bartow Farr awaits. 57 00:05:54,770 --> 00:05:59,090 We'll just go bold font size. 58 00:05:59,090 --> 00:06:09,600 The oddly specific is zero point nine REM and a height of forty five with a width of one forty five. 59 00:06:09,680 --> 00:06:11,600 So what's save this now. 60 00:06:11,720 --> 00:06:13,190 We'll see the page refresh 61 00:06:16,160 --> 00:06:19,810 and it looks like I forgot one style actually under border color. 62 00:06:19,820 --> 00:06:29,870 Add a color of theme palette the common Blue as well and save that and now we'll have the blue text 63 00:06:29,870 --> 00:06:36,580 insides That looks way better we also then need to change the color of our little arrow. 64 00:06:36,580 --> 00:06:41,500 But you can see that we're setting that with our Phil down here in our component. 65 00:06:41,560 --> 00:06:47,710 So outside of our styles and we could probably figure out a way to just set this through our styles 66 00:06:47,770 --> 00:06:53,600 but we can do this a lot easier if we go up and next to our Make styles import. 67 00:06:53,610 --> 00:07:01,660 Let's also grab the use theme hook so that we can come down and under our classes constant let's create 68 00:07:01,870 --> 00:07:07,450 a constant of theme equal to our use theme hook. 69 00:07:07,450 --> 00:07:12,220 So now we've got access to it directly within our component and we can change this. 70 00:07:12,220 --> 00:07:22,870 Phil of red on the button arrow to a Phil of theme dot palette dot com in dark blue. 71 00:07:22,960 --> 00:07:26,080 And we can save this to see the page refresh. 72 00:07:26,080 --> 00:07:34,490 And we've got a nice looking button now one tiny thing I might like to nit pick is to add a little bit 73 00:07:34,490 --> 00:07:37,860 of space between the text here and the arrow. 74 00:07:37,910 --> 00:07:47,520 So what's come over and we'll add a span a span around the learn more text right there. 75 00:07:47,570 --> 00:07:56,750 And on this span we'll give it a style equal to a margin right of 10. 76 00:07:56,780 --> 00:08:03,830 And if we save that we can see that now we've got that extra little bit of spacing within there. 77 00:08:03,860 --> 00:08:09,850 Let's go ahead and I want to actually add a little bit of more spacing up here to the top of this. 78 00:08:09,920 --> 00:08:16,940 I don't think they are content should be quite as close to the top and so on are container that wraps 79 00:08:16,940 --> 00:08:27,980 the entire page we'll add a class name equal to classes classes dot main container and we'll come up 80 00:08:28,040 --> 00:08:37,180 and create the main container style with a margin top of 5 m so we can save that. 81 00:08:37,310 --> 00:08:43,280 And we'll see that pushed down the content a little bit more and we'll take a look at how this is when 82 00:08:43,280 --> 00:08:45,280 we re size. 83 00:08:45,280 --> 00:08:53,360 You can see it looks pretty good all the way until we get down to here where I honestly think that this 84 00:08:53,360 --> 00:08:56,690 is now a little bit too much space above it. 85 00:08:57,080 --> 00:09:05,690 So we're going to add a couple of breakpoints in here starting with our theme dot breakpoints died down 86 00:09:05,900 --> 00:09:15,080 for medium and I'm going to set this one equal to a margin top of just three M and then we'll add another 87 00:09:15,100 --> 00:09:16,190 breakpoint. 88 00:09:16,340 --> 00:09:25,520 Copy this and change that to extra small and we'll set this to a margin top of just to M and we can 89 00:09:25,520 --> 00:09:28,160 save this to see that. 90 00:09:28,170 --> 00:09:36,270 Now our content is nice and close to the top of the screen let's take a look here and you can see right 91 00:09:36,270 --> 00:09:39,760 here that it's still doing that really ugly look. 92 00:09:39,870 --> 00:09:42,410 And we need to go ahead and fix that for sure. 93 00:09:42,420 --> 00:09:47,880 And the way that I want to fix this is we'll just add some spacing here because you can see that it's 94 00:09:47,880 --> 00:09:52,390 not a very large Yeah it's just a really small window. 95 00:09:52,410 --> 00:09:59,430 It changes to stacking like that between a switching to this stacked look of the smaller size like this 96 00:09:59,910 --> 00:10:03,150 to the horizontal spread out with enough space. 97 00:10:03,150 --> 00:10:04,510 Look right there. 98 00:10:04,530 --> 00:10:08,660 So it's just a tiny little window that it's sitting on top of each other like that. 99 00:10:08,670 --> 00:10:15,300 So if we went ahead and we made sure that it could never shrink down to that small then it would automatically 100 00:10:15,300 --> 00:10:21,420 resize to stacking on top of one another before it created that jarring layout. 101 00:10:21,420 --> 00:10:29,980 So it's come down here and on the grid item the wraps are typography component and are button components. 102 00:10:30,000 --> 00:10:34,390 Let's go ahead and add a class name here of. 103 00:10:34,430 --> 00:10:39,780 Classes dot hero text container. 104 00:10:39,910 --> 00:10:49,260 We'll come up to create our hero text container style and to make sure that our text never gets too 105 00:10:49,260 --> 00:10:52,470 small to create that overlapping button pattern. 106 00:10:52,770 --> 00:11:01,920 Let's make sure that we add a min width so it will never drop below this value of twenty one point five 107 00:11:02,240 --> 00:11:03,240 m. 108 00:11:03,420 --> 00:11:11,910 And then also go ahead and add a margin left of just a 1 m and that should give just enough of a push 109 00:11:12,210 --> 00:11:18,450 so that when we are at this broken break point that the container should be squished enough for the 110 00:11:18,450 --> 00:11:20,400 container to be resized. 111 00:11:20,400 --> 00:11:24,240 So let's save this file and we'll see that refresh. 112 00:11:24,300 --> 00:11:31,020 And now you can see there is jumping up to sitting on top of each other instead of creating that bad 113 00:11:31,110 --> 00:11:31,830 look. 114 00:11:31,890 --> 00:11:40,070 So we can see that now as smoothly goes straight to the jump but there is a small problem. 115 00:11:40,160 --> 00:11:46,920 I don't know if you'll be able to tell but that margin left of a 1 m is actually still on that whole 116 00:11:46,920 --> 00:11:50,400 container and it's just slightly off center now. 117 00:11:50,400 --> 00:11:54,590 So there's a little bit more space over here than there is over here. 118 00:11:54,610 --> 00:11:56,580 She might be able to notice if you look at that. 119 00:11:56,940 --> 00:12:02,070 And so we need to make sure that when we get down to this small breakpoint size. 120 00:12:02,070 --> 00:12:14,100 So for our theme Don breakpoints dot down for extra small we need to change that margin left to just 121 00:12:14,160 --> 00:12:14,810 zero. 122 00:12:14,820 --> 00:12:21,450 So get rid of it completely and pay attention to where this B is right here above my cursor and I'll 123 00:12:21,450 --> 00:12:28,470 save the file so that refreshes and you can see it moved over just slightly over to here to where that's 124 00:12:28,470 --> 00:12:38,470 now being fully centered if we go ahead and resize the page back up you'll see it very cleanly and perfectly 125 00:12:38,470 --> 00:12:46,270 responds to all these screen sizes all the way up even to the biggest size and you can see here how 126 00:12:46,270 --> 00:12:51,520 it's overlapping with the footer but you don't have to worry because by the time we have all the rest 127 00:12:51,520 --> 00:12:56,470 of our content put in this footer is going to be pushed all the way at the bottom and everything will 128 00:12:56,470 --> 00:12:57,490 look perfectly. 129 00:12:57,520 --> 00:13:04,390 So we can keep scrolling this back down and we can see that again just how that reef flows and it keeps 130 00:13:04,390 --> 00:13:11,430 our text getting smaller and smaller until it jumps up to sitting on top of one another. 131 00:13:11,470 --> 00:13:18,700 There was one last real quick thing and you can see when it first transitions right here when it first 132 00:13:18,730 --> 00:13:21,580 jumps to that break point of sitting on top of each other. 133 00:13:22,060 --> 00:13:29,010 I think that the animation is actually a little bit too big here because the max width that we had set 134 00:13:29,020 --> 00:13:32,970 was for when the screen size is very large. 135 00:13:33,040 --> 00:13:39,840 We wanted to be able to go up to a higher size but in this situation where it has enough room to grow. 136 00:13:39,910 --> 00:13:42,690 But we don't actually want it to grow that big. 137 00:13:42,760 --> 00:13:52,630 So for this screen size we can go ahead and on the animation style let's add a theme breakpoint dot 138 00:13:52,720 --> 00:14:02,650 down and we'll set this for these small value and we'll open this up to change our max width to now 139 00:14:02,980 --> 00:14:10,210 just a 30 m. So if we save that you'll see that this now gets shrunk and down to a much more appropriate 140 00:14:10,210 --> 00:14:10,920 size. 141 00:14:11,050 --> 00:14:17,290 And if we then go ahead and we start making this bigger you can see at the larger break points it can 142 00:14:17,290 --> 00:14:20,350 still reach the larger size as before. 143 00:14:20,350 --> 00:14:27,700 So now I think we have gone in and really perfectly made this responsive for all of our screen sizes 144 00:14:27,700 --> 00:14:34,690 that we're handling and really creating a consistent and pleasing user experience. 145 00:14:34,750 --> 00:14:40,510 So this looks really good and you see we keep getting more practice with the grid system and with using 146 00:14:40,510 --> 00:14:41,920 media queries. 147 00:14:41,920 --> 00:14:48,280 So hopefully by the end of this first page by the end of this whole home page I think that you'll really 148 00:14:48,280 --> 00:14:54,040 already start to feel very familiar with how all of this is working so let's keep this ball rolling 149 00:14:54,040 --> 00:14:57,330 and move on to these services block of our home page. 150 00:14:57,400 --> 00:15:01,960 So we're going to finally get some content underneath here in the next video. 16971

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.