I just opened it with vs code and also have this folder called images where we have all these images now let's start by creating the necessary file so let's create a new.
File called index.html and let's create another file called Styler CSS and let's create one more file called main.js so let's start with the.
Index.html file now in vs code you can just type exclamation and press Tab and you will have this basic HTML file code now here for the title let's type welcome now here let's link our CSS file.
So we can just let type link and press Tab and here in the SF let's type style CSS and here in the body let's type script column SRC and press Tab and here it's tab.
Nav element and in this nav bar we can see that all the content is inside a specific width so if we zoom out we can see that we have this Max width for this.
Nav bar so what we're going to do is we're going to create another division with the class of container and we will style it in the CSS with a Max width property now here in this division we.
Need to have the left section where we have the logo and these menu items and the right section where we have this contact button so let's create a division with the class of left now in.
This let's create a division with the class of logo and here let's create the logo so let's create an anchor tag and here let's type lb do so this is our logo you can add an image if you want.
Over here and then after the logo let's create another division with the class of menu items and in this menu items let's add all these menu items so let's create.
Posts Related:
- Properly Handling Date Grouping in Excel Pivot Tables (Change Grouping, Get All dates)
- Prezi style Powerpoint - Slide Zoom feature - Hyperlink
- OneNote Tutorial Office
Anchor TXS for all of that and here
Instead of this hash you can add the links of these pages so here let's St home and I'll just duplicate it three more times and.We have portfolio music and about right now let's go outside the left division and let's create another division of the class of right and in this right division we will have this.
Contact button so let's create an anchor tag and uh let's tap contact now here since this is a button we need to style it differently so let's add a class called.
BTN right now let's go outside this nav and let's create a header and in this header we need to have this text so we need to have all this content inside of fixed width as well so let's create a.
Division with the class of container and here let's type H1 and let's add this text enjoy creative music all right that's basically with.
The header and now let's go ahead and style this in our CSS so first of all let's open this in our browser and let's see how it looks so here I have this extension installed called live server.
So once you have this installed you can just right click over here in the HTML file and click on open with live server and now we can see our website is being displayed in the browser let's go.
Ahead and start styling this so let's go to the styler CSS file and uh first of all let's import the phones over here so let's go to phones. google.com and here you to go ahead and search for the fonts.
So the fonts that we need are inter and uh this font over here is called DM serif display so you can just search for the fonts over here so you can just have DM serif.
Display and open the font and just click
On the add button over here so I have already added it so it is showing me this remove button so you can add the DM siif display and also the inter.Font and once you do that you will find this screen right here and here you can see I have the inter font and the DM safe display font then you can just click on this get embed code button and.
You can go to import and you can get this line of code and paste it in your CSS so I'll just copy this and I'll just paste it in the CSS right now the next thing we will do is.
We will select everything and uh we will type box sizing to border box so that we have the correct width and height for all the elements and now let's select the body and uh.
Let's remove the default margin and let's set the font family of all the text to enter sensor if by default and let's set the color of all the text to zero and let's set the color of all the.
Text to 00 which is black and let's add some CSS variables over here so let's tap colum root and uh this will be accessible throughout our CSS so let's create a primary.
Color and let's set the value to D1 510 a let's create another variable with a name of primary 2 color and here let's tap 9 to 3.
A06 and let's create another variable called accent color and let's set the value to F3 e 8 E2 right now let's add some styles for the container so for the container we.
Need to have a Max width so let's Ty Max width and let's set the max width to 1,000 pixels and we'll also bring it to the center horizontally so let's type margin in line which is margin left and.
Right and let's say it to Auto let's set the padding of zero top and bottom and 30 pixels left and right so it will look good on mobile versions as well right now let's select all the anchor tags and.
Let's remove the underlines by default a so let's Ty text decoration to none and let's set the color of all the text of the anchor tags to zero which is black right now let's.
Select all the paragraph and let's add a line height and let's set it to 1.8 right now that we done with this basic common CSS let's go ahead and start with the nav bar so the first thing we will.
Do is let's target the nav element and let's set the position to fixed so that even if you scroll down it will always stay at the top and let's say the top position to zero and left to zero and.
Right to zero and let's add a background color of white and let's add a box Shadow and let's set the values to 0 3 pixels 50 pixels -7 pixels rgba 0 0 0 and.
0.3 so this is our nav bar let's also set a padding of 30 pixels top and bottom zero for left and right right right now we want the left and the right divisions to be one next to the other.
Because here we can see we have this nav element and in that we have the container and in the container we have the left and the right divisions so let's type nav.
Container and uh let's set a display of flex align items to the center and justify content to space between so now we can see that the left section is on the left side and the right section on.
The right side right now we want this logo to be on the left side and the menu items to be on the right side so here we can see we have this division with the class of left and in that we have the.
Logo and the menu items so let's add a display of Flex for this left division as well so let's tap nav left display of flex align items to the center and let's.
Add a gap of 60 pixels between the elements so now we can see we have this logo on the left side we have the menu items and we have this contact button right now let's target this logo so for.
The logo we have this uh anchor tag and it has this container division of logo so let's go ahead and type nav logo and let's set the font size to 24 pixels let's set the font weight to bold.
Let's set the font family to DM serif display and serif as a backup font and here we have the logo go right now let's style these menu items so let's type nav and we have a division with the class of.
Menu items so let's set the display to flex and let's add a gap of 30 pixels so this is our menu items all right now let's style this button so for the button we have this class of.
BTN so let's type do BTN and for the button let's add a background color of VAR and uh let let's select primary color so this is the variable that we.
Created over here in the CSS and uh let's add a padding of 12 pixels top and bottom 32 pixels left and right let's set a border radius of 20 pixels and let's set the color of the.
Text to White and uh let's go ahead and add a hover effect so L St button colum hover and when we hover this button we will set the color to primary two color.
So let's tap background and let's set it to VAR primary two color and let's add a smooth transition so let's type transition and let's set it to all 300 milliseconds e and now we can see we.
Have this H effect now if you scroll down in our design we also have a button which has a different styling so for this button we will have a class called light as well so let's style that button.
Let's St BTN do light so when we have this light class for the button we just go ahead and set the border to 2 pixels solid VAR primary color and we'll set the background to.
