Called main.js all right let's start with the index.html file now in vs code you can just type exclamation and press Tab and you'll have this basic HTML 5 code now here in the title I'll just type welcome and let's link our CSS file over here so I'll just type link and press Tab and here in the SF let's tab style or css and let's link the Javascript file over here in the body so I'll just T SC scpt callon SRC and press Tab and here let's tap main.js and now the next thing we will do is we will get the link of the fonts.
So we need to get the inter font and for the inter font we need to have the Bold version and this regular version and we need to have the popins font for this heading and we need to get the Bold version of the font so let's go to Google fonts all right so here I'm in fonts. google.com and let's search for enter and let's select this font and let's select the regular version so regular 400 let's select this and let's select the Bal version so I'll.
Just select Bal 700 and now let's select the popins font so I'll just search for popins and let's select this and we need to get the Bal version from this so I'll just select Bal 700 and now let's click on this icon called we selected families and here we have the link of the font now you can copy this HTML code or this CSS code I just copy this CSS code so let's copy this and let's go back and let's go to the CSS file and I'll just paste it over here so here we.
Can see we are getting enter 400 and 700 and Popin 700 right now let's go to the HTML file and let's start creating the markup of our design so the first thing we will do is we will create a nav element now if you take a look at the design we can see that we have this Max width for for this content so if I zoom out we can see that the content of the website has a max width so for that let's go ahead and create another Division and let's give it a class of.
Now and we have about portfolio services and contact so let's type about and I'll just duplicate this and then we have portfolio and services and contact now if you go back here we also have this button so for the button also we will have an anchor tag but we'll also give it a class and and let's give it a class of BTN and here let's type learn more right now let's open this in the browser and let's see how it looks so I have this extension called live server.
Installed in vs code so once you have this extension installed you can just right click over here in the HTML file and click on open with live server and now we can see that our content is displayed in the browser now the next thing we need to do is we need to create this hero section so let's go outside the nav and let's create a section and let's give it an ID of hero now in this the first thing we will do is we'll create the IMG tag and uh let's Ty images slh.
Hero image.jpg in the source so now if you go back here we can see we have the image displayed and then let's go ahead and add the rest of the content so we need to have this text content over here so let's create a division with a class of text content now we need to have a Max width for this text content so let's add the same class that we added over here so let's T dot container now in this container we need to have the left section and the right section so let's create a division with the class of.
Left and in the left section we need to have a heading so let's create an H1 and let's copy this heading and let's paste it over here and then let's create a right section now in this we need to have a paragraph and let's give it a class of subheading and let's copy this text and let's paste it over here and then we need to have these two buttons so let's create a division with a class of buttons now in this division we will have anchor tags for the buttons and let's give it a class of.
BTN and here let's tap explore now we need to create one more button so let's duplicate this and here we need to type learn more now this button has a different styling so let's also give it a class of light and we will style it differently in the CSS so with that we have completed writing the HTML of our design and uh here we can see all the elements are being displayed over here now let's go to our CSS and let's start styling.
- Tutorial Adobe Acrobat Sign automations with Make
- Transform Boring Presentations into Interactive Meetings Mentimeter
- Cadastrar Igreja - Planilha Cadastro de Membros e Controle de DÃzimos.
This so the first thing we will do is uh we will Target the body and uh let's - ID Card Make
Remove the existing padding and margin and let's set the font family to enter and sensitive and let's set the color of all the text to 11 1822 right now let's select all the anchor tags so let's type A and let's remove the underlines so let's tap text decoration and let's set it to none and let's set the color of all the anchor.Tags to 11822 right now let's style the container class so let's go back and let's type container and we need to add a Max width for this so let's tap Max width and let's the max width to 1,100 pixels and let's also bring it to the center so List have margin Z Auto and let's also add a padding of 0 26 pixels right now let's go ahead and set the position of the nav to fixed so that even if you scroll down the nav should be fixed at the top so let's target the.
Nav and let's set the position to fixed and let's set the top position to zero and now let's go ahead and add a background color so let's step background and let's set it to White and now we can see that the width has reset so for that we need to type left zero and right zero and now we have the correct width and let's also set a padding of 8 pixels top and bottom and zero for left and right and let's also set the Z index to.
Let's try 400 so that it is above all the other elements right now we want the logo to be on the left side and these menu items on the right side so for that we need to Target the container division which is this division with the class of container so let's target the container inside the nav so let's tap nav container and let's set the display to flex and justify content to space between and let's also align items to the center right now let's style this logo so for the logo we have this anchor.
Tag with the class of logo so let's type logo and let's set the font weight to bold and let's set the font size to 20 pixels and text transform uppercase right now we need to have some gap between these menu items so they are inside this division with the class of menu items so let's target that I'll just tap nav menu items and let's set the display to flex and let's set a gap of 32 pixels and align items to the center and now we can see we have this.
Gap between the menu items right now let's go ahead head and style this button so for the button we have this class of BTN so here I just tab do BTN now for the button we will set the background color to 11822 and let's set the color of the text to White and let's add a padding of 8 pixels top and bottom and 20 pixels left and right and let's also add a border radius of 30.
Pixels and this is how the button looks now if you scroll down here also we have the styling for the button because we have the same class over here now for the other button we also have this class of light so let's add the styles of this light button so here I just type BTN do light and when we have the light class we will set the background color to white and we will add a border of one pixel solid 111 822 and we'll set the color of the text to Black and now we can see we have have this light button now for this dark.
Button we don't have the correct height because we also have this border for this light button so we have two pixels of height added for this light button because we have the border on the top and the bottom of one pixels each so let's go ahead and add a border over here as well so let's St border and let's set it to one pixel and let's set the same color so let's tap 11822 and now we can see that both these buttons have the same height right now let's target the hero section and uh.
Let's set the height so let St hash hero because we have an ID of hero for this section and let's set the height of the hero section to 100 vport height which is 100% of the browser window right now let's style this image so let's tap hash hero IMG we'll set the height of the image to 100 V height as well and let's set the width to 100% and let's set the object fit to cover so that the image has the correct aspect ratio let's set the position to Absolute and now we can.
See we have this image with the correct height let's also set the position of the image to top so that the top portion
Of the image is displayed so let's stop object position top right now we need to bring the text content to the top of the image so let's tap hash hero and we have this division with the class of text content so let's tap dot text content and let's set the Z index to a higher value so I'll just type 200 and it is.Still not being displayed that's because we have this position over here in the IMG tag so here also we need to set a position so let's start position and let's set it to relative and now we can see that the text content is displayed over here now let's bring the text content to the bottom of the screen so I'll just set the position to Absolute and let's set the bottom position to zero and left to zero and the right to zero and now we can see our text content is at the bottom now we can.
See that we have some spacing at the bottom that's because this is an anchor tag and the anchor tags are set as display of inline so that's why this padding bottom is not being added correctly so let's go back and let's go to the button and let's set the display to in line block and now if you go back we can see that everything looks all right now for the text content we will have a white background color so let's tap background white now we want this.
Heading to be on the left side and all the other content on the right side so if you go back here we can see we have this text content and in that we have this container Division and in the container division we have the left and the right divisions so let's target this container division which is inside the hero section so let's typ hero container and let's set the display to flex and align items to the center and justify content to space between and let's add a gap of 30 pixels between the elements and let's say the padding block which is padding top and.
Bottom to 24 pixels now we can see that the right section has a lot of width so let's set the same width to both these divisions so let's go ahead and tape hero container div so with this selector it will select the immediate division after the container so it will select this left division and this right division it won't select this buttons division over here so let's go back and let's set the flex to one so both of them will have.
The same width all right now let's style this heading so for the heading we have an S1 so here we can see we have this S1 so let's start type H1 and let's set the font size to 36 pixels and let's set the line height to 1.4 and let's set the margin to zero now for the H1 we need to set the font family to popins so let's tap font family Poppins and sensitive all right.
Now let's style this subheading so here we can see we have this paragraph with a class of subheading so I just type hero subheading and let's set the margin to zero and let's set the line height to 1.8 so that's it with the styling of the subheading now let's add some margin top to these buttons so we have this division with the class of buttons so let's type buttons margin top and let's set the value to 30 pixels let's add.
Some gap between this so I'll just tap display of flex and gap of 16 pixels I think we can decrease the letter spacing a little bit for this subheading so here for the subheading let's start letter spacing and let's set it to a negative value so let's Ty 0 point let's start 0.4 pixels or let's try 05 and I think that looks all right so with that we have completed designing this hero section for the desktop version now for the responsive version.
We have this menu icon displayed over here and when we click on this menu icon we have these menus displayed and this is for the mobile version so first of all let's create the markup of this menu so let's go to the HTML file and here let's go inside the container Division and let's create a division with the class of mobile menu or mobile menu items and in this we will copy and paste these same menus.
And let's paste it over here right now let's go back to our design and uh now let's go ahead and hide this menu that we have in the desktop version so let's go to the styler CSS file and let's create a media query so let's St at media and let's tap Max width and let's set it to 800 pixels so whenever the width of the screen is less than 800 pixels all the CSS inside this block will be added to our design so here let's add the selector of the menu items of the desktop version so here we can.
See we have this menu items division inside the nav so let's tap nav menu items and let's set the display to none and now we can see that the desktop menu items have disappeared and here we have this mobile menu items displayed so let's go ahead and style that so here let's type mobile menu items and let's set the position to Absolute and uh let's set the display to flex and flex direction to.
Column and let's add a background color of white and let's set the Top Value to 70 pixels and let's set the right value to let's try 30 pixels right now let's add a gap of 16 pixels between the elements and let's set a padding of 16 pixels and let's tap align items to the center all right so that's it with the design of our mobile menu items now let's go ahead and create this uh menu icon over here so let's go to Hero.
Icons.com so here I'm in hero icons.com and let's search for menu and let's copy this SVG from here and let's go to the HTML file and here after this menu items division let's create a division with the class of menu icon and let's paste the SVG over here and let's go to the style. CSS file and uh let's go ahead and add some styles to that so here let's tap nav menu icon and in this we have the SVG so let's tap SVG and let's set the width of.
The SVG to 30 pixels and uh let's also add some padding to the menu icon so let's tap padding and let's set the padding to 8 pixels and let's also set the cursor to pointer and I think we can bring the padding down a little bit so let's set the padding to four pixels and I think that looks all right now this icon is not exactly in the center so for that we need to type display of flex and now it is exactly in.
The center now we don't want to display this uh mobile menu items and this menu icon in the desktop version so for that let's go ahead and create a comment I just type hidden items and here let's type menu icon or nav menu icon and mobile menu items and let's set the display to none and here in the mobile version let's type nav menu icon and let's set the display to block and let's target the mobile menu items and uh let's set the display.
To flex now for this text content we want this heading to be on the top and this paragraph to be at the bottom so for that let's go ahead and uh take a look at the HTML so here we can see we have this hero section and in that we have the container and in the container we have the left and the right divisions so if you take a look at the CSS here for the container we have set the display to flex now we need to set the flex direction to column when we are on.
Smaller screens so here let's type hero container and let's set the flex direction to column and let's add a gap of 16 pixels between the elements right now let's decrease the font size of this heading on smaller screens so let's tab hero and we have an H1 one and let's set the font size to 30 pixels now we don't want this mobile menu items to be displayed by default so here by default I'll just set the opacity to zero and pointer events to.
None and here let's add a class called active so when we have this active class we will set the opacity back to one and point our events to Auto right now let's open the dtto version and let's see whether we have any problem and everything looks all right so now let's add the functionality of displaying the mobile menu items when we click on this menu icon so for that we will go to the Javascript file and uh let's go ahead and Target this menu icon.
And also the mobile menu items so here we can see we have this division with the class of mobile menu items and also this division with the class of menu icon so let's St const menu icon equals document. query selector and let's tap nav menu icon and let's target the mobile menu items so let's tap const mobile menu items equals document. query selector nav mobile menu items and now let's add an event.
Listener to this menu icon so let's Ty menu icon. add event listener and let's listen for the click event and when we click on the menu icon we want to add and remove the active class to the mobile menu items because we have added the Styles over here so let's type mobile menu items. class list. toggle and let's type active over here and if you click on this menu icon we have the menu items displayed and if.
I click on it once again it disappears so it is working all right so with that we have made our hero section responsive now the first thing we need to do is we need need to get the CDN of gsap so just search for cdnjs Gap and click on this first link over here so this is a link of the CN of Gap so you can just click on copy script tag for this Gap MJS so let's click on copy script tag and let's go back to our source code and here in the HTML I just scroll down and just before this script.
Tag I just paste the CDN code so here we have the gsap MJS library and then we have this script tag where we are linking the main.js file so now let's go ahead and add the animation using gsap so let's go to the main rojs file and here the first thing we need to do is we need to create a timeline so let's type const and let's call it TL equals and here you need to type Gap do timeline now after this timeline is created you can just go ahead and type TL which is the name of the timeline.
Then you have two options from or to so I just tap from now what this will do is it will go from the state that we provide over here to the current state that we have in our website so for example this logo is right here now if I just type from and if I add an opacity of zero then it will go from zero to this opacity of one now if we add two instead of from then it will go from the current state to the state that we provide over here so for example if we.
Set the two to opacity of zero then it will go from this opacity of one to the opacity of zero so let's go ahead and write the code and you will understand it better now here the first thing we need to do is we need to provide the selector so the first thing we will select is this background image so here we can see if we reload this page the background image is first displayed over here so let's go back and uh if you go to to the HTML file here we can see.
Inside the hero section we have this IMG tag so it is immediately inside this hero section so we can just go ahead and type hash hero and uh in that we have the image so I'll just type greater than IMG so it will Target the immediate image tag and it will not Target the images inside any of the other divisions so let's go ahead and add an object over here for all the animations now here we.
Just set the opacity to zero so it will start from opacity zero and go to this state which has the opacity of one so let's save this and let's go back and let's reload this page and now we can see that the image starts from opacity of zero and it goes to this state right now let's go ahead and add the animation for this nav so if you go back here we can see that the nav comes in from the top so let's let's go back and uh here you can go ahead and keep adding new.
Animations so here let's type Dot from and let's select the nav so we have the nav element and let's add the animations so here in this object let's type Y which is the Y AIS so let's type minus 100 and we can also add easing so let's tap ease and let's set the easing to export. out now you have different options in gap so I'll just show you that so you can just Google for Gap easing and uh just go over here to this.
Link and here we have different easing options displayed over here so we have power one out and we have this three options in here and all these options over here you can also create your custom easing so you can just click on custom ease and uh customize the ease and it will give you the code for that so right now we are using this easing called expo. op out so this one right here so this is how the easing will look so let's go back let's also set a duration so let's Ty duration and let's.
Set the duration to 1.7 and let's save this and here we can see after this image animation we have the nav being animated now we want to have this nav animated a little earlier so before the animation of the image finishes we want this nav to appear so here we can see the nav appears a little earlier so for that you can go back and you can add an.
