Can see that we have this subtle animation for this nav bar and if you scroll down here we have the our services section and if you scroll down we have the animation for each of these items and if you scroll down even more we have the animation for the next section which is the about section and if you scroll down even more we have the post section and uh if you scroll down we have the testimonial section and this is also a slider so you can go ahead and go to the next in the.
Previous slides and then if you scroll down we have the contact Section and then lastly we have the footer so we have this three section footer where we have this logo on the left side and we have some quick links and we we have these social icons with this hover effect and then lastly we have this copyright info and we can also click on these uh menu items to go to those specific sections so if you want to go to Services section we can just click on services and we'll be taken to the services section and in the same way we can go to the blog section the.
Testimonial section and all these different sections and this website is also responsive so if I decrease the width of the browser window this is how it will look on a smaller screen so we have this hamburger icon over here instead of the nav bar and if I click on that we have this screen displayed over here and we can click on any of these menu items and we will be taken to that section and if you scroll down here we can see that we have a different layout for each of these sections all of these.
Uh services are displayed one below the other and then we have the next section where we have a different layout and if you scroll down we have the latest posts which are displayed one below the the other and then we have the testimonial section and then we have the contact Section where we have all these fields one below the other and then we have the footer so this is how it will look on a mobile screen so we're going to create this website from scratch using HTML CSS and JavaScript in this tutorial series.
Exclamation and press Tab and you'll have this basic XML file code and here in the title I'll just type welcome and let's link our CSS and JavaScript files over here so let's type link and press Tab and here in the SF let's type sty or css and in the body let's go ahead and type script column SRC and press Tab and here let's Ty main.js and let's also go ahead and get the links of the fonts so here we're going to use two fonts the first one is called popins and the next one is called enter so let's go ahead and get the.
Links of these fonts from Google fonts all right so here I'm in fonts. goole.com and let's search for popins and here we have the popins font so let's select the font now we're going to need the Bold font so let's scroll down and uh let's select the Bal version so let's select Bal 700 so just click on select B 700 and let's also search for inter and let's select this font and for inter font we need to have the regular.
Version and let's also get the pH want for the Bal version so I just select regular 400 and let's also select Bal 700 all right so these are the fonts that we are using we are using inter regular 400 and Bal 700 and Poppins Bal 700 if you want more we will add it later for now let's go ahead and copy the link so let's click on this copy button and let's go back to our HTML file and let's paste the link over here.
In the head section all right now the last thing we will do is we will add some basic code to the CSS so first of all let's select the body and let's set the font family to enter by default and we'll also remove the default margin and let's go ahead and select the HTML and uh let's set the scroll Behavior to smooth so if you go back to our website and if I click on any of these links we are smoothly taken to that place so for that we need to use.
This property and the next thing we will do is we will select all the elements and also the after and the before selectors if you have any and let's set the Box sizing to border box now this will make sure that even if we add padding to our elements the width and the height of the element will be what we set so this line of code will make it easier for us to design websites precisely and let's go ahead.
- 5 Mind-Blowing FREE Windows Apps (you probably didn't know existed)
- Pakar Tutorial Mengucapkan Marhaban ya Ramadhan Selamat Menjalankan Ibadah Puasa Ramadhan PowerPoint
- How To Add Video In Text In Your Website Using HTML & CSS - Live Blogger BlogSpot
And create some variables for the colors so let's type colum root now this will - ID Card Make
Be accessible throughout the website so let's create a variable called yellow color you can name these variables anything you want so and just set the value to ffda 60 and let's create one more variable called yellow color hover or yellow hover color and let's set the value to F9.D85 and that's basically it with the CSS of this video so in this video we have set up our project and from the next video we will start designing our website all right this is how our page looks right now we don't have anything displayed on the screen so let's go to our source code and let's start with the markup of the nav bar so here in the body let's go ahead and create a nav element now if you go back to our design here we can see that the content of the.
Nav bar has a max width so if I zoom out the page we can see that it has this Max width so for that let's go ahead and create a division and I'll just give it a class name of container and we can use this same class for all these different sections because for all these sections we need to have the same Max width so let's let's go back and uh here in this container division let's go ahead and create an anchor tag for the logo and here for the SF I'll just type hash and uh for the logo I'll just Ty lb dot you can also add an image tag over here if.
You want and here for the logo let's also add a class called logo so that we can style it in the CSS now the next thing we will do is we will add these menu items so let's create a division for that and let's give it a class of menu items now in this menu items division we need to have about Services blog testimonials and we also need to have this button so let's create an anchor tag and uh here for the SF I'll just type hash for now and let's go ahead and type about and I'll just duplicate this and here for the second.
One let's type services and then for the third one we need to have blog and then testimonials and for the last one we need to have a button so so here for this last anchor tag let's also add a class and let's give it a class of BTN and here for the text let's go ahead and type contact and let's go back to our design and uh this is how it looks right now so we have the logo and these menu items right now let's go ahead and style this so let's go to Styler CSS file and let's.
Scroll down and first of all let's target the container division so let's St do container and for the container we need to have a Max width and let's set the max WID to 1024 pixels and let's also bring it to the center so let's St margin zero Auto and now if you add the background color over here we can see that we have this Max width and we have it in the center right now let's go ahead and style the nav so if we go back to the HTML file here we.
Can see that we have the nav and in that we have the container so if we go back to our design here you can see we have this box Shadow for the nav element so let's go back and uh let's type nav and let's add a box Shadow and let's set the values to 0 4 pixels 40 pixels 8 pixels rgba 0 0 0 and 0.3 and if you go back here we can see that we have this box Shadow now we need to fix this to the top so if you scroll.
Down here we can see that the nav bar is fixed to the top so for that let's go ahead and type position and let's set it to fix and now if you go back here we can see that the width of the element has changed so for that we need to type left of zero and right of zero now it has the correct width right now we need to display this on top of all the other elements so let's type Z index and uh let's set the value to 400.
And let's also set the background color to white and let's also add a padding and let's set the padding to 16 pixels top and bottom and 30 pixels left and right now if you go back to our design and if you scroll up here we can see that we have a larger height for this nav bar and if you scroll down the height changes so for that let's go ahead and let's add a class for the nav so let's St nav dot scrolled so when the page has scrolled.
We will set the padding to 8 pixels top and bottom and 30 pixels left and right
So we will reduce the top and bottom padding a little bit right now let's go ahead and bring this logo to the left side and these menu items to the right side so for that we need to set the display of the container to flex so let's go ahead and Target the container division which is inside the nav so let's tap nav container and let's set the display to flex and align items to the center and justify content to space.Between and now we can see that the logo is on the left side and the menu items on the right side right now let's go ahead and style this logo so let's type nav container a. logo and let's set the font size to 24 pixels right now let's go ahead and style all these anchor tags so let's type nav container a and first of all let's remove the underlines so let's type text decoration none and now let's go ahead and set the.
Font weight to bold and let's set the color of the text to Black and we'll set the font size to 14 pixels and let's also set the text transform to uppercase now when we hold over this we need to have a different color so let's go back and let's type nav container a colum hover and let's set the color of the text to Ed.
2243 and let's also add smooth transition so here let's St transition of all to 300 milliseconds e and now we have the smooth transition right now we need to have some gap between these menu items so they are inside this menu items division so let's target this I just type nav menu items and let's set the display to flex and let's add a gap of 36 pixels and let's tap align items to the center right now let's go ahead and style this button and for the button we.
Have given it a class name of BTN so let's go ahead and add some common styles for all the buttons so here let's type BTN and let's set the padding to 12 pixels top and bottom and 24 pixels left and right and let's say the Border radius to 24 pixels and let's set the background color to a variable that we created called yellow color so let's have VAR yellow color and.
By default anchor tags are set to display of inline so let's change it to display of inline block so that we are able to add some margin top and bottom and now if you go back here we can see that we have the styles for the button now when we H with this button we need to change the background color a little bit so let's go back and we also created a variable for that it is called yellow hover color so here let's type BTN column hover and let's type background and let's set it to VAR yellow hover.
Color and let's go ahead and add a smooth transition so let's tap transition all 300 milliseconds is now when we hard over this button we can see that the color of the text also changes that's because we have added the hover effect for all the anchor tags in the nav so let's go back and here for the the button hover let's tap color and let's set it to Black and now let's go back and uh we still have the color changing for the text that's because if we go to the nav here we can see that we have set nav container a colon hover so.
This is a more specific tag so that's why this is given more importance so let's go back over here and here let's add a more specific selector so let's St nav container BTN colon hover so now if you hover over this we can see that we don't have the red color so everything is working all right for this nav bar and with that we have completed designing the nav bar for our desktop.
Version now if you take a look at this header we can see that we also have this slider over here so if I click on this next button we go to the next slide and we have the previous button over here so we need to add this slider to our header so for that we will use a library called swipe sjs so you can just Google for swiper.js and you will find this website called swiper js. comom so you can just go to the website and click on this get started button and you'll go to this URL called swiper j.com getet started now there are.
Different ways to use swiper JS but we will use the CDN option so let's scroll down and here we have the option to use CDN so we need to copy this swiper JS minan CSS link and also this JavaScript link so let's copy this link from here and let's paste it inside the head tag of the HTML so let's paste it right here and we also need to paste the JavaScript link so let's copy this and uh let's paste it down.
Here now the next thing we need to do is we need to create the HTML so let's go outside this nav and here I'll just create a comment and end of the nav bar and here let's create a header tag and in this header tag we'll create a division and let's give it a class name of swiper and we'll also give it a unique name so I'll just name this header swiper now in this we'll create another division with the class of swiper.
Wrapper now in this swiper wrapper we will have all the slides now for the slides I'll give the class name of swiper slide now in the swiper slide we need to have all the content so I'll just create a division called content for that and in that we will have this image and then we need to have this text and this subheading so let's go ahead and create an IMG tag and in the SRC let's tap Images slash and I have this image called slide 1.jpg so it is inside this.
Images folder and uh the next thing we need to add is the title so let's create a division with the class of slide title and let's add the title over here so let's type web development excellence and now we need to add the paragraph So let's create a P tag and here let's add some text now we need to have three different slides so let's copy this swiper slide Division and let's paste it two more times and for the second one let's change the image to slide two and and.
Let's also change the title and now let's change this paragraph right now for the third slide let's change the image to slide 3.jpg and let's change the title let's type app development Mastery and let's add the subheading over here now if you go back to our design here we can see that we also have this next and previous buttons so for that we need to go ahead and create divisions let's go to the end of the this uh swiper wrapper Division and let's go.
Outside this Division and let's create a division with the class of swiper button next and let's create another division with the class of swiper button pre so these are the next and the previous buttons now we don't need to add anything inside here it will be added using this swiper JS library now if you go back to our design here we can see that we have the image displayed over here we also have these next and previous buttons but they are not working right now so let's go ahead head and add the JavaScript so let's go over here and uh I will add the JavaScript of.
This swiper JS library inside the HTML file itself so let's create a script tag over here now here we need to initialize the slider so let's name it header swiper equals new swiper and here we need to add the element so if you scroll up here we can see that we have given it a class of header swiper so let's scroll down and here let's type do header swiper and then we need to add some options so let's create an object for that and here first of all let's add the navigation so let's tap navigation and.
You want need to provide the class name of the navigation buttons so the class names are swiper button next and Swiper button pre so here we need to type next L which is the next element and let's type do swiper button next and uh let's tap pre L and let's set it to swiper button pre right now let's add an option called Loop and let's set it to true so now when we are on the last slide and if you.
Click on the next button it will go to the first slide and let's go ahead and add an autop play so let's Tap autop Play and uh let's set the delay and let's set it to 5,000 milliseconds which is 5 Seconds right now let's go back and here we have the slider and let's wait for 5 seconds and we can see that the next slide is being displayed so it is working all right now we need to style this using CSS and the next and the previous buttons are also working so now let's go ahead and style.
This so let's go back and let's go to the CSS file let's scroll down and uh let's create a comment I'll just call it header after you go back to the swiper JS website and if you scroll down here we can see that it says in addition to swiers CSS Styles we may need to add some custom styles to set the swiper size so we need to Target the swiper Division and we need to set the width and the height so let's go back and uh here let's type swiper and it is called header swiper so let's tap header swiper and in.
That we will have this swiper so let's tap swiper and let's set the height to 100% and the width to 100% right now let's go back and here let's target header swiper and in that we have this division with the class of swiper slide so let's type swiper slide and let's set the height to 100 vport height and now we can see that we have the correct height for the image right now let's target the content Division and that we have the image and the text so let's go.
Ahead and bring all this content to the center so here we can see that all this content is in the center so let's go ahead and Target this content so let's tap header swiper swiper slide content and let's set the display to flex align items to the center and justify content to the center and uh let's also set the flex direction to column so that all the items are one below the other and now we can see that the text is not being displayed so we need to send this image behind the text so for that let's go.
Ahead and Target the image so I just type header swiper swiper slide image and for the image I'll just set the position to Absolute and I'll just set the top position to zero and the left position to zero and now let's go ahead and set the Z index of the image to -1 and now if you scroll up here we can see that the text is being displayed over here at the top so let's bring it to the center so here for the content we need to set the height to.
100% and let's set the WID to 100% as well and now we have the text displayed over here and here for the image let's also set the height to 100% and the width to 100% and let's also type object fit to cover so that it has the correct proportions and now the next thing we need to do is we need to add an overlay so here we can see we have this dark overlay and on top of that we have this text so let's go back and for the overlay we will add a before selector so.
Let's tap header swiper swiper slide content colum colum before and uh we need to set the position of this before element relative to this content so here for the content we need to type position relative and here for before we need to type position absolute and let's set the content to blank now what we need to do is we need to set the Left Right top and bottom position to zero so we can just.
Type inser zero and we need to add back background color and uh we need to set it to rgba and 0 0 0 and here we need to add the opacity so for now I'll just type 0.9 and now if you go back here we can see we have this overlay and let's set the opacity to let's try 0.5 and this looks all right so now let's go ahead and style The Heading and this subheading now the text of the.
Content is in white color so here let's Tye color white and uh now let's go ahead and Target the title so for the title we have this division with the class of slide title so let's type header swiper swiper slide slide title and let's set the font size to 50 pixels and let's set the font weight to bold and uh this is how it looks now we.
Can see that the overlay is on top of the text as well so here let's go ahead and add a z index and let's set it to three and now we can see that the text is on top of the overlay right now let's go ahead and style this paragraph let's go ahead and type header swiper swiper slide p and let's set the font size to 20 pixels and uh let's set the Z index to three over here as well and this is how it looks right now the next thing we need.
To do is we need to style the next in the previous buttons so here we can see we have this background color of yellow and uh we need to decrease the size of these icons so let's do that and if you go back to the HTML file here we can see that we have this classes of swiper button next and Swiper button pre so let's type swiper button next and header swiper swiper button pre and let's go ahead and add a background color and let's set it to the variable that we created called yellow color and.
Let's add a padding of 8 pixels and let's set the width to 50 pixels and also the height to 50 pixels and uh this is how it looks now we need to set the opacity to a lower value so let's go ahead and type opacity and let's set it to 0.2 now when we hold of this we need to set the opacity back to one so let's type I'll just copy these two selectors and uh let's add hover over.
