The next section on our theme is the About Us section all the elements pertaining to this section are
contained inside section tags and also a separate container inside the container.
We have a row in the column that contain the about heading next we have another row in this row contains
two blocks of code or three blocks of code the first block of code is this paragraph here and that's
contained inside a column that spans four cells in the bootstrap grid layout.
The second block of code contains this text and the column is the same size as the first.
The third column which spans eight of the cells in the bootstrap grid layout contains this one button
and we can see that the text center class has also been applied and so it centers the button inside
a fairly large column underneath the about section.
We have the contact section so inside this section we have a container
and inside the container we have a row that contains the contact me heading the second row contains
all the form elements.
We won't go through all these different form elements because we've already been through that quite
a bit in previous lessons so there's really nothing new there.
It's just each item contained inside of of course the form the open enclosed form tag and each form
element is contained within its own div
and so on.
Underneath the contact section we have the footer the footer is is actually one of the last components
of the page and it's contained within an open and close footer tag
all the elements of the footer are contained within a separate container and also within a separate
row
and then inside this row we have four columns or three columns rather the first column contains the
location the second column contains the social media icons and the third column contains just this snippet
of text and they're all designed to collapse one under the other when the browser shrinks to a certain
size
so you can see that each column is next to one another when the browser is expanded.
But when it's contracted they fall one below the other underneath the footer we have another footer
with the class footer below
and that contains the copy right text that you see here.
Now this code block is for this up arrow button.
So when I click the up arrow it takes us right back to the top of the page.
And so that's what this div is for.
It contains that button and you can see that the link on this button is at the page top so we have a
named anchor there.
And that's why it knows where to go.
Below that we have the models so if you recall any time one of the images in the portfolio was clicked
it opens a modal with more information
so all the modal code blocks can be found here and there's gonna be six of them because there's six
individual images in each image opens its own separate model with different content
it's a common practice to have the models at the bottom of the page because the cold blast can can get
fairly lengthy especially if you have a lot of content in these models.
So you can see that each model has a model fade
clasps attached to it and that's what gives it the fade effect when it loads.
It also has an idea attribute sector portfolio modal one and if you remember the link attribute on this
first image was set to portfolio model one and that's how the model system works that's how it knows
to open this specific model when this image is clicked and we covered that earlier as well.
So it's just a standard model and inside the model we have the model content and the content includes
the close button here so that dismisses the model when it's clicked it also has a separate container
and a row which which holds all the text and images that we see inside the modal.
So again we won't go through each model because we've worked with models before and it's the same concept.
It's just copying and pasting blocks of code for whichever components you want to include in the theme.
Say for example I didn't want six models.
Well I could just delete this entire code block
and that would remove the model that would remove portfolio model to so it's very easy to work with
these themes.
You can just do need and add depending on what your needs are it's more or less just a matter of copying
and pasting it's all scroll all the way down at the bottom of the page.
We have some script files that are used and these are used for various functions on the page.
So for example we have the J query library.
We have the bootstrapped I mean J.S. file that's essential.
We have some plugins that are used for different animations for example the easing when the navigation
expands and contracts
and also we have script JavaScript files for the page for the form validation so this form does come
with JavaScript validation.
So if I don't input any information and click send you'll notice that I do get the error messages and
that's what these validation JavaScript files are for and then we have the custom javascript for this
particular theme.
So when you do download these themes it's very important that you understand that a lot of these files
are created and used inside the HDMI file here and these are all key components of this layered
and so that covers the entire theme.
There's many different types of themes but the concepts are all the same.
Once you download the theme you can add to it removed from it customize it and it makes it a lot easier
than coding a bootstrap page from scratch you can see it's a fairly lengthy file and it would take quite
a bit of time.
So I hope you enjoyed it we'll see you in the next lesson.