1 00:00:00,510 --> 00:00:09,290 The next section on our theme is the About Us section all the elements pertaining to this section are 2 00:00:09,290 --> 00:00:17,840 contained inside section tags and also a separate container inside the container. 3 00:00:17,840 --> 00:00:29,200 We have a row in the column that contain the about heading next we have another row in this row contains 4 00:00:29,200 --> 00:00:38,100 two blocks of code or three blocks of code the first block of code is this paragraph here and that's 5 00:00:38,110 --> 00:00:45,700 contained inside a column that spans four cells in the bootstrap grid layout. 6 00:00:45,730 --> 00:00:54,700 The second block of code contains this text and the column is the same size as the first. 7 00:00:54,700 --> 00:01:02,440 The third column which spans eight of the cells in the bootstrap grid layout contains this one button 8 00:01:02,740 --> 00:01:09,400 and we can see that the text center class has also been applied and so it centers the button inside 9 00:01:09,400 --> 00:01:13,480 a fairly large column underneath the about section. 10 00:01:13,480 --> 00:01:18,490 We have the contact section so inside this section we have a container 11 00:01:21,750 --> 00:01:30,000 and inside the container we have a row that contains the contact me heading the second row contains 12 00:01:30,060 --> 00:01:32,470 all the form elements. 13 00:01:32,670 --> 00:01:37,200 We won't go through all these different form elements because we've already been through that quite 14 00:01:37,200 --> 00:01:40,320 a bit in previous lessons so there's really nothing new there. 15 00:01:40,320 --> 00:01:50,060 It's just each item contained inside of of course the form the open enclosed form tag and each form 16 00:01:50,060 --> 00:01:52,460 element is contained within its own div 17 00:01:56,540 --> 00:01:57,100 and so on. 18 00:01:59,090 --> 00:02:07,320 Underneath the contact section we have the footer the footer is is actually one of the last components 19 00:02:07,320 --> 00:02:12,570 of the page and it's contained within an open and close footer tag 20 00:02:15,570 --> 00:02:22,430 all the elements of the footer are contained within a separate container and also within a separate 21 00:02:22,430 --> 00:02:22,820 row 22 00:02:25,760 --> 00:02:34,290 and then inside this row we have four columns or three columns rather the first column contains the 23 00:02:34,290 --> 00:02:43,740 location the second column contains the social media icons and the third column contains just this snippet 24 00:02:43,800 --> 00:02:51,240 of text and they're all designed to collapse one under the other when the browser shrinks to a certain 25 00:02:51,240 --> 00:02:51,810 size 26 00:02:54,500 --> 00:02:59,270 so you can see that each column is next to one another when the browser is expanded. 27 00:02:59,280 --> 00:03:05,190 But when it's contracted they fall one below the other underneath the footer we have another footer 28 00:03:05,520 --> 00:03:07,350 with the class footer below 29 00:03:10,030 --> 00:03:13,970 and that contains the copy right text that you see here. 30 00:03:14,120 --> 00:03:17,910 Now this code block is for this up arrow button. 31 00:03:18,360 --> 00:03:23,210 So when I click the up arrow it takes us right back to the top of the page. 32 00:03:23,470 --> 00:03:25,460 And so that's what this div is for. 33 00:03:25,670 --> 00:03:32,590 It contains that button and you can see that the link on this button is at the page top so we have a 34 00:03:32,590 --> 00:03:34,040 named anchor there. 35 00:03:34,300 --> 00:03:37,690 And that's why it knows where to go. 36 00:03:37,750 --> 00:03:46,990 Below that we have the models so if you recall any time one of the images in the portfolio was clicked 37 00:03:47,020 --> 00:03:49,200 it opens a modal with more information 38 00:03:51,930 --> 00:03:57,990 so all the modal code blocks can be found here and there's gonna be six of them because there's six 39 00:03:57,990 --> 00:04:02,870 individual images in each image opens its own separate model with different content 40 00:04:06,420 --> 00:04:12,570 it's a common practice to have the models at the bottom of the page because the cold blast can can get 41 00:04:12,570 --> 00:04:16,070 fairly lengthy especially if you have a lot of content in these models. 42 00:04:17,650 --> 00:04:22,570 So you can see that each model has a model fade 43 00:04:25,170 --> 00:04:31,430 clasps attached to it and that's what gives it the fade effect when it loads. 44 00:04:31,730 --> 00:04:39,380 It also has an idea attribute sector portfolio modal one and if you remember the link attribute on this 45 00:04:39,380 --> 00:04:46,990 first image was set to portfolio model one and that's how the model system works that's how it knows 46 00:04:46,990 --> 00:04:53,350 to open this specific model when this image is clicked and we covered that earlier as well. 47 00:04:53,410 --> 00:05:03,410 So it's just a standard model and inside the model we have the model content and the content includes 48 00:05:04,070 --> 00:05:11,390 the close button here so that dismisses the model when it's clicked it also has a separate container 49 00:05:11,540 --> 00:05:18,600 and a row which which holds all the text and images that we see inside the modal. 50 00:05:18,610 --> 00:05:24,440 So again we won't go through each model because we've worked with models before and it's the same concept. 51 00:05:24,610 --> 00:05:31,980 It's just copying and pasting blocks of code for whichever components you want to include in the theme. 52 00:05:32,230 --> 00:05:34,980 Say for example I didn't want six models. 53 00:05:34,990 --> 00:05:39,360 Well I could just delete this entire code block 54 00:05:43,320 --> 00:05:49,920 and that would remove the model that would remove portfolio model to so it's very easy to work with 55 00:05:49,920 --> 00:05:50,540 these themes. 56 00:05:50,550 --> 00:05:57,400 You can just do need and add depending on what your needs are it's more or less just a matter of copying 57 00:05:57,400 --> 00:06:03,120 and pasting it's all scroll all the way down at the bottom of the page. 58 00:06:03,120 --> 00:06:09,650 We have some script files that are used and these are used for various functions on the page. 59 00:06:09,690 --> 00:06:13,300 So for example we have the J query library. 60 00:06:13,530 --> 00:06:17,770 We have the bootstrapped I mean J.S. file that's essential. 61 00:06:17,990 --> 00:06:26,330 We have some plugins that are used for different animations for example the easing when the navigation 62 00:06:26,330 --> 00:06:27,650 expands and contracts 63 00:06:31,070 --> 00:06:42,880 and also we have script JavaScript files for the page for the form validation so this form does come 64 00:06:42,880 --> 00:06:44,250 with JavaScript validation. 65 00:06:44,250 --> 00:06:50,640 So if I don't input any information and click send you'll notice that I do get the error messages and 66 00:06:50,640 --> 00:07:00,320 that's what these validation JavaScript files are for and then we have the custom javascript for this 67 00:07:00,320 --> 00:07:03,240 particular theme. 68 00:07:03,320 --> 00:07:08,330 So when you do download these themes it's very important that you understand that a lot of these files 69 00:07:08,330 --> 00:07:18,110 are created and used inside the HDMI file here and these are all key components of this layered 70 00:07:21,820 --> 00:07:24,500 and so that covers the entire theme. 71 00:07:24,550 --> 00:07:29,080 There's many different types of themes but the concepts are all the same. 72 00:07:29,080 --> 00:07:36,940 Once you download the theme you can add to it removed from it customize it and it makes it a lot easier 73 00:07:37,130 --> 00:07:44,890 than coding a bootstrap page from scratch you can see it's a fairly lengthy file and it would take quite 74 00:07:44,890 --> 00:07:45,520 a bit of time. 75 00:07:46,820 --> 00:07:49,300 So I hope you enjoyed it we'll see you in the next lesson.