Create Responsive Animated Portfolio Theme Bootstrap Website using HTML5, CSS3, Bootstrap & JS

hey guys and welcome back today i'm going to start a new series on how to create a responsive website using html5 and bootstrap 4 so this is going to be the first part now let's see the website before jumping into the coding part on the left corner we have this navbar brand logo and then we have some links on the right side or we can say right aligned navigation links you can see the hovering effect on the links the font size increasing and notice that the navigation bar is transparent and then we have this banner text and this cover image now let's slide to the next section about section you can write any text here and now notice that the navigation bar has turned into opaque now it has gray color and if i scroll up you can see that the navigation bar is again transparent so the background color of the navigation bar changes according to the position it is in if we are on the cover image then the navigation bar becomes transparent when we scroll down to the about section or any other part of the website the navigation bar becomes opaque with a gray color background and we have this scroll spy as well so it reflects the current active link in the viewport for example this about section is active in the viewport so that about link in the navigation bar is active moving to the next part that is the portfolio section portfolio navigation link is active now see this animation of the portfolio the images are sliding in one after the other and we have this hovering effect on the images as well now let's open any one of the image you can see that on the top left corner we have this number text which represents the slide number or the index number of the image which is opened the background of this image viewer is not fully opaque and it is not fully black it is a bit of transparent this looks a little better than having the pure black background then we have the close buttons on the top right corner these are two navigation buttons for changing the image notice that there is no scroll bar for the body in this full screen image viewer and also there is no navigation bar on the top even though we have fixed the navigation bar on top of the page always then moving to the next part we have this testimonial section it has a carousel with three slides and with the indicator at the bottom which shows which slide is active then we have this contact section with input boxes where the user can input the text or the message that the user wants to send and then on the bottom we have the footer it's a fairly simple footer okay now let's change the size of the screen to see how the website is going to behave in small screen devices all right first of all notice that the navigation bar has collapsed into a navigation button we click on it and the links are displayed the navigation bar is still transparent the size of the banner text has reduced then the font size of the about text has also reduced you can observe the animation that we have in this portfolio section open the image viewer and you can see that the images are taking the available screen size so the size of the image in full screen view depends upon the size of the screen if you have small screen the size of the image is going to be small then we have this testimonial section it has also scaled down so now let's start with the coding part and i have prepared some of the starter files which you can download from the link which is in the description below click on the link open the google drive and download those data files it contains some of the important and necessary library files that we are going to use in this project and it contains some of the images that i have used in the portfolio section all right so this completes this video i'm going to see you in the next part thanks for watching after downloading the starter files open it the css folder is going to contain this animate.min.css we are going to use this plugin for animation then we have this img folder which contains all of the images that we are going to use in our project then we have this js folder which contains the javascript plugins this jquery.smoothscroll.js is the plugin that we are going to use to get that smooth scroll effect in our website and that wow.min.js is the plugin for animation and this is the complete screenshot of the website that we are going to build all right now let's open this index.html in any text editor that you have i am going to use sublime text so this doc type defines that this is an html5 document then we have the html tag in the head tag in the title tag which defines the title of the website and then we have the small link or icon that appears in the browsers tab at small icon and then we have this meta tag for ensuring proper rendering and touch zooming in mobile phones and other touch screen devices and then we have link for this font awesome icons which we are going to use in the footer these are the icons that we have for youtube facebook instagram and other social websites then we have this cdn link for the bootstrap 4 so instead of downloading these files and keeping them with our website and then host them it is better that we use cdn links to get access to these files this is much efficient and faster then we have the link to this google font as we are going to use these three types of font all right now let's start with the html part in my earlier tutorials i have completed the entire html part and then moved to the css part and then to the javascript part but this time i'm not going to complete the entire html for this website and then move to the css part instead what i'm going to do is create one section of the website in html then move to the css part to style it and complete it before we move to the next part of the website so this is like the divide and conquer technique that we use in algorithms this is going to be better and you will understand how we are using css on various part of the website so now let's get into the body part and write id attribute as my hyphen portfolio add another attribute data hyphen spy as scroll data hyphen target as dot navbar then data hyphen offset equals 60 so these attributes are used for getting that scroll spy in the website i have already shown you what scroll spy is whichever part of the website is active in the viewport or on the browser's screen is reflected in the navigation bar by the active link and we have kept this data hyphen target as dot navbar because we want this scroll spy to reflect on the navbar links and this dot nav bar is the default class for the navigation bar in bootstrap then drop down and now let's begin with a comment we are going to start with the header which contains that banner text that cover image and the navigation bar so we are going to complete the html part for the header which contains the navigation bar the banner text and the cover image and then we will move to the css part to style the header alright create a header tag write class attribute as container hyphen fluid container hyphen fluid takes the width of the screen it is a responsive class of bootstrap space bg hyphen header and we are going to style this bg hyphen header class later in the css then id as home and this is the id that we are going to use in the navigation bar for the home link so that when we click on the home button in the navigation bar this part of the website is scrolled up or down depending upon the part of the website opened in the viewport then drop down and write a comment for adding background color then create a div tag and give class as header hyphen bg hyphen gray and we will use this class to add a little gray color to our cover image then drop down and let's write a comment navigation bar begins and now we are going to define the navigation bar then drop down and create a nav tag and write class attribute as navbar space navbar hyphen dark this is the default class for the dark colored navbar template space bg hyphen dark this class adds the dark color to the default navbar space fixed hyphen top and this class is responsible for keeping the nav bar always on top then write id as my hyphen navbar okay now we need to define three part for this navbar first part consists of the brand logo which is on the top left corner then we need to define the collapse button which replaces the nav bar when nav bar is collapsed and then we need to define the navbar links which are the main part of the navbar so now let's write a comment first navbar brand logo then create a a tag and in hyper text reference light hash home so that when we click on the navbar brand logo the part of the website defined by this header will be scrolled up because this header has the id home then write class attribute equals nav bar hyphen brand then create a img tag in between these a tags and now let's first see the name of the logo open this img folder then we have this bw hyphen logo hyphen t3 dot png this is the logo that we are going to use in source write img forward slash bw hyphen logo hyphen t3 dot png save this and now let's open the file in the browser so that we can observe the changes that we are making all right so this is the nav bar this is the logo let's fit the logo in the network write style equals within double inverted commas height colon 35 pixels save it now let's define the collapse button write a comment first toggler button to replace the nav bar whenever is collapsed then create a button tag write class as navbar hyphen toggler then write type attribute button then write data hyphen toggle as collapse then write data hyphen target as hash never hyphen content arya hyphen controls equals navbar hyphen content then write arya hyphen expanded false arya hyphen label s toggle space navigation this arya hypen controls attribute is actually a relationship attribute and it is commonly used to describe our relationship between a button and the expandable region revealed by that button and this arya hyphen expanded is a global attribute which is used for exactly this purpose it takes one of the two values either true or false true means a section that this element denotes is currently expanded or visible and false means the expandable section or items are currently collapsed or invisible and this arya hyphen label attribute is used to define a string that labels the current element then drop down and create a span tag and write class attribute as navbar hyphen toggler hyphen icon this is the default class for that toggler icon in bootstrap refresh in the browser and you can see this toggler button now let's define the links or the navbar content for this button write a comment navbar links we defined the navbar brand logo then we define the toggler button and now we are going to define the navbar links create a div tag and write class as collapse space never hyphen collapse and id as never hyphen content you can observe that this is the same id which is the target for that toggler button navbar hyphen content so when we click on the button it will get the data from this div element containing the ids navbar hyphen content all right then create ul tag that is the unlisted item and class as never hyphen nav space ml hyphen auto this ml hyphen auto class is going to right align the links it will set the left margin in a way that the links are right aligned then get down and create a ally tag that is the list tag and write class as nav hyphen item then create a a tag h reference as hash home class as nav hyphen link and the text as home so this will create a nava link in the navbar with the name home and when we click on the link the part of the website which contains this id home will be opened up which is actually the header section so in the same way we are going to create the rest of the links or we can just copy this li part and paste it few times all right change this to about this one to portfolio then testimonial contact you can see the id of the header as home which is the target for this a tag of the navbar link all right let's see in the browser and click on the button and we have all the links here now let's expand this navigation bar and this is a new feature of bootstrap 4 that if we want to expand the nav bar in large screen we need to add one more class to the nav tag or else the nav bar will always be collapsed so let's add that class in the nav tag where we have this class never write never hyphen expand hyphen md so this will expand the navbar in screen sizes md and above all right save this refresh it and now let me just increase the size of the screen and there we have all the links in the navbar expanded so with this we have completed the navigation bar and we can minimize the navigation bar and let me quickly add a comment all right so now we are going to write so now we are going to create the banner text write a comment container for banner text then create a div tag and write class as container then get down and create another div tag and write class as row then create one more div tag inside and write class as call hyphen md hyphen 12 so this will take the entire width of the screen quickly begin with the comment banner text then create a div tag and write class as banner hyphen text we will style this class later in css then create a h2 tag and write hi i am then create a span tag and write class attribute as decorate and make sure that this span tag is within the h2 tag and not outside the h2 tag and then within the span tag you can write your own name just the first name then get outside the span tag and write your middle name followed by your last name or your middle initial and your last name whichever you prefer and we are going to style this decorate class in css to give it a cursive font style then drop down and create a p tag and you can write whatever text you want then write then add a br tag this will change the line and on new line write ampersand semicolon this will add that ampersand sign then designer all right you can see that text in the browser and you can see that in this banner text the first name is in cursive font style so we are using decorate class for achieving this or you can add the style attribute to this span tag and change the font style here itself but it will be better if we do this in css using a decorate class so that we can use this class with other elements of the website later also all right so get outside this div tag containing the class banner hyphen text and let's write a comment first we are going to define the small button which scrolls to the about section then create a div tag and write class as scroll hyphen 2 hyphen about then text hyphen center then drop down and create a a tag and hyper text reference as hash about then create a i tag within these a tags i tag is for icons then write class as f a space f a hyphen angle hyphen down this is the class for that font awesome icons for getting that down angle icon and this hyper text reference as hash about will make sure that when we click on this button the part of the website containing id about will be scrolled so this completes the html codes for this part of the website and before moving to the next part i am going to style this part in css so that we complete this part of the website before we move to the next part let's get inside the style tags and write body and since body is an html tag we don't need to start with a dot or a hash symbol we just simply write the name of the tag and then open curly braces and write line hyphen height as 1.4 then font 400 space 15 pixels space roboto within single inverted comma then comma sense hyphen serif 400 is the font weight 15 pixel is the font size and roboto is the font family then letter hyphen spacing as 0.5 pixels then color as hash triple three this is the font color and this hex code is for gray color then get outside the curly bracket and write a then open curly braces this is going to style all the links of the website then write outline as none now let's start styling the classes that we have used in the html and start with this bg hyphen header class write dot bg hyphen header then background as url open bracket then img forward slash and now let's see the name of the image that banner image open the starter files get inside the img folder and we have this bg hyphen banner dot jpg all right and refresh in the browser so the image is behind the navigation bar then write no hyphen repeat space fixed so no hyphen repeat will make sure that the image is not repeated again and again if the size of the image is small and the size of the screen is large then write background hyphen size as cover this will make sure that the image covers the element with which this class is used then write min hyphen height as 6 30 pixels this will give a minimum height to the image then position as relative refresh and we have the image now let's style this header hyphen bg hyphen gray glass which is used to add a gray color or a gray filter to the image write background hyphen color srgba open bracket zero comma zero comma zero comma zero point six seven three zeros followed by a 0.67 the first three zeros represent the rgb and the third one is the alpha which defines the transparency then min hyphen height as 650 pixels refresh so we need to get rid of the padding from both sides write dot container hyphen fluid and padding as 0 all around refresh now let's style this nav bar class write dot nav bar like padding as 3 pixels space 16 pixels 3 pixels is for the top bottom and 16 pixels is for the left right drop down and write dot navbar space dot never hyphen now space dot active then font hyphen size 18 pixels font hyphen weight s600 so this is going to style the active link in the nav bar and you can see that the outermost class is nav bar then we have this navbar hyphen nav and then the active class which will be added by bootstrap to the active link and you can observe that the active link in the nav bar is a little bit big than the rest of the links then write dot never hyphen now then greater than sign li then again greater than sign e this is going to format the a tags or the links which are inside the li tag which are inside this navbar hyphen nav class then write font hyphen size as 14 pixels then font hyphen weight as 400 and color as hash triple f this is the hex code for white color then outline as none save it refresh all right then write dot active and opacity as one then dot never hyphen nav space dot nav hyphen item space dot nav hyphen link so this is going to style all the links which are inside this nav hyphen link class then write transition as 0.3 seconds you can see this is the never hyphen nav class then this is the new hyphen item class and this is the narrow hyphen link class and this e tag is going to be styled and this transition is going to add a smooth transition effect when we hover over the links let's copy this and paste it and just add colon hover and add font hyphen size as 18 pixels save it observe that while hovering the font size is not changing for now refresh and the font size changes when we hover over the links let's format this toggler button then write dot never hyphen dark space dot never hyphen toggler colon hover comma space dot never hyphen dark space dot never hyphen toggler colon active then write background hyphen color as rgba 255 comma 255 comma 255 comma 0.2 and this is the navbar hyphen toggler class used with the button see that there is no hovering effect for now refresh and now let's get rid of this blue color outline right transition as 0.3 seconds ease then let's get rid of that blue colored outline right button colon focus outline as none then background hyphen color s rgba 255 comma 255 comma 255 comma 0.1 all right refresh so this completes the styling part of the navigation bar as well and now let's style the banner text write dot banner hyphen text and border hyphen left as 5 pixels space solid space hash b e 2 5 2 5 and this is going to add that red line to the left of the banner text then write padding as 15 pixels top bottom space 40 pixels left right then color as hash triple f then margin hyphen top as 170 pixels refresh let's style the h2 tag inside this banner text class write dot banner hyphen text space h2 then comma dot banner hyphen text space p so we are going to style the p tag as well as the h2 tag inside the banner hyphen text class minimize this and you can see that this div tag contains the class as banner hyphen text and this is the h2 tag inside it and that is the p tag these two are going to be styled like font s400 space 40 pixels space within single inverted commas write quest real q-u-e-s-t-r-i-e-l comma sense hyphen serif refresh it in the page now let's style the decorate class to get that cursive font style for the first name write dot decorate then font hyphen family satisfy within single inverted commas then comma cursive now let's style the scroll to about button and this is the class dot scroll hyphen 2 hyphen about space a space i so this will style the i tag which is inside the a tag which is in turn inside the scroll hyphen 2 hyphen about class then write text hyphen align as center position as absolute bottom as minus 140 pixels then font hyphen size as 24 pixels color as hash triple f and width as 40 pixels then height as 40 pixels refresh all right so this has a circular border let's add that right border 1 pixels space solid hash triple f this is going to add a border of one pixel thick and white colored all around then line height and height as 40 pixels refresh so we have a squared border then right border hyphen radius as 50 percent [Music] refresh it and the border is circular now let me just copy this dot banner hyphen text space b and write line hyphen height as 1.4 just to increase the line height in the text which are defined under the p tag looks perfect now so this completes this part of the website that is the header part of the website and we have created the navigation bar the cover image as well as the banner text and now we need to start with the about section that i am going to do in the next part thanks for watching all right now let's start with the about section begin with the comment about section begins then about section ends then create a section tag then write id as about then class as section hyphen padding a section tag defines sections in a document such as chapters headers footers or any other sections of the document and this section tag is new in html5 it was not there in the previous version of the html or in simple word we can say section tag means that the content inside it is grouped that is relates to a single theme and should appear as an entity in an outline of the page whereas a div tag on the other hand does not convey any meaning aside from any found in its class language or title attributes and this id as about is the same id that we have used in the navigation link for the about link so that when we click on that about link in the navigation bar this part of the website is going to be scrolled up or down depending upon the position of the website currently opened in the viewport so create a div tag and write class as container then get inside and create another div tag and write class as row then get down and create one more div tag and write class as call hyphen md hyphen six space text hyphen right so this will right align the text and this call hyphen md hyphen 6 will make sure that this div tag will get the half of the available width of the screen then get down and create a h2 tag and write class as title hyphen text so this is going to be the title for this section then write me space break tag that is br then create a span tag and class as decorate so we are using this decorate class again to give this text that cursive font style then you can write your first name within the span tag and then the rest of your name outside the span tag then get outside the h2 tag and then the div tag and since we have used coal hyphen md iphone 6 so half of the screen width is still available so create a new div tag and write class as call hyphen md hyphen 6 so that totals up to at 12 which is the total width of the screen then write text hyphen left so this will make sure that the text is left aligned within this div tag then write div tag and class as about hyphen text and let me just copy the text from this example page you can write any other text that you like and one more thing while writing codes it will be better if you use indents so that you get an idea where the tags are closing all right let me paste close the p tag and then write another p tag here change the line by creating p tag and writing ampersand nbsp semicolon this will change the paragraph change the paragraph down below also then create a ul tag that is the unlisted item then write class as about hyphen list then create a li tag and write any dummy text then copy this entire li tag and paste it two times all right so this completes the html part for the about section and now let's move to the css let's start with this section hyphen padding class write padding as 60 pixels top bottom and 0 pixels left right refresh all right write hash about this is the id for the about section like background url img forward slash then we are going to use this image about hyphen banner.jpg space no repeat then background hyphen size cover then margin hyphen bottom as -3 pixels all right refresh now let's style this title hyphen text class padding 0 space 25 pixels space 0 space 0 so this will add 25 pixels of padding in the right then border hyphen right as 5 pixels space solid space hash be2525 this is the hex code for the red color so this will add a red line next to the title text then font hyphen size as 24 pixels all right then dot about hyphen list space ally this will style the ally tag inside this about hyphen list class and write padding as 5 pixels top bottom and zero pixels left right and font hyphen size as 18 pixels [Music] and also you can observe that while this about section is opened in the viewport the about link in the navbar is displayed as the active one let's style this p tag inside this about dot text class like color as hash triple four [Music] let's minimize this and we have completed the about section as well now let's move to the portfolio section where we are going to create the thumbnail images begin with the comment portfolio section begins then portfolio section ends [Music] then create a section tag and write class attribute and the value as section hyphen padding then id as portfolio and this is the same text that we have used as the target for the portfolio link in the navigation bar then get inside and create a div tag and write class as container write a comment title text create a div tag and write class as row then get inside and create another div tag with class call hyphen sm hyphen 12 then create a h2 tag and write class as title space text hyphen center then write the text as let's then create a span tag and give the class as decorate and write the text within span text as c s double e so this text is going to be in cursive font style then get outside the span text and write my work see where this div tag with class row ends and then get outside that div tag you can see the title of the portfolio section then create a div tag outside the div tag containing the class row write class as container then get inside and create another div tag with id as my hyphen grid then class as grid hyphen padding let me just quickly add a comment then get inside and create another div tag with class row then again create a div tag with class call hyphen sm hyphen 4 and since we are going to have three columns of images let me create two more div tags with the same class call hyphen sm hyphen 4 so that we get a total of 12 all right so the first div tag is going to be the first column the second div tag will be the second column and the third one will be the third column then get inside the first div tag with the class called hyphen sm hyphen 4 and create a div tag with class row then within this div tag create a img tag and write source as img forward slash then you can see the name of the images all right then write portfolio 0 1 dot jpg space class as fit hyphen image we are going to style this class in the css so that we are able to fit these images properly in the image grid then space on click attribute then write open model open bracket close it semicolon current slide within bracket write one what we want is that when we click on this image this open model function should be executed which we are going to define later in the javascript and after that we want this current slide function to be executed or in simple word clicking on this image will open up the full screen image viewer or the full screen slideshow and this image is going to be the first image because we are giving it the slide index of one save it refresh it in the browser let's see the sequence of image that i have created in the example webpage so that we can follow the same sequence copy this entire div tag with class row containing this img tag copy this one and paste it three more times so that we get four images and the first image is the zero one the second one is the zero four the third one is the zero five and the fourth one is the zero one all right now let's change the index first one in the first then second and third and then fourth alright refresh and all the four images are there so let's copy these four div tags defining the four images and paste it inside the div tag containing this class call hyphen sm iphone 4 paste it let's change the index before i forget five six seven eight okay this paste it change this to nine now let's change the images the first one to zero two then zero four zero five zero one and then zero three [Music] then copy all these five div tags and paste them inside this one so that we have five images in the last column let me just quickly add some comments then let's change the index 10 11 12 13 14 then let me just copy this last image paste it and this one to 15 all right so we have 15 images in total first one is four then one then two then three then again two and last one is five and so we have completed the html part and we have defined all of the images now let's move to the css and start styling them write hash portfolio because that is the id of the portfolio section then background hyphen color f hash f o f one e nine let's refresh the images are on top of each other right now they are sort of overlapping so now let's fix that by styling this fit hyphen image class because we have used this class with all of the images dot fit hyphen image then height as 100 percent then width as 100 percent refresh all right now let's style the title dot title font hyphen size 24 pixels margin hyphen bottom 50 pixels and now let's style the image grid and add some padding around the images write hash my hyphen grid and margin hyphen top 50 pixels refresh all right then write dot grid hyphen padding padding 0 space 8 pixels all right padding is there on the left and on the right now let's add padding around the images write dot grid hyphen padding because that is the container class then space img which is the image tag you can see this is the grid hyphen padding class and these are the img tags inside it margin hyphen bottom 15 pixels transition and 0.8 seconds is copy this paste it then add colon hover we can remove this margin hyphen bottom property and add box hyphen shadow 0 space 10 pixels space 40 pixels space 0 space rgba open bracket 0 comma 0 comma zero comma zero point five that is three zeros followed by a zero point five and the last one is the alpha which defines the transparency now let's refresh and you can see we have this little bit of space below all the images [Music] and also we have this hovering effect now let's add padding to the sides right dot call high pen sm 5 padding hyphen right 30 pixels [Music] because the images are aligned in separate columns [Music] now it is looking just like the one we have in our example web page so with this we have completed the portfolio section as well and now we need to start with the image viewer or the full screen slideshow using model all right let's start with the comment model for full screen image view begins [Music] then let's start with the div element and id as my model and let's call it model because model is the default class for model in bootstrap then get below and let's first define the close button which is going to be responsible for closing the model then let's create a span tag and let's call it close this is also a special class of bootstrap with some sort of styling for the close button then right on click attribute and the function to be executed is close model this is going to close the model and we will define this function in javascript then ampersand times semicolon this is the code for cross symbol then let's define the content for this model which are the images create a div tag and let's call it modal hyphen content now let's define all of the images one by one create a div tag and class as my slides and we are going to use the same class with all of the images which we are going to define subsequently all right create a div tag for the index number and write class as number text then the text as 1 by 15 because this is going to be the first image out of the 15 images that we will define then create a image tag and the source as img forward slash and be careful that we need to follow the same sequence of images that we have followed in the image grid section so the sequence is one four five one portfolio 0 1 dot jpg and let's give it a class as portrait hyphen image we are going to use this class to resize the image to fit the viewport or the visible part of the browser so that we don't get scroll bars or something and the image does not get overflow so this completely defines one image now let's copy this div tag and paste it so that we can get the rest of the images by making appropriate changes this is the second image portfolio zero four this is a landscape image so we are going to use a different class for this one let's call it landscape iphone image let's copy this paste it let's create the rest of the images first and then we can make the changes all right one four five one and this portfolio zero one is the portrait image then change the index numbers all right then after that we have 2 4 5 1 3 portrait hypen image then the sequence is 4 1 two three two five the one is a portrait image rest of them are landscape so this completes all of the images now let's define the control buttons or the next and the previous buttons create a link tag that is a tag let's call it as prev this is the previous button then on click attribute change slides in brackets -1 because this is going to open the previous image then the text as ampersand 1 0 0 9 4 semicolon this is the code for that left arrow in the same way let's define the next button and this time with the change slides function write 1 and not minus 1 because we want the next image to be open when we click on this button and the code as ampersand hash one zero zero nine five semicolon so this completes the html part for the model let's start with the css let's reference the div tag containing the model by writing dot model because this is the class that we have used with it and display as none because we want the model to be hidden until and unless we click on it position as fixed z index as one because we want the model to be on top of other elements padding is five pixels top bottom and zero pixels left right then the position for model left zero then top 0 so that the model starts with the top left corner width as 100 percent and height as 100 percent overflow auto we will try our best to resize the images in a way that we do not get overflow but in case if there is overflow we need to have that scroll bar background hyphen color in simple words rgb part has defined black color and 0.8 refers to the level of opacity and since we have defined the basic class of the model now let's start with the javascript to make the model functional so that we can open up the model and see it while we make changes to the slides of the model so it is better to have the model functional before making any styling to it so that we can see the styling parts as we go on making the changes then let's start with the open model function this is the first function that is going to be executed when we click on any of the image grid get below all of the codes and create a script tag then let's start with the open model function so we are going to get this task done by changing the display property of the model that we have just set to none in the css so write document dot get element by id open brackets within single quote my hyphen model dot style dot display inline hyphen flex so this is going to make the model visible and you can see this is the display as none property that we have stated in the css and the javascript is just going to change this property to inline hyphen flex which will in turn make the model visible now let's define the close model function which is responsible for closing the model and we are going to achieve this by doing exactly the opposite that we have done in the open model function we are going to change the display property to none again write document dot get element by id open bracket within single quotes my hyphen model this will get the element which has this id which is our model and then change the display property to none so the model becomes invisible again now let's define a variable slide index js and initialize to 1 now let's call the show slides function by passing the value of the slide index js variable that we have just defined in the previous line in short calling this shows lights function with the initial value of 1 is going to hide all of the slides initially now let's define a function to fulfill the task of the next and the previous buttons create a change slides function because that is the function that we have used in the next and the previous buttons on click attribute then call the show slides function passing the value of the slide index js variable and incrementing it or decrementing it depending upon the button which was clicked for example if the next button was clicked then the value of the slide index js will be incremented by one and if the previous button was clicked then the value of this slide index gs will be decremented by one and then the show slides function will be called with that value of slide index js then let's display the image whose thumbnail was clicked and you can observe that when a thumbnail is clicked two functions are getting executed first is the open model which is responsible for opening the model and then second one is the current slide which signifies which image has to be opened up in the model so let's define current slide function all right then call show slides function with the value of the slide index js as n and n is the parameter that was passed on by the image for example if the image grid of the first image is clicked then this current slide function will be executed by passing the value 1 and now let's define the main function for operating this image viewer the short slides function let's create a temporary variable variable i now first of all let's get all the elements which has this class as my hyphen slides so that we have a count of the total number of slides or the images write variable slides js equals document.getelements by class name open bracket within double quotes my hyphen slides so this variable slide js is going to get all of the elements with this class my slides and you can observe that we have used this my slides class with all of the images that we have defined inside the model and now we need to take care of two conditions first is the overflow and second is the underflow overflow is when we are on the last image and we click on the next image again in that case we want the first image to be displayed again this is the overflow condition if n is greater than slides js dot length or the slide which is to be opened is greater than the total number of slides present in the model then change the slide index js to 1 that is open the first slide and now let's take care of the underflow condition that is if we are on the first slide and we click on the previous button we want the last image to be opened up again if n is less than 1 that is if we are on the first slide and we click on previous n will become 0 which is less than 1 then slide index js equals slides js dot length so in that case we want the last image to be opened up now let's hide all of the images initially create a for loop i equals 0 and i is less than slides js dot length so that i will run once for each of the images let's say we have 15 images so i will run for 15 times then i plus plus slide js brackets i dot style dot display as none then let's show the only slide which has to be opened up because of the click on the corresponding image grid right slides js in bracket slide index js -1 dot style dot display equals block we have written that minus one because in javascript we start the counting from zero in html we have started the counting from one so this completes the javascript part as well so the model is not opening up let me check if i have made any spelling mistakes okay first of all let me close this comment out and secondly in this get element by id e b and i has to be capital and same for this close model function make this b as capital alright now refresh in the browser and the model is opening up and we have scroll bars first one is for the model and the second scroll bar is for the body all right and we have this navigation bar on top of the model now let's style this model content class right position as relative then margin as auto this margin as auto is going to keep margin in a way that this model content is in center then padding as 0 width as 85 percent max hyphen width as 1200 pixels border as none save it we can see the next and the previous buttons and the close button is most probably hidden under the navigation bar then background color we want the background color to be transparent all right looks better now let's style the my slides class that we have used with all of the images now let's center align the images by styling that my slides class all right and now let's resize the images so that we don't get scroll bars and the images are within the viewport and not greater than the viewport and we have used two classes with all of the images either this portrait image or the landscape image so now let's style the portrait image write dot portrait hyphen image and then height as 98 vh and this vh is a relative length unit and one vh means the element will get the one percent of the height of the viewport and viewport is the browser's window size and we have used 98 vh which means this portrait hyphen image will get 98 percent of the height of the window size or the viewport alright refresh the image is resized anyway now let's style the landscape hyphen image class to resize the landscape images as well and for the landscape image we are going to use width property because for landscape image we have wider images so write width as 76 vw vw is also a relative length unit and 76 vw means it will get 76 percent of the width of the viewport alright refresh and you can see the images are resized well for the slideshow or the full screen image viewer now let's tile the close button write dot close color as hash triple f white color position is absolute because we want the close button to be there always irrespective of the size of the screen or the size of the images top as 10 pixel so it will be at a distance of 10 pixels from the top of the viewport write as 25 pixels so that it will be at a distance of 25 pixels from the right of the viewport then font hyphen size as 48 pixels font hyphen weight bold and transition 0.3 seconds ease the close button is still hidden behind the navigation bar all right now let's style the hovering effect of the close button color as hash triple f we want the same white color and text decoration as none because we don't want the close button to get underlined when we hover over it and cursor as pointer now let's style the next and the previous buttons cursor as pointer position as absolute top as 50 so that it will be in the middle of the screen and width as auto padding of 16 pixels all around margin hyphen top minus 50 pixels color as white or hash triple f still not visible it is somewhere here let's override any color defined for this write exclamation mark important this will overwrite any color property defined before this in bootstrap then font hyphen weight bold you can see the buttons now then font hyphen size as 3 em em is also a relative length unit and transition is 0.3 or let's say 0.6 seconds ease and border hyphen radius zero space three pixels space three pixels space zero the user hyphen select as none let's refresh and the buttons are pretty big and fine now let's tile the next button on the right side right as 0 this will position the right button on the right side then border hyphen radius as 3 pixels space 0 space 0 space 3 pixels refresh perfect i think i have misspelled the portrait hyphen image class while defining the images in the model we will see that after this let's first style the hovering effect of these two buttons dot next colon hover dot pre colon hover background hyphen color rgb a0 comma 0 comma 0 comma 0.8 so the rgb part defines our black color and the alpha defines opacity hovering effect is also fine we are still getting the scroll bar because of the navigation bar on top of the image viewer anyway let's style the number text which shows the index number of the images color as gray because the gray will be visible if the background is white or black and font hyphen size as 18 pixels point family as lato sans serif padding has 8 pixels top bottom 50 pixels left right position is absolute top 0 left 10 pixels and since we have defined this number text inside the my slides class so it will be at the top of the my slides class and at a distance of 10 pixels from left [Music] i think it is getting blocked by the navigation bar but anyways you can see that the images are well scaled and we are not getting any scroll bars and now let's correct the spelling of the portrait in rest of the images [Music] now let's hide the body scroll bar while the model is opened so we can get this task done by adding a line in this open model function so get inside it and write document dot body dot style dot overflow as hidden so this will hide the scroll bar while we are in the image viewer or the model all right you can see that we don't have any scroll bar now for the body but observe that even after closing the model the scroll bar is not back visible we have to take care of that also and we can do this task by adding one line in this close model so that when the model is closed the body scroll bar should be visible again so write document dot body dot style dot overflow auto [Music] so this is going to make the scroll bar back visible after closing the model so the open model function is performing two tasks first is to open the model by changing the display property and then hiding the body scroll bar similarly the close model function is performing just the opposite of the open model function first of all it is changing the display property of the model to make it hidden and then it is making the body scroll bar visible again [Music] [Music] and now let's hide this navigation bar while the full screen image viewer or the model is open so we are going to get this done by adding a line in the open model function so this open model function will perform three tasks first is to open the model by changing the display property of the model then hiding the body scroll bar and then hiding the navigation bar write document dot get element by id within single quote my hyphen navbar which is the id for the navigation bar then dot style dot display as none [Music] refresh [Music] even after closing the model we are not getting back the navigation bar so we have to make the navigation bar visible after closing the model we have to perform the opposite of three tasks that is done by the open model function using this close model function first is to close the model by changing the display property to none then showing the body scroll bar and then displaying the navigation bar again write document.getelementbyid [Music] within single quotes my hyphen navbar dot style dot display as flex alright we have the navigation bar open the image viewer close it and the navigation bar is visible again as well as the scroll bar for the body so with this we have successfully completed the full screen image viewer all the slides are all the buttons are working the images are resized well so that it is not getting overflown [Music] and the next thing that we need to do is to create this testimonial section and a carousel [Music] [Music] all right now let's start with the testimonial section [Music] create a section tag and let's write id as testimonial and then get inside and create a div tag and let's call it container hyphen fluid and this container hyphen fluid is a responsive class of the bootstrap and it takes the entire width of the screen or the entire width of the viewport then get inside and create a div tag with class as row then again get inside and create one more div tag let's give this div tag the entire width of the screen that is let's give this div tag all the available 12 columns so right call hyphen md hyphen 12 then create a h2 tag that is the heading tag and write class as text hyphen center to center align the text then space title then space text hyphen dark text hyphen dark is going to change the color of the text then get inside and create a strong tag this is going to create a bold text and write the text as testimonials which is the title for this section anyway get inside and now let's start with the carousel [Music] create a div tag and let's give it class as carousel space slide and write id as my hyphen carousel then data hyphen right as carousel then get inside and create a ordered list tag or an ol tag and write the class as carousel hyphen indicators these are the indicators on the bottom of the slide which refers to the current active slide then get inside and create a list tag that is the li tag and write data hyphen target attribute as hash my hyphen carousel so these indicators are going to get the data from the my carousel then data hyphen slide hyphen 2 as 0 because this is going to be the first slide then copy this entire ally tag and paste it twice all right then let's add a active class and let's make the middle one as the active slide and 0 1 2 all right now let's create a div tag so a carousel has three main important parts first is the carousel indicators then we have this carousel inner part and the third part is the carousel control buttons carousel inner so anyway now let's get inside and create a div tag and write class as carousel hyphen item space text hyphen center this will create one slide in the carousel let's copy this and paste it twice so that we get three slides in total let me just quickly drop some comments all right before we forget make the second slide as the active one because we have chosen the second slide in the carousel indicator to be the active one all right now let's define the slides completely get inside the first slide and create a div tag and write class as img hyphen box space border space rounded hyphen circle this rounded hyphen circle is going to create a circle and border class is going to get border around it and this img hyphen box is the class that we are going to use in css to resize the images m hyphen auto this will keep the margin as auto all around then get inside and create a image tag that is the img then write the source as img forward slash profile hyphen one dot jpg you can open the starter files see the spelling of the files or the spelling of the images class as d hyphen block this is going to change the display property of this image to block then w hyphen 100 this is going to keep the width as 100 percent then space rounded hyphen circle this is going to make the image circular this bootstrap 4 has some very handy and very useful classes that we can use throughout the html part we don't even have to open the css to set these properties we can set them right away in the html then get outside the div tag and create a heading tag h5 tag and write class as p y hyphen one this is also a very handy feature of bootstrap four we can use this class to add one rem padding on the top and the bottom as i have told you earlier this rem is also a relative length unit then space my hyphen 1 and this is going to set the margin top and bottom to 1 rem in simple words this y signifies that the padding is going to be along the y-axis or the margin is going to be set along the y-axis that is top and bottom then get inside and create a strong tag this will create bold text then write class as text hyphen warning and this class has a special font color attributed to it text hyphen upper this is going to transform the text to uppercase then write any name create1h6 tag write the class as text hyphen dark space m hyphen one this m hyphen one is going to set margin of one rem all around then write some text all right then drop down and create a paragraph text or a p tag let's write class as pt hyphen 3 space text hyphen white so you can see how easy it is to describe that color of the text or padding or margin in bootstrap 4 and let me just copy some dummy text and paste it here so with this we have completed one slide you can see where this div tag ends copy everything that is inside this div tag because this div tag is defining one slide and we have already defined the rest of the two slides we just need to define the content of these slides you can see we are starting from this div tag containing the class img hyphen box up till the ending of the paragraph text and then paste them in between the div tags of the second slide as well as the third slide and let's just make the necessary changes then paste it within the div tags of the third slide and change it and we can just minimize this carousel hyphen inner part then let's create the previous and the next buttons create a link tag that is the a tag and the link as hash my hyphen carousel and class as carousel hyphen control hyphen preview these are some predefined classes of bootstrap so we need to have them there is no alternative if you want to use the carousel of bootstrap you have to use these classes then roll as button data hyphen slide attribute and the value as brief then get inside and create a span tag class as carousel hyphen control hyphen brief hyphen icon this is going to define the left angle icon that we have seen in the carousels then arya hyphen hidden as true then get down and create one more span tag class sr hyphen only and the text as previous according to the bootstraps documentation this sr hyphen only is used to hide information intended only for screen readers from the layout of the rendered page so screen readers will have trouble with your forms if you don't include a label for every input so for these inline forms we can hide the labels using the sr hyphen only class anyway this has created one previous button we can copy this entire e tag and paste it and change all the brief to next then the text to next so this has completed the carousel as well you can refresh and you can see the carousel and we have the text as well the carousel is functional and we just need to style it so get inside the style tags let's start with the testimonial section light hash testimonial space dot container hyphen fluid this is going to reference that container hyphen fluid class inside the testimonial section padding as 100 pixels all around then background color as hash c0 c0 ba this is a variant of a grey color all right let's start by resizing the image write dot carousel hyphen inner space dot carousel hyphen item space dot img hyphen box this is going to reference the img hyphen box class that we have used in the div tag containing the images [Music] width as 135 pixels height as 135 pixels [Music] then write dot carousel hyphen control hyphen pre and left s minus 100 pixels so the previous button is already at the very beginning of its container that is the carousel hyphen inner class by changing the left property to minus 100 pixels we are going to place the previous button a little bit more to the left similarly we are going to keep the next button a little more to the right [Music] all right and now let's position the carousel hyphen indicators so let's refresh them top 330 pixels [Music] all right so we have completed up till the testimonials section [Music] and now we need to start with the contact section [Music] so let's start with the comment contact section begins then contact section ends then get inside and create a section tag and let's write class as section hyphen padding then id as contact then get inside and create our div tag and then let's write the class as container then get inside again and create our div tag and write the class as contact hyphen sec space text hyphen center then create a h2 tag and write the text as want to then create a span tag and write the class as decorate and we are using this class to add that cursive font style and then write the text as higher within these span tags then get outside the span tag and write me and a question mark then get down and create a paragraph text and then let me just copy the text from the webpage all right so this is the title for this section [Music] and now let's create the input forms create a div tag and write the class as container [Music] then get inside and create a form tag write class as contact form with a capital f the method as post role as form get inside and create a div tag and write class as form hyphen group then create a input tag type as text name as name class as form hyphen control placeholder name whatever text we write inside this placeholder attribute is visible in the form initially let's see in the browser first input box let's create some more then write the data hyphen rule this is going to make sure that at least four characters are typed so this has created one input box or input form we can copy this entire div block and paste it few times to create some more input boxes then change the name attribute to email type as email and the placeholder text as email data hyphen rule as email and this third one is the subject placeholder text as subject and the last one as message please write something for us all right but we want that last box to be bigger than the rest of the boxes so instead of using our input tag we can use a text area tag here and add one more attribute rows and the value as 5 all right then let's create the button that submit button create a div tag and write the class as text hyphen center then create a button tag and write the class as btn space btn hyphen primary space btn hyphen lg btn hyphen lg is going to create a large sized button and btn hyphen primary will get the default styling for the button type as submit the text as send message all right so this completes the html part and now let's style this contact section get inside the style tags write dot contact hyphen sec space h2 this will reference the h2 tag inside the contact section then font size as 28 pixels color as hash triple f font weight as 600 padding is 15 pixels top bottom and 0 pixels left right so this is the title which is going to be styled all right then write dot contact hyphen sec space p then color as hash triple font weight as 600 and padding as 15 pixels top bottom 0 left right hash contact this is the id for that contact section width as 100 and background color as rgba 8 seven comma seven comma zero point nine first three numbers are for the rgb part and the last one describes the opacity all right then write section hash contact space div dot container this will reference the container class which is the sibling of the div tag inside the section containing the id as contact padding is five percent all around all right this is the section and this is the id and both of these are siblings this is the div and this is the container these two are siblings as well then write contact space dot btn hyphen primary this is going to reference the button inside contact section then background color as be2525 border as one pixels all around space solid space be2525 [Music] copy this entire block paste it below and remove border property add colon hover and change the background color to a little dark red 721616 [Music] all right [Music] [Music] [Music] let me just remove this font weight in the paragraph text and write the font size 18 pixels and padding as 16 pixels space 0 space 24 pixels this is just to make it look exactly the same as the one that we have in our example web page [Music] alright so this completes the contact section as well and we need to start with the footer now [Music] so let's start with the footer [Music] create a footer tag [Music] write class as text hyphen center get inside and create a div tag and let's call it container [Music] then get inside and create another div tag and write class as d hyphen flex then space flex hyphen wrap and space justify hyphen content hyphen center this d hyphen flex will change the display property of this div tag to flex and this flex hyphen wrap will make sure that in small screens the content are wrapped onto the next row or column according to the flex direction and this justify hyphen content hyphen center will make sure that the contents are center aligned horizontally then get inside and create a div tag and write the class as mr hyphen sm hyphen auto space p hyphen 2 this pe hyphen 2 will add 2 rem of padding all around it this mr hyphen sm hyphen auto class will left align the columns in sm and higher screen sizes or above 768 pixels screen size and below the sm or below the 768 pixels screen width size the columns will be center aligned because of that justify hyphen content hyphen center class that we have written in the parent div class then get inside and write the text [Music] then create one more div tag and class as credits then designed by then create a link tag and you can write any link that you want [Music] and then target attribute as underscore blank this will make sure that the link is opened in a new tab and see where this div tag is closing get outside it and create another div tag and write the class as p hyphen 2 this will add 2 rem of padding all around it then create a ul tag class as social hyphen list then get inside and create a li tag then create a a tag within this li tag and then create a i tag within this a tags so the hierarchy goes like this first we have this li tag then we have e tag inside it and then we have i tag inside this e tag this i tag is used for creating icons then write the class as f a space fa hyphen twitter and this is the default class for getting that twitter icon in font awesome icons then copy this entire li tag and then paste it then change this to facebook then youtube and then instagram all right see where this div tag with the class d hyphen flex closes get outside it and create a div tag and write class as row text hyphen center then d hyphen block this will change the display property to block and then create a e tag and the link as hash my hyphen portfolio and this my hyphen portfolio is the id for the body and title as 2 space top then create a i tag and write class as f a space f a hyphen angle hyphen up and you can see the id here all right and let's start styling the footer right footer padding has 40 pixels top bottom 0 pixels left right then background color as hash f2 f3 eb footer space a color as be2525 then footer space a colon hover text hyphen decoration as none to remove that underline when we hover over the links all right then dot social hyphen list space ally transition 0.3 seconds ease opacity as 0.5 display as inline hyphen block and margin bottom as 0. [Music] then dot social hyphen list space li space e this will style the links which are inside this social hypen list class font hyphen size as 28 pixels margin hyphen right as 15 pixels all right dot fe hyphen angle hyphen up font size as 28 pixels [Music] color s triple zero width as 40 pixels and border as one pixel solid hash triple zero and line height as 40 [Music] pixels then border radius as 50 this will make the border circular [Music] so with this we have completed the footer as well [Music] [Music] [Music] [Music] so i am going to add the smooth scroll effect using a jquery plugin and it will be out of the scope of this video tutorial to get inside that jquery plugin and explain you how this smooth scroll effect is working it is really very tough and it is out of scope of this video tutorial get inside the script tag again and before starting of the open model function we can just add one line to start that smooth scroll effect dollar open brackets within single quotes html comma body close bracket dot smooth scroll s of scroll as capital brackets 500 and semicolon and then we need to add the link to that javascript plugin it is better to keep the link in the body part but just to make this look simple and easy i have tried to put all the links together in the head tag so i am just going to add a link to that smooth scroll plugin create a script tag and write the source as js forward slash jquery [Music] dot smooth scroll dot js and this plugin is already in that starter files folder if you want you can open that folder and check it there all right let's see in the browser refresh [Music] and we have the smooth scroll effect as well you can click on the links and the part of the website containing the anchor elements are scrolled smoothly so that is all for this video [Music] [Music] all right so now let's make this navigation bar transparent and we are going to make the navigation bar transparent while that header image or the cover image is displayed and then we will make the navigation bar opaque with a gray color once we have scrolled past that cover image [Music] so type variable nav call equals dollar open bracket within double quotes dot never dot navbar hyphen dark variable dark equals within double quote bg hyphen dark create third variable variable banner image height equals dollar open bracket within single quotes hash home then get outside the bracket dot height brackets and then semicolon so the first variable nav call will get the element which has this class navbar and navbar hyphen dark and the element which has these classes are the nav tag that is the main navigation bar tag and then we have created this variable dark and saved the text bg hyphen dark and bg hyphen dark is the class which is responsible for getting that dark color to our navigation bar so we are trying to make the navigation bar transparent by removing this bg hyphen dark class while the header image or the cover image is visible in the viewport and we want this bg hyphen dark class to be added to the navigation bar when we have scrolled past that cover image or the header image and the third variable banner image height will get the height of the cover image then write nav call dot remove class in bracket dark so we have initially made the navigation bar transparent by removing the bg hyphen dark class in simple words this statement will make the navigation bar transparent and then we need to make sure that the navigation bar stays transparent only up till that banner image or that cover image is visible in the viewport and for that we are going to use a small if statement this scroll function will be executed every time the page is scrolled up or down this whole function will be executed again and again and whenever this function is executed this if statement will be checked and basically this if statement is checking if the top of the viewport is greater than the height of the banner image or the cover image or not and we have got the height of the banner image using that banner image height variable if the top of the viewport is greater than the height of the banner image which means we have scrolled past that banner image or that cover image so we want the navigation bar to be dark colored so we will add that bg hyphen dark class to it and if the condition is false that is the top of the viewport is not greater than the banner image or which means we have not scrolled past that banner image then we will remove that bg hyphen dark class from the navigation bar to make it transparent so now let's open the browser refresh it and you can see that the navigation bar is transparent now and when we scroll past that banner image the navigation bar has become dark colored and if you scroll very slowly you can actually see the transition from being transparent to getting dark colored the navigation bar is transparent even after getting out of the banner image so we can subtract some of the pixels in the if condition to make the transition even better so get inside this if condition add minus 50 to the banner image height so it will remove 50 pixels from the height of the banner image in this condition [Music] and you can observe the transition effect here so by removing 50 pixels we have made sure that the navigation bar does not remain transparent after scrolling past this cover image [Music] [Music] so now let's add animation to our web page and for this we are going to use another plugin so get inside the head tag again create a link tag and write the link as css forward slash animate dot min dot css then create a script tag and write source as js forward slash wow dot min dot js all right then create another script tag and get inside and write new space wow all in capital open and close brackets dot in it open and close brackets semicolon and you need not worry about these files because they are already in the starter files folder that you might have downloaded [Music] so now we need to add animation individually to the elements that we want and the type of animation that we want let's start with the banner text and in the div tag containing the class as call hyphen md hyphen 12 lite space wow space bounce in up make sure that i and u are capital then add one attribute data hyphen vowel hyphen delay equals 0.2 seconds and let me just copy this attribute because we are going to use it a lot while adding animation so we have added animation to the banner text all right now let's refresh and before moving any further let me show you the type of animation that you can use open a new tab if you are connected to the internet which i hope you are open a new tab and write animate and hit enter and the first result will be this animate.css open it and you can see that we have a list of the animations you can choose either of them so all we need to do is just see the type of animation that you want and then remember its name and use it with the element that you want to animate so let's add feed in effect to about section so in the main section tag containing the entire about part just add in the clasp wow space fade in and then add data hyphen wow hyphen delay attribute and the value as 0.5 seconds so this will add animation to that entire about section and adding animation to this image grid is a bit tricky because we want the images to slide one after the other and not at the same time so to get this type of effect we need to play around with the data hyphen valve hyphen delay attribute get inside the portfolio section scroll to the first image in the class part add wow space feed in left because that is the type of the animation that we want for these images we want them to slide from left so add this to all of the images all right so all the images are sliding in together now let's change the delays of them observe that the first image in the third column is the first to slide in then the image below it and then the first image in the second column so get inside the third column and in the first image add data hyphen bow hyphen delay attribute now let's write the value as 0.1 seconds because we want this image to slide in first and then this image is going to be the second to slide in so let's give it the value as 0.3 seconds after that the first image in the second column has to slide in so let's give it delay of 0.5 seconds and then the second image in the second column let's give it a delay of 0.7 seconds then come to the first column and the first image and let's give the delay as 0.9 seconds all right so in this way we are going to add delays to the rest of the images i am going to fast forward this part and you can keep pausing the video at regular intervals and see the delays which i am adding to which image [Music] all right so we have the desired sliding in effect for the images [Music] now let's move to the testimonial section [Music] let me just minimize this part then in the main section containing the testimonial add class and the value as wow space fade in up and that is enough then for the contact section add wow space feed in and then add data hyphen valve hyphen delay attribute value as 0.6 seconds [Music] all right [Music] so this completes the animation as well [Music] [Music] so now the only thing left to do is add responsiveness by using media queries [Music] the full screen images are scaling well and i think we need to scale down the font size of most of the headings [Music] so get inside the style tags again and let's start with the media queries [Music] right at media space screen space and space open bracket max width 768 pixels that is the size of small screen or the sm [Music] then write dot close that is the class that we have used for the close button in the full screen image viewer and write font size as 1.5 em then write p that is for the paragraph text font size as 1 em space exclamation mark important we write this exclamation mark important to override any font size that we have defined before this then s2 that is the heading tag and font size as 1.5 em [Music] then dot number text which defines the index number of the images then the font size as 1 em then the next and the previous buttons font size as 2 em all right let's copy this entire block and paste it and change the max width to 480 pixels and let's change the font size of all of them and add one more write dot social hyphen list and margin hyphen bottom is 15 pixels and this is the social list icons and we need to take care of the carousel indicator as well it is getting behind the text in small screens so right at media space screen space and space open bracket and max width as 630 pixels and this is the class carousel indicators that we need to work with make top as 360 pixels all right still not enough just one more media query and it will be perfect let's change the max width to 525 pixels and top as 4 20 pixels all right [Music] let's add one more media query and hide the carousel in very small screens because it does not make any sense to display the carousel in such small screens anyway [Music] [Music] section hash testimonial [Music] this will hide the entire testimonial section [Music] [Music] so with this we have successfully completed all of the 15 videos in this video series and if you have followed all of my videos one by one carefully then your webpage would be ready by now [Music] if you like the video please hit like button and don't forget to subscribe to the channel i am going to see you in the next video series till then thanks for watching [Music] [Music] [Music] you

Channel: tanzTalks.tech

Views: 91

Keywords: tanzTalks, tanzTalks.tech, create a website for free, create a website, create new website, create website, create website for free, create website and earn money, create website using html css and javascript, create website html and css, create website using bootstrap, create bootstrap website step by step, create website using bootstrap step by step, create a bootstrap website from scratch, create responsive website in bootstrap, create a website using bootstrap tutorial

Id: JUV2Gz5XFP4

Length: 158min 37sec (9517 seconds)

Published: Mon Oct 18 2021