Browser window this is how it will look on smaller screens and we have the animation on smaller screens as well and we have this menu icon over here and if.
I click on that we have the menu displayed over here so this is what we're going to design in this tutorial series now in this first video I'll just show you how to create the design of.
This using HTML and CSS so let's get started all right so here I have created this folder called Animated Hero section.
And I just opened it with vs code and I also have this folder called images and in that we have this hero image so let's start by creating the necessary file so let's create a new file and let's call.
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 Ty style CSS and let's link the Javascript file over here in the body so I'll just Ty.
Script colon SRC and press Tab and here let's Ty main. CHS 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.
- Este Microsoft Excel ! Sistema de painéis de estatÃsticas financeiras Tutorial 1. Office
- How To Design A Countdown Timer for Your Blogger Website (Part I)
- Excel 2019 Beginner Tutorial
Just select Bal - ID Card Make
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 Bold version from this so.I'll just select bold 700 and now let's click on this icon called view selected families and here we have the link of the font now you can copy this HTML code.
Or this CSS code I'll 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 popins 700 right now 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 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 container you can name this class anything you want now in this container class we will add all the content so first of all let's create this logo so I.
Just create an anchor tag and uh here let's give it a class of logo and here I'll just type logo you can also add an image if you want over here and then after the logo we need to have these.
Menu items so let's create a division with the class of menu items and in this we will have anchor tags and you can add the links of the pages over here I'll just type hash for.
Now and we have about portfolio services and contact so let's tap 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 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 let's typ images.
SL hero image.jpg in the source so now if you go back here we can see we have the image displayed and 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 tap 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 the 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 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 here we can see all the elements are being displayed over here now let's go to our CSS and let's start styling this.
So the first thing we will do is uh we will Target the body and uh let's remove the existing padding and margin and let's set the font family to enter and sensor and let's set the color.
Of all the text to 11822 right now let's select all the anchor tags so let's type A and let's remove the underlines so let's type 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 set the max width to 1,100 pixels and let's also bring it to the center so let's tap margin Z Auto and let's also.
Add a padding of 026 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 tap 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 0 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 this 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 type 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 a 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 and style this button so for the button we have this class of BTN.
So here I just tap do BTN now for the button we will set the background color to 111 822 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 1 pixel solid 11822 and we'll set the color of the.
