1
00:00:04,040 --> 00:00:06,590
Hello everyone and welcome back to our bootstrap course.

2
00:00:06,590 --> 00:00:11,030
In a previous lecture we built a carousel of products and in this lecture we're going to be filling

3
00:00:11,030 --> 00:00:16,070
in more pages for details about the products in this services div..

4
00:00:16,130 --> 00:00:23,900
So if you're using a software as a service and you're building a company for a SaaS company then services

5
00:00:23,900 --> 00:00:26,670
and products are often the same thing.

6
00:00:26,690 --> 00:00:28,940
So let's go ahead and fill in more detail here.

7
00:00:28,940 --> 00:00:39,590
So first we're going to need to build a row and this row is going to contain items such as text and

8
00:00:39,590 --> 00:00:42,710
icons and any images of products you want to have.

9
00:00:43,070 --> 00:00:48,530
So to do that we can use bootstrap classes can use the class row to set up a row as well as feature

10
00:00:48,530 --> 00:00:55,280
Red which is a key word that shows that it is featuring something like add some padding to the top and

11
00:00:55,280 --> 00:00:56,880
bottom with P Y five.

12
00:00:57,230 --> 00:01:03,740
And we can also use our custom classes going to use custom classes block of block 1 and full page.

13
00:01:03,830 --> 00:01:09,330
We've already set up a full page which means we'll be 100 of the viewport height.

14
00:01:09,680 --> 00:01:12,640
So and she will be the entire viewport.

15
00:01:12,680 --> 00:01:17,380
Let's go ahead and close this div immediately and add styling to this block and block what.

16
00:01:17,720 --> 00:01:20,720
So we're going to use a minimalist approach to our website.

17
00:01:20,750 --> 00:01:27,000
Minimalism is quite trendy these days and it is useful because it is easy to set up.

18
00:01:27,050 --> 00:01:28,190
It's pleasing to the eye.

19
00:01:28,190 --> 00:01:32,350
It looks professional so minimalism is always a good idea.

20
00:01:32,540 --> 00:01:37,410
Of course sometimes you can't use minimalism if you have specific requirements which is fine as well.

21
00:01:37,400 --> 00:01:43,130
So let's go ahead and set up some color blocks which will help make our web page minimalist but also

22
00:01:43,130 --> 00:01:43,730
colorful.

23
00:01:43,730 --> 00:01:48,950
That way we can grab attention and associate with a brand et cetera.

24
00:01:48,950 --> 00:01:50,420
So we have a Block and Block one here.

25
00:01:50,420 --> 00:01:59,080
Let's open up our CFS and let's set up the styling for block as well as block one.

26
00:01:59,080 --> 00:02:02,110
And we're gonna have several blocks for each page on our website.

27
00:02:02,120 --> 00:02:08,930
So for block we can set the text color to white we can align the content to center because the default

28
00:02:08,930 --> 00:02:18,290
is to align the left and we can set the paint to 5 percent percents are initially the best sizing to

29
00:02:18,290 --> 00:02:20,890
work with because they are the most responsive.

30
00:02:21,260 --> 00:02:22,070
OK.

31
00:02:22,220 --> 00:02:26,690
For block one this is going to be where we set our background color and we're going to use the same

32
00:02:26,690 --> 00:02:31,380
clothes we've been using so far for our carousel placeholders.

33
00:02:31,430 --> 00:02:36,440
And we're going to set it up with this sort of blue color.

34
00:02:36,530 --> 00:02:41,410
And right now it's not showing up because we have to fill in more content for our block.

35
00:02:41,420 --> 00:02:45,350
We don't have any text in there which is why we're not seeing anything on the screen because height

36
00:02:45,350 --> 00:02:49,270
is the default 0 4 0 content.

37
00:02:49,400 --> 00:02:54,600
So let's go ahead up and set up the rest of the contents that we can actually see it and see its height.

38
00:02:54,620 --> 00:03:00,520
So first we're going to have a product as well as some information about it.

39
00:03:00,620 --> 00:03:05,690
So we're going to use a an icon as a placeholder for the product.

40
00:03:05,690 --> 00:03:10,940
You can also put an image it's up to you and you can get our icons from the bootstrap library that we've

41
00:03:10,940 --> 00:03:12,690
been using so far.

42
00:03:12,740 --> 00:03:21,950
So I'm just going to get the code for a gift icon by searching gift in the bootstrap icon page that

43
00:03:21,950 --> 00:03:25,370
we showed earlier and going to be quite a lot of code.

44
00:03:25,490 --> 00:03:27,880
But you go ahead and copy it right in there.

45
00:03:28,850 --> 00:03:34,880
It's an SPG which is a vector graphic vector graphics are actually only useful because they will retain

46
00:03:34,880 --> 00:03:39,170
their quality even on a huge screen size.

47
00:03:39,530 --> 00:03:44,540
And these are bootstrap classes bootstrap icons bootstrap icons gift.

48
00:03:44,540 --> 00:03:46,760
So this specifies what icon it is.

49
00:03:46,860 --> 00:03:52,350
Then the rest of the code sets the width and height to 10 10 is quite large as one is the default.

