How to create an animated website using HTML CSS and bootstrap 5

hi everyone in this video i will be designing this animated website in bootstrap five so as you can see when i refresh the patch you can see the animation and now i am in the section so this link is now active and when i scroll down you can see the animation which is looking nice so also you can see this link is now active when i enter into the services section so this link is now active okay and you can see the animation of these cards which is looking cool and our features as the same animation is happening also in this feature section okay and this website is responsive uh completely responsive so i have designed this in bootstrap 5 which is looking nice okay so let uh let's see on the mobile on the mobile view so as you can see okay so let's get started and design this website in bootstrap 5 from the beginning okay so the first thing that i'm going to do i'm gonna copy the images that i have used for this project i'm gonna copy these images and i have created this folder and in this folder i have created one folder for css and javascript and one for the images i'm gonna paste uh those images that i have used okay and i'm going to open visual studio code so i'm using this text editor and then i'm going to open that folder which is this one i'm gonna open this and then i'm going to get the bootstrap code okay so this is the finished project okay and i'm gonna get the bootstrap code so i will go to website and then i'm going to click on the docs and click on the starter template and i'm gonna create in a file for html this is going to be index.html i'm gonna paste that code right here and i'm gonna save it i'm going to remove this okay so this file is for the bootstrap css okay minified css and this is for the bundle js which contains of popper js and bootstrap.js okay and i'm going to remove this comment okay and then i'm going to create a file for the custom css this will be style style.css and i'm gonna get the navigation click on the components and then click on the navigation bar i'm gonna get this and i'm going to paste it to here okay and i'm going to add a comment for this this will be navigation bar and i'm going to change this to this text okay and i'm going to remove some of these navigation links i'm going to rename it to this will be home link this will be services i'm gonna duplicate this one this will be features okay features home services about feature this will be about this will be features reviews and blog reviews blog and finally contact okay now i'm going to open this file okay so we have this navigation and i want some space from the left and right so i'm going to remove this fluid class and i want to push these navigation links to the right side i'm gonna add a class of margin start to auto okay and uh then i'm going to add the hero section so i'm gonna call collapse this then i'm going to add another comment for the hero it's going to be hero section i'm gonna take a section take i'm gonna give it uh of uh id this is going to be home oh and inside this i'm going to create a container i'm going to create a 12 column space okay this div will call 12 column space and i'm gonna create an h1 tag and i'm gonna get the text from this finished project okay this will be i'm gonna break the line here okay i'm gonna copy this text also and then i'm gonna paste in here and this will be i'm gonna break the line here as well and i'm going to refresh the page so as you can see we have this text and then i'm going to rename this title so i'm going to give it a title up bootstrap 5 okay and then i'm going to add a button okay this i'm going to add a class of btn btn i'm gonna give it a btn of main this will be your main button this will say get started okay and now i'm going to design this section so i'm gonna link to the file that we have created inside the css folder style.css okay i'm going to refresh and then i'm going to design this okay so the font that i have used in this project is roboto so you can get this phone from google phones so this is the phone that i have used and this is very cool looking phone so i'm going to select four seven and nine i'm gonna also select the weight of five and then click on the import and i'm going to copy okay and then i'm going to paste it right here okay and then i'm going to change the body font to the roboto font family to roboto and the sensitive then i'm going to refresh the page so as you can see our phone has changed now i'm going to design the hero section okay before designing that let me just give it the wet for the heading to something like 800 i'm gonna add this 800 weight as well okay then i'm going to save it i'm going to refresh i think 900 which is very bold okay and now i'm going to [Music] give the line height as well so the line height for the body text will be 1.7 okay 1.8 okay and then i'm going to give the the navigation color to white so it is a bit light so i'm gonna change that color to bg light to bg white i'm going to refresh and then i'm going to give some uh some shadow so i'm gonna select the navigation okay navigation sorry not the so i'm gonna select the anchor tag and i'm going to text decoration for the anchor tag will be none okay and i'm gonna give a transition 0.4 second is okay and the font weight for the naive lengths will be 900 800 will be okay and then i'm going to select the navigation new bar okay and i'm gonna give it shadow box shadow it is zero this will be 12 pixel 20 pixel and i'm gonna give it a background color of dark 0.1 so let's see so you can see we have this shadow okay and which is looking cool now i'm going to [Music] design this section so i'm gonna give a background color sorry background image so i'm gonna style background image url inside the images folder we i'm gonna select the color one so we have that image now so as you can see we have this overlay at the top of this section so i'm gonna put the overlay which is a gradient for lay so i'm gonna give a class overlay so i'm gonna create another tag inside this this will be overlay okay and now i'm going to get to the section take i'm going to select the section take and padding top and give a padding top to 80 pixel and also padding bottom to 80 pixel and the z index is going to be 2 okay so i'm going to refresh the page okay so then i'm going to create another class this will be bg cover class background position is going to be center and um bankroll repeat is going to be no repeat and background size is going to be cover okay so i'm going to refresh and i'm going to add this class to the navigating the hero section so i'm gonna add this glass so as you can see we have this image now and it is looking very cool so i am going to use this class in different places and so that is why i created this class once and i will be using this class many time as i want okay so let me just create the overlay now so i'm gonna select overlay okay and the position for the overlay is going to be absolute okay so the parent element is going to be relative okay and i'm going to give up from the top is going to be 0 from the left it's going to be 0 as well and the width and height is going to be 100 percent okay i'm going to give a background color for now background let me give a red color so as you can see we have this overlay so i'm going to get the gradient colors that i have used in this project so i'm gonna get these colors so this one i'm going to copy i'm going to paste it right here it'll be a linear gradient okay i'm going to paste it here and i'm going to get the another color which is just this one copy it and i'm gonna paste it right here save it and now let me refresh the page so as you can see we have this uh this gradient color and i want to give the opacity so i'm gonna click on this and then select one rgb okay and also for this one oops this will be also rgb and i'm gonna add the alpha i'm gonna give opacity to like 0.7 and also for this one i'm going to save it and refresh so we have this overlay so as you can see this overlays at the top of the text so i want it to be the back side of the text so i'm going to give a g index minus 1 so that's why we have given the z index of 2 to the section and this will be z index -1 now you will see the text will be at the top awesome now i'm going to select the hero section so i'm gonna give it a class of hero section i'm gonna copy this class okay and before doing that let me give the color of white so inside this container we have this text so i'm going to add a class of text white okay i'm going to refresh and the text is going to be the center okay and then i'm going to select the hero section zero section i'm gonna give a height of minimum height will be 100 vh which is going to be the viewfort height okay and uh this will be a flex so i want the content to be in this center vertically and horizontally so i'm gonna say display of flex justify content to center okay and align item to center vertically okay and if you want to give the if you want to achieve the parallax effect like we have in this finished project as you can see when i scroll down you can see the images you can see the image so for that i am going to add a class of sorry add a property background attachment to fixed okay so you will see now we have this parallax effect and then i'm going to select the navigation i'm gonna add a class of fixed top okay and now i'm going to [Music] give a class to this h1 so i want the size to be display four i'm going to refresh okay and then i'm going to give some space so i'm going to select the paragraph text i'm going to give margin top and bottom to foreign okay and yeah now i'm going to design the button and select the btn i'm going to add a padding uh 14 pixel and 22 pixel 14 from the top and bottom and 24 22 from the left and right i'm gonna give a background color so i'm gonna get this gradient color copy and i'm gonna paste it right here and i'm going to click on this one so i'm going to remove the opacity okay so this will be our gradient colors and it will say to left going to go i'm gonna save it and then i'm going to refresh okay so this will be for the button main that we have created and select beating man oops here is the problem okay i'm gonna select the button man so let me see the btn main hmm why it is not working i'm gonna check this so yeah it is not working okay and the border radius for the this button is going to be 100 pixels and the border is going to be none okay and now the font weight is going to be 800 er 600 if 600 is looking okay and now i'm going to change the color for the button color will be white okay looking good okay so now i'm going to the font weight for this is going to be 800 as well so i'm gonna add this i'm going to add an important flake so it will override everything so now i'm going to select the button man i'm gonna give a transition to this as well and when hover on the main button the text color is going to be white okay and i want to transform translate y i'm going to push this button of perfect cell negative from negative top so when i hover on this but on this button you can see this button moves to a little bit to the top so which is looking good i think 5 pixel will be good and i'm going to okay nice okay our hero section is ready so now i'm going to design this services section okay so i'm gonna select i'm gonna collapse this i'm gonna copy the uh this comment i'm gonna paste it here rename this to services okay i'm going to create a section take give it id of oops services create a container 12 column and this will be the intro section intro h1 our services and i'm gonna create a divider i'm gonna paste the text i'm gonna copy this text and i'm going to paste it right here and i'm going to break this line here i'm going to save it and refresh so we have this text okay this will be container okay and the text is going to be centered okay now i'm going to design the intro section so i'm gonna select intro section and i'm going to then select the divider i'm going to give a padding margin bottom to like 40 pixel okay and then i'm going to select the divider i'm gonna give a height of 2 pixel and the width of 70 pixel and the background color is going to be the gradient color so i'm going to copy this color and paste it so we have this line height is going to be four and this will be in this center so i'm gonna give a margin auto and i'm gonna give a margin bot margin top to five pixel uh auto i think 16 will be good so 16 pixel from the top and bottom and the left will be auto okay margin and then i'm going to design these card services cards okay so i'm going to collect this row i'm going to take another row and create a class of four this device cover for column space on md device medium device and then i'm going to create another class called service okay this will be another class inside this service image i'm going to create the image here image um this will be the image one going to refresh the page so we have this image and i'm going to all the image in this website it will gonna cover 100 space okay so this will be responsive no matter how this screen size is so it will it will gonna cover the container width so which in this case is uh four column space so if if this is like to add column so as you can see this will cover eight column space so yep that's it okay so now i'm going to get these icons i'm gonna search for the icon that i have used is a line icons i think okay so these are the icons that i have used so i'm gonna get these icons okay search for so i'm gonna leave linked to this icon in the description so what you can do you can download this as an icon font and then click on the download the font pack so this icon is now downloaded so i'm gonna open this okay i'm gonna paste it right here then i'm going to extract these icons here i'm going to open this and click on the fonts so i'm going to copy this fonts folder inside this project i'm going to paste it right here and then i'm going to open this and then rename this style to line icons why i have renamed this to the line icons because we have already created a file with with the name of style.css in our project so i'm gonna copy this into our css folder so we have that icon uh so now i'm going to link to that file this will be in css and uh should be line icons.css now i'm going to open this and i'm going to link to the to the to this folder so select these okay i'm going to save it so this file is inside the css folder so i went back one directory back and into this folder okay and now i can use these icons so so i'm going to create a dev class div class of icon connect icon you can browser so i'm going to refresh the page okay so as you can see we have this icon okay and then i'm going to add some text h5 service name and then i'm going to copy the text from here then i'm going to paste it right here and i'm going to refresh the fetch okay so design so let's design this service this service page sorry this service box so i'm gonna copy the service service and then i'm going to select service image okay and then i'm going to select the icon and give the background color sorry the bed is going to be 70 pixel height is going to be 70 pixel as well okay and the background is going to be this linear gradient color is going to be white for the icon okay and the border radius is going to be 100 pixels okay and i want the icon to be in this center so i can use flexbox align item to center and justify content to center okay and i'm going to increase the size of the icon to 44 pixels font size okay then i'm going to increase the font size for the icon and select the i and the font size is going to be 44 is a bit and i'm going to increase the weight to 90 i'm going to save it and then i'm going to refresh the page oops white is not increasing the weight so let me see oops this will be 90. okay looking good i know i want this i want the icon to be in this center of this image so half will be here and half will be to the bottom of this image so i can use position absolute for this icon so to make it into this center okay so i'm going to the service image which is the container for the icon is going to be position relative okay then i'm going to select the icon position is going to be absolute okay and from the bottom is going to be minus 45 pixel okay so i gave the 40 why i gave the 45 minus 45 pixel because the the height is going to the height is 90 and uh 90 divided by 2 is equal to 45 and i push the icon from the bottom to minus 45 so this is now at the same at the middle of this image right here and from the left side is going to be 50 pixel okay and i want this to be horizontally center so i'm gonna add transform translate x is going to be minus 50 percent and this will be at the middle of this image which is looking cool and the text alignment should be in this center okay and then i'm going to give some space from the top okay i'm gonna give a padding a little bit so i want some more space fading for okay i think it is looking good now now i'm going to duplicate this this will be image two this will be image three and i can change the icon okay so this will be our services so okay our service section is ready now now i want to achieve this effect okay so as you can see we are at the top so this link is now active and when i click on this services this link is now active and it goes to this services section so for that i will visit to [Music] bootstrap website and search for scroll spy i'm gonna search for scroll spy then click on this and then i'm going to copy this okay and i'm going to paste it here and i want to target the navigation bar okay and then i'm going to give these links so this will be home so we'll go to the home id okay so the home id i have given to this hero section and this will go to services id okay so now let me refresh the page so as you can see we are at the homs at the home section so this link is now active if i click on the services now this service is active as you can see the color is dark so i want this color to be the gradient the active link then i'm going to click on this link and get the classes that are used for these links so i'm gonna select this i'm gonna copy so inside this navigation i'm gonna paste it here and i'm going to give color of the gradient color so i'm going to search for css text gradient color click on this csstrx.com so this is very cool website for css tricks and other cool stuff so i'm gonna copy this code and i'm gonna paste it right here okay and i'm gonna get the gradient color i'm gonna copy and i'm gonna paste it right here okay so let me refresh the page now oops it's not working okay so as you can see we have this gradient color for these naive lengths which is looking great so as you can see this is working fine awesome so now we will design this this section okay so i'm going to this will go to the about features and this will go to reviews blog and finally contact i'm to save it and now i'm going to design i'm going to design that video section i'm going to copy this hero section okay i'm going to paste it right here and i'm going to remove this this will be about and then remove this hero section okay and i'm gonna get the intro the intro title so i'm gonna copy this intro title and i'm going to paste it right here okay so i'm going to refresh so as you can see we have this so i'm going to rename this to watch our video okay and now i'm going to design this this video button so i'm gonna create an anchor tag the class of video button for now i'm gonna write play okay so i'm going to close this okay so we have this button so i'm going to design this button and i'm going to change the image to cover 2 this will be cover 3. okay i'm gonna change the overlay color to so this will be first okay i'm gonna design the play button so here is the button so i'm gonna select play button a bit of 60 pixel height of 60 pixel and background color will be gradient color i'm going to copy this color i'm going to paste it right here i'm going to refresh the page okay okay and i'm going to give a class i'm gonna give a property display in line flicks okay so it is video button so this will be video button so we have this button and [Music] the text will be in the center horizontally and vertical and the color is going to be white oops the color is going to be white okay so we have this button and i'm gonna give a border radius 100 pixels okay so we have this bud awesome so our video section is ready okay now i'm going to design this our feature section so i'm going to rename this comment to about and then i'm going to copy this service section i'm going to paste it here i'm gonna remove this row i'm gonna save it and refresh so this will be ours our feature so i'm gonna rename it to features okay so i'm gonna create another row column md4 i'm going to create a div class of icon i'm going to give a class of icon tool tools okay and then i'm going to hit h5 this will be your feature name feature title i'm gonna get the text from this finish project so i'm gonna copy this text and i'm going to paste it right here i'm going to refresh the page so we have this text now i'm going to design this uh feature i'm gonna give a class of feature and then i'm going to select the feature and then i'm going to select the icon okay and i'm gonna give a color of gradient color to the icon i have copied now i'm going to paste it right here the color will be this gradient color for the icon and i'm going to give a size 54 pixel i'm going to save it and refresh so as you can see we have this gradient icon which is looking very nice and now i'm going to give some space margin top four and margin bottom to three okay looking nice and then i'm going to copy this feature six times okay and then i'm going to rename the change the icon okay calendar icon okay and then this will be scissors okay so i have changed this icon so i'm going to get some space between these columns so i'm going to select this row i'm going to add a class of gutter horizontal is going to be four okay and gutter y will be five okay which is looking cool now okay our feature section is ready and also i want to give some space to these services boxes this will be features select the row and this will be g4 getter space will be 4 okay and now i'm going to design this section contour section so i'm going to collapse this i'm going to copy this about i'm gonna pass it right here this will be counter or you can call it milestone for the company i'm gonna remove the id i'm gonna change this image to cover two so here it is okay i'm gonna remove all these okay i'm gonna create a column md3 okay and i'm gonna select uh dev class inside this will be there this will be an icon or you can simply uh select the icon create and i take for the icon this will be dropy icon droppy so these are the icons that we have already downloaded from that website so i'm using uh these icons so as you can see these are different icons i'm going to save and refresh so we have this icon so i'm gonna give a class of h1 to increase the size for like okay and then i'm going to h5 h6 od this will be the number of wet okay h1 h1 so i'm gonna copy this text i'm gonna paste it and then i'm going to get this text this will be a paragraph let me refresh as you can see we have this now i want i want to give some space okay so okay i'm going to give space margin top to four and margin bottom to two three will be okay okay so i'm going to duplicate this oops i'm gonna copy this so i'm gonna select the beautify plugin okay i'm gonna save it and refresh i'm going to change the icon second one will be icon camera one two one t oops second one will be camera and say pictures taken okay and the third one oops and the third one will be used smelly icon happy say we have happy clients okay and the last one will be this brush okay say themes designed i'm going to refresh okay that's too much you know so now that is looking good and i want to give some space so you can see we don't have the space so i'm going to give a greater space greater space of y is going to be 4 so now we have some some space and it is looking good awesome and now let me design this testimonial section so i'm going to duplicate this feature section this will be our reviews i'm going to rename it to testimonial 7 refresh okay and i'm going to remove this these columns i'm going to design the review section so i'm going to create a class of review i'm gonna create a class of person and this will be i'm gonna put an image here image so i'm going to select this one and select another text this will be text h6 i'm gonna give a name gonna give it a company name okay and i'm gonna select a paragraph text right here i'm going to copy this text okay and then i'm going to create the stars okay so i'm going to [Music] refresh the page so i'm going to design this review section so i'm going to copy this i'm going to design this review and i'm going to select the person class okay this will be flex display flex okay and uh i'm gonna give the width to the image 75 fixed and height to 75 pixel as well i'm gonna give it a border radius of 100 pixel save and refresh so we have our review section and then the text will be to the left and i gave a class of text so text will be start okay and the align item will be in this center okay okay this will be this small deck okay and i'm going to add a class of margin bottom to 2 ram i think let me make it to 0 okay 0 is looking good and i'm going to give some space between the text and the image so i'm gonna margin start to rearrange okay and i'm going to add this border to the bottom of this this image i'm going to select this and i'm going to give a border bottom one pixel solid will be a dark color to save and refresh the page okay so we have this border 8.07 0.07 okay so now it is looking good and i want to give some padding bottom 24 pixel uh 18 pixel you can give the space the padding space padding or margin to using the bootstrap classes like uh gave it like pairing bottom to four rim okay you can use these glasses as well and then i'm going to give some shadow i'm gonna select the review i'm going to give a box shadow zero pixel 12 pixel rgba dark color okay so we have this shadow and i'm going to give some padding padding is going to be 5 frame uh five frame is i'm gonna give it four four is looking good and then i'm going to give some space here padding top to four rim okay looking cool and now i'm going to [Music] add these star icons so for that i am going to use bootstrap sorry box icons okay search for box icons and then click on the usage i'm gonna select this link here i'm gonna copy i'm gonna paste it right here and save it and then i'm going to search for the uh star icons search for the star i'm gonna copy this one click on the font i'm gonna paste it right here let me refresh the page so we have these stars so i'm gonna give a class off select the review stars and the color is going to be orange save and refresh so we have this color and it is looking nice okay then i'm going to duplicate this this review six times okay and the space is going to be the gutter space is going to be for okay awesome and i'm going to change the image this will be two one and three okay so our testimonial section is ready so now let me create this block section and contact and let and then we will add these animations okay so i'm going to design this block section so for that i will i'm going to copy this and paste it i'm going to select to remove this row this will be block okay and i'm going to refresh and the background color for this is going to be light okay and i'm going to add these blog posts which is going to be pretty simple i'm going to select a column select an image this will be image block post one i'm gonna select div okay inside this i'm gonna create a small tag so it'll be posted in this will be an anchor take should be the category name this blog post is posted in web design category okay on date of 2055 and then i'm going to give a title okay i'm going to get the text i'm going to paste the text right here save it and refresh so we have this blog post oops so i forget to this will be the paragraph text gave up h5 this will be the title for the block and the text will be to the left side so i'm going to give a clause of text start this will be in the remove this class okay and i'm going to give some space so this will be inside the anchor tag this will be a link paste it right here okay and i'm going to give some space margin top to four rim going to refresh okay and i'm going to change the anchor color to the dark color is going to be dark color and save it and refresh okay looking good and now i'm going to duplicate this so i'm going to give some space margin top to 3 rim and margin bottom 2 ram refresh so margin top is going to be 2 ram as well okay now it's looking good i'm going to copy and paste it's blog post i'm gonna change the image okay our blog section is ready okay so now i'm going to design the contactors section so for that i'm going to do some copy paste i'm going to copy this block section and paste it right here and then i'm going to rename this to contact and i'm gonna select the class and the image i'm going to copy this i'm going to paste it right to here oops i'm going to remove this row for now i'm gonna paste it right here save it and refresh the page okay so we have this section and i'm going to add a gloss text white and i'm gonna add another class of orlais okay so we have our conductor section i'm going to rename this all black pose to get in touch and i'm going to create another row inside this row i'm gonna add add a class of md 8 add our form okay and this will be class of row i'm gonna add a class of form group okay i'm gonna add a clause this will cover six column space on md device medium device and i'm gonna add a input field uh placeholder is going to be full name and class is going to be form control okay i'm going to duplicate this class this form group i'm going to paste it here this will be type is going to be email and the placeholder is going to be email address and now i'm going to copy this one this will cover 12 column space and this will be type is equal to type will be the text and the placeholder is going to be subject and now i'm going to copy this one okay this will be text area okay and is going to be for class of form control and the placeholder is going to be save it and refresh okay so we have this form as you can see and i want to this form to be in this center so i'm going to add a class mx auto and i'm going to add another class to this row which contains these input fields i'm going to give some space get a raw forum okay save it and refresh so as you can see we have this form and now i'm going to add a button here and type is equal to b submit okay i'm gonna save it and refresh so as you can see we have this button so i'm gonna wrap this button inside a dev okay and i want this button to be in the center so you can add a class of text center now the button will be in the center which is looking cool and as you can see in the finished project we have these input field is looking like this so i'm going to design this form so i'm going to go ahead i'm gonna select form and then i'm going to select input okay so the class is form control i'm gonna give a height of 54 pixel and the border radius is going to be zero and the background color is going to be transparent ok save it and refresh so as you can see we have this our form and i i want to change this placeholder color so i'm going to select this placeholder and the color is going to be white okay so as you can see the placeholder color is white and which is looking good okay and on the focus okay so i'm let me increase the road to something like 10 okay text area is okay so let me check okay so i'm gonna select because of the height so i'm not gonna give the height to the form control so i'm gonna say form input dot form control so i want i want to give the 54 pixel height to these input fields only not to the text area so i'm going to refresh so as you can see and then i'm going to the row to four okay looking good and now i'm going to on the focus so i want the color to be white the text and the background is going to be transparent so i'm gonna select the form control on focus from focus color is going to be white and background is going to be transparent and of course save and refresh okay so looking good and the color is going to be white okay nice so i'm going to give some opacity to the border color border color white i'm gonna reduce the opacity to something like seven save and refresh so on focus color is going to be white for the border color something like 5 7 refresh so as you can see when i click inside this input field the border color is white which is looking cool okay nice so now i'm going to design the photo section which is going to be pretty simple this is going to be footer folder create a container inside this photo six i'm gonna get the copyright text from the finished project i'm gonna paste it right here and i'm gonna create another column okay i'm going to create uh social links i'm going to go to the box icon website okay then click on this link and search for facebook i'm gonna click on this one font copied i'm gonna paste it right here i'm gonna paste it couple of time it's going to be [Music] twitter stagger on dribble get up and then i'm going to refresh the patch so we have this icon so i'm going to text md to [Music] end okay and then i'm going to remove the padding from the ferrygraph margin bottom to zero okay and i'm going to give some padding py24 okay and then i'm going to give a color of white and the background color is going to be trans um linear gradient so i'm gonna copy this color okay and the color is going to be white okay and the anchor color is also going to be white okay so the website has finished and i want to change this play text to the play button i'm gonna search for play so i'm gonna copy this click on the font copy it i'm gonna search for play i'm gonna paste it right here save and refresh okay and i'm going to increase the size okay looking good so now it's time to add the animation for our website okay so let's see it's responsive okay on mobile screen it is looking perfect okay very nice and now i'm going to add the animation for that i will visit to [Music] this website which is known as animate on scroll which is a very cool library for these kind of animations so i'm going to install this library on this website okay so as you can see when i scroll down this animation is happening so you can add these different kinds of animation okay so i'm going to install this i will copy this link for the css i'm gonna paste it right here then i'm gonna copy this one i'm gonna paste it right here okay and then we need this thing to initialize this so i'm gonna add another file for the javascript it's going to be app.js i'm gonna paste it right here okay i'm gonna link to that file okay so now let let me check the animation so i'm gonna copy this basic the first one fade up i'm gonna go to this hero section i'm gonna add this to this text and now let's see if it is working or not which is not working so we okay this will be okay wow it's working now so as you can see you can animate these kind of text okay so let me refresh the page wow it's working so i'm gonna add this animation to the the service box and other elements of the page okay so you can try some different animations like fade down fed right okay so i'm gonna add i'm gonna copy this okay i'm gonna add this to the navigation as well so this will be fade down navigation so let me refresh the page as you can see nice so i'm gonna copy and paste it right here as well zoom and i change the animation to zoom in for the heading one so as you can see awesome and you can do this for the button as well nice so i'm gonna copy this i'm gonna do this for the intro text it's going to be fed up paid off and for the services boxes i'm going to it's going to be okay zooming save it and refresh okay so when i scroll down you can see the animation okay which is looking nice huh so the you can try different animations so like zoom out left or right and you can change the speed for the animation as well so like i'm gonna copy this one i'm gonna paste it here so you you will see the speed for this one so this is a very slow as you can see okay so you can play around with the with these animation okay so you can change the [Music] ease in so you can change to like ease or linear so whatever you want to achieve okay so yep i'm going to do this for the others okay okay so i have added all these animation to the section so as you can see i scroll down this animation is happening oh which is looking cool huh okay guys so that is it for this video i hope you guys have enjoyed this video and uh yep see you in the next video thank you for watching you

Channel: SA7MAN

Views: 50,538

Keywords: how to design a website using html css, how to make a website using html, how to make a website using bootstrap, how to make a website using bootstrap 5, bootstrap 5 tutorial, bootstrap 5 website, bootstrap 5 full course, bootstrap 5 responsive website, bootstrap 5 website design, bootstrap 5 website design tutorial, bootstrap 5 landing page, bootstrap landing page, bootstrap responsive landing page, bootstrap tutorial 2021, bootstrap tutorial, html css website design tutorial

Id: TLdivj3K2JQ

Length: 102min 5sec (6125 seconds)

Published: Mon Nov 08 2021