1 00:00:00,420 --> 00:00:03,950 In this lesson we'll explore how this theme was developed. 2 00:00:04,200 --> 00:00:09,510 Once you understand how all the components come together you can easily see why bootstrap has become 3 00:00:09,510 --> 00:00:13,500 so popular with developers in our HCM l document. 4 00:00:13,500 --> 00:00:23,200 Inside the head tag we can see that the HDMI AML code starts with defining the character set UTF 8 in 5 00:00:23,200 --> 00:00:25,920 the viewport. 6 00:00:26,100 --> 00:00:31,710 Remember that setting the viewport is important to keep the page responsive on all mobile devices 7 00:00:34,600 --> 00:00:36,210 underneath the title. 8 00:00:36,220 --> 00:00:42,040 We also have several links to external files that are needed for the layout. 9 00:00:42,060 --> 00:00:50,980 This includes the bootstrap DOD MIN DOT CSX style sheet and also the custom freelancer Nazi SS style 10 00:00:50,980 --> 00:00:53,490 sheet which is specific to this theme. 11 00:00:53,530 --> 00:01:01,900 The next block of code sets links to funds that are used in this theme so the font dash awesome dot 12 00:01:01,900 --> 00:01:09,470 MIN DOT CSI style sheet and also certain fonts taken from the Google API. 13 00:01:09,470 --> 00:01:10,790 So there's two links to that 14 00:01:13,720 --> 00:01:15,940 and so that's it for the inclusions. 15 00:01:15,940 --> 00:01:19,870 Most of this will look very familiar as we've worked with quite a few times now 16 00:01:22,610 --> 00:01:25,150 inside the body tag. 17 00:01:25,220 --> 00:01:31,220 We start with the navigation elements so this top navigation bar here that contains our buttons 18 00:01:33,890 --> 00:01:41,420 the NAV element uses the three classes we took a look at earlier nav bar nav bar default and nav bar 19 00:01:41,420 --> 00:01:47,680 fixed top these ensure that the nav bar stays fixed at the top. 20 00:01:47,800 --> 00:01:50,350 Even when the user screws down the page 21 00:01:55,170 --> 00:01:58,590 the navigation elements are all contained within a container. 22 00:01:58,590 --> 00:02:08,840 Did the first code block starting with this div is used to collapse the nav bar for smaller screens 23 00:02:09,050 --> 00:02:14,240 so remember when we string the size of the browser it collapses the nav bar 24 00:02:17,060 --> 00:02:24,880 so you can see that the nav bar toggle pass was used the data toggle attribute is set to collapse. 25 00:02:25,060 --> 00:02:29,260 You can also see the different span classes that define 26 00:02:31,800 --> 00:02:35,040 each icon bar inside this little button here. 27 00:02:38,150 --> 00:02:45,620 The second block of code inside this div contains each one of these buttons and they're structured inside 28 00:02:45,620 --> 00:02:46,820 an unordered list 29 00:02:49,430 --> 00:02:52,650 with a nav bar right class. 30 00:02:52,690 --> 00:03:00,430 And that's why they'll stick to the right each individual button is contained within the list item in 31 00:03:00,520 --> 00:03:08,080 each list item has an attribute a link attribute set to a different value the attribute is set to the 32 00:03:08,080 --> 00:03:15,610 named anchor corresponding to the content that matches the button so the portfolio goes to the portfolio 33 00:03:15,610 --> 00:03:25,680 section about goes to about and so on so that's why we see the numbers sign in front of the portfolio 34 00:03:26,070 --> 00:03:33,300 about in contact links and you can see that the page is very well organized and well commented as well 35 00:03:33,690 --> 00:03:36,620 which is common with bootstrap themes. 36 00:03:38,650 --> 00:03:41,730 They also are separated in terms of sections. 37 00:03:41,740 --> 00:03:47,920 So for example if we wanted to take out the entire navigation bar we could just delete this entire block 38 00:03:47,920 --> 00:03:53,600 of code and that would get rid of the navigation bar for us. 39 00:03:54,030 --> 00:03:59,040 So it's very easy to work with I just undid that to bring the code back. 40 00:04:01,010 --> 00:04:10,690 Now next we have our header and the header is contained within the header tags and inside the header 41 00:04:10,690 --> 00:04:11,170 tags. 42 00:04:11,170 --> 00:04:21,300 We have a container and inside the container we have a row and a column so it's a large column that 43 00:04:21,300 --> 00:04:28,030 spans 12 of the cells in our bootstrap grid layout inside the column. 44 00:04:28,030 --> 00:04:33,880 We have this image which has the image responsive CLOs attached to it. 45 00:04:33,940 --> 00:04:43,110 That means the image will be responsive to any device regardless of the screen size. 46 00:04:44,480 --> 00:04:54,230 We have the source of the image and then we have a span with the start bootstrap text. 47 00:04:54,340 --> 00:04:58,300 And if you're working with this team of course you would change all this you'd probably change your 48 00:04:58,300 --> 00:05:07,150 image source to something else you change this text to the name of your website perhaps and so on and 49 00:05:07,150 --> 00:05:08,300 so that's it for the header. 50 00:05:08,320 --> 00:05:17,830 It's fairly simple and then we go into the portfolio section this entire section is contained within 51 00:05:17,920 --> 00:05:19,060 a container div 52 00:05:22,960 --> 00:05:24,850 so we have the portfolios we have. 53 00:05:24,850 --> 00:05:31,070 First we have this section tag inside that we have the container and I'd have to scroll down quite a 54 00:05:31,070 --> 00:05:33,550 bit just to see the closing div tag. 55 00:05:33,550 --> 00:05:37,540 You can see all each one of these code blocks 56 00:05:43,660 --> 00:05:47,040 is contained inside the container. 57 00:05:47,240 --> 00:05:57,160 The first code block is is a role that contains this portfolio text and also this year the line with 58 00:05:57,160 --> 00:06:02,380 the star in the middle so that's this entire code block here 59 00:06:05,920 --> 00:06:15,100 and inside another row we have each of the code blocks for these six images here. 60 00:06:15,160 --> 00:06:26,660 So one two three four five and six now each one of these six code blocks are almost identical just a 61 00:06:26,660 --> 00:06:34,250 few minor differences let's start with the first item here we can see that they're contained within 62 00:06:35,470 --> 00:06:49,290 the column small for column size and the link is set to portfolio model 1 with a no sign in front of 63 00:06:49,290 --> 00:06:49,660 it. 64 00:06:49,770 --> 00:06:58,160 And the reason for that is because these links will open up a modal with additional content pertaining 65 00:06:58,160 --> 00:06:59,220 to that link. 66 00:06:59,330 --> 00:07:02,250 Each one of them does that. 67 00:07:02,290 --> 00:07:11,040 Now the code for the modal and the content inside the model is a lot lower down on the page. 68 00:07:11,170 --> 00:07:18,260 So will We'll get to that as we progressed through this script but just for now know that each one of 69 00:07:18,260 --> 00:07:21,380 these images links to its own model. 70 00:07:21,500 --> 00:07:25,820 And that's why we have the data to toggle attribute set to modal as well. 71 00:07:25,820 --> 00:07:31,560 And then we have the icon when you hover your mouse over you'll see the magnifying glass. 72 00:07:31,700 --> 00:07:38,330 And so that's contained within this div with the class set to caption content and then the image source 73 00:07:38,330 --> 00:07:39,620 for this cabin image 74 00:07:42,920 --> 00:07:49,970 and then just an image responsive class to make sure that the images shrink if the browser window gets 75 00:07:49,970 --> 00:07:58,070 smaller and on mobile devices we can see that because of the grid layout they do stack on top of one 76 00:07:58,070 --> 00:07:58,460 another 77 00:08:05,800 --> 00:08:10,370 so they'll shrink to a certain point and then they'll just stack on top of one another 78 00:08:16,300 --> 00:08:22,090 so each one of these is almost identical the only the only thing that changes is of course the image 79 00:08:22,090 --> 00:08:28,580 source but also the link each link opens a separate model. 80 00:08:28,660 --> 00:08:36,340 So the second button here opens portfolio model 2 and then portfolio motor modal three four five and 81 00:08:36,380 --> 00:08:40,820 six. 82 00:08:40,910 --> 00:08:42,690 And so that's that's it for that section.