50
00:03:52,370 --> 00:03:57,760
So I changed that to 10 and then the other code will create the actual icon.

51
00:03:57,800 --> 00:04:02,840
So let's go to check the output and we're not seeing anything yet because we have to add in more information

52
00:04:02,840 --> 00:04:03,180
here.

53
00:04:03,860 --> 00:04:04,050
OK.

54
00:04:04,080 --> 00:04:10,160
But so far we have this let's also give it some padding and put it into a column because we're gonna

55
00:04:10,160 --> 00:04:12,530
have the icon on the left and then information on the right.

56
00:04:12,530 --> 00:04:18,020
So you can imagine can have a product on the left and information about the product on the right.

57
00:04:18,020 --> 00:04:20,980
So let's go ahead and put this into its own columns.

58
00:04:20,990 --> 00:04:25,500
We're going to open a div and we're gonna give it the class column M.D. 5.

59
00:04:25,520 --> 00:04:27,440
So this will make it into its own column.

60
00:04:27,470 --> 00:04:29,970
We're going to add some padding immediately to it as well.

61
00:04:30,500 --> 00:04:35,360
Typically you want to add padding to separate items so we can assume that we're gonna need some padding

62
00:04:35,690 --> 00:04:38,320
and we can change it later if needed but we probably won't need to.

63
00:04:38,750 --> 00:04:46,970
OK so five will specify the sizing of this column and let's go ahead and make another column just below

64
00:04:46,970 --> 00:04:52,070
it for the actual text about this specific service.

65
00:04:52,070 --> 00:04:57,890
So we have a div class and we're going to this time give us the column empty seven and we're gonna go

66
00:04:57,890 --> 00:04:59,450
ahead and close that off.

67
00:04:59,450 --> 00:05:07,890
And in here we're going to put in text information so do an each to class each rep heading and this

68
00:05:07,890 --> 00:05:16,000
will specify that it is a heading and we are also going to give it the x and y padding of 5.

69
00:05:16,160 --> 00:05:17,760
Or rather just the Y padding a 5.

70
00:05:17,760 --> 00:05:19,620
We don't need X padding.

71
00:05:19,750 --> 00:05:25,950
That'll be fine without it for now and I'm going to put in something like a service title and we can

72
00:05:25,950 --> 00:05:30,510
also add in italics for the service subtitle.

73
00:05:30,900 --> 00:05:39,060
So to do that or you'll do is open up a span and you'll use the bootstrap class font italic in here

74
00:05:39,730 --> 00:05:51,720
you'll put in your service description here and then we have to go ahead and close off the each to tag

75
00:05:51,780 --> 00:05:53,670
as well.

76
00:05:53,670 --> 00:06:00,310
So let's go ahead and close it off right here and then we want to put in our service description.

77
00:06:00,310 --> 00:06:02,800
So actually this is not served description.

78
00:06:02,820 --> 00:06:09,780
This is going to be the subtitle subtitle here and then the service description is going to be in a

79
00:06:09,780 --> 00:06:12,530
paragraph and we're gonna make this lead again to make it a bit bigger.

80
00:06:12,650 --> 00:06:17,720
You'll see how all this looks in the output your service description here.

81
00:06:17,980 --> 00:06:24,310
And let's close off that paragraph tag and the div is close which is perfect now.

82
00:06:24,300 --> 00:06:33,210
So we have a row which represents the row and we have two columns inside of the road div.

83
00:06:33,540 --> 00:06:39,720
So that is why we specified the bootstrap class row and the bootstrap class column because bootstrap

84
00:06:39,720 --> 00:06:45,880
would automatically make for you columns inside of rows with this kind of specification.

85
00:06:46,050 --> 00:06:46,800
Okay.

86
00:06:47,040 --> 00:06:53,310
So far we have set up our first row with two different columns and this will contain information and

87
00:06:53,310 --> 00:06:55,510
an image about a product.

88
00:06:55,560 --> 00:06:58,260
Now we haven't actually seen anything in the output here.

89
00:06:58,260 --> 00:07:04,590
So we're gonna go ahead and fix that in the next lecture to see this description about the product and

90
00:07:04,590 --> 00:07:09,180
an image of the product as well as we're going to set up some more products.

91
00:07:09,180 --> 00:07:16,890
So before we go ahead do that I challenge you to set up the next row for the product yourself.

92
00:07:16,890 --> 00:07:23,450
So set up two more products here by using this kind of setup.

93
00:07:23,610 --> 00:07:30,060
This kind of role and I encourage you not to just copy code but to actually think about the code behind

94
00:07:30,360 --> 00:07:31,980
what you are building.

95
00:07:31,980 --> 00:07:35,010
So why am I putting all these different classes here.

96
00:07:35,040 --> 00:07:40,450
What do each of them are present and what kind of icon do I want here.

97
00:07:40,490 --> 00:07:43,940
You can decide it size the challenge for this lecture.

98
00:07:43,980 --> 00:07:46,980
We're going to be completing a challenge together in the next lecture.

99
00:07:47,070 --> 00:07:48,900
So thank you all for watching and we will see you there.