Project and we'll create all the files and we'll also add the links of the fonts and we'll also create css variables for the colors so let's get started.
all right so this is how the design will look so this is a complete website and i have shown you.
The demo of this website in the previous video and here i have created this folder called portfolio website and i just opened it with vs code and let's go ahead and create a new file.
And we'll just name it index.html and we also need to have a css file so let's create a new file i'll just name it style.css and we'll also create one more file for the javascript i'll just.
Name it main.js and let's start with the index.html file now in vs code you have a shortcut where you can just press exclamation and press tab and you'll have this basic html5.
Call an src and press tab and in the src i'll just type main.js right now the next thing we will do is we will get the link of the phones so if you go back to our design here we can.
See we need to have two phones one is this font called railway and the other font is called inter so let's get the link of these two phones so here i'm in phones.google.com and.
Let's search for the fonts so let's type railway and this is the font let's select the font and we need to have two styles of this.
Font so if you go back to our design here we can see we need to have the bold version and if you scroll down you also need to have a thin version.
So this is also the railway phone so let's go back and we'll select this thin style from here so let's click on select the style and we also need to select a bold.
Version so let's scroll down and let's Wesdigital
Find a bold version i think ball 700 looks fine so let's select this right now you can click on this button.Called view your selected families and here we can see we have the railway font selected let's also select the inter font so let's go back and let's search.
For enter and let's select this phone right here and here we will select the regular version so we'll select this regular 400. and here.
We can see we have the railway font and also the intro font and this is the link of the phones so let's select this link and let's copy and paste it inside the html.
So here inside the html in the head section i'll just paste the link of the phones so just paste it over here now the next thing we will do is we will.
Get the link of the swiper.js library so if you go back to our design and if we scroll down here we can see for the testimonials we have this slider.
And for that we are using a library called swiper.js so it makes it easier for us to design this type of slider here we can click on these buttons and.
Also drag to go to the next and the previous slides so let's search for swiper.js so you can simply google for swiper.js and you'll find this website.
Swiperjs.com so let's click on the website and if you scroll down we have the information about the.
Website we need to get the link of
The cdn so for that let's click on get started and if you scroll down we can see that there are various methods of.Using swipe.js we need the cdn links so let's scroll down and here we can see use swiper from cdn so we have to copy this swiper bundle mean css and let's paste it inside the.
Head section so let's copy this from here and let's go back to our html and i'll just paste it over here inside the head section and then we need to copy and paste.
The link of the javascript file so let's copy this and let's paste it over here so we'll just paste it just before the main.js script.
And that's basically it with the setup of our html file now let's go to our style.css file and let's create some variables for the colors so here you have to type colon.
Root so that the color variables can be accessed throughout the website so let's go back to our website and let's see what are the colors we need so the first color we need is this pink color right.
Here so we have the color in a lot of places we have the color over here for these dots and.
Even for the logo so for all of these we have this pink color so let's create the variable for the color so let's go back to our css file and to create a variable.
You have to type hyphen hyphen and the name of the variable let's name it primary color and then you have to set the value over here so for the color we have a hex.
Value of ff7474 so this is going to be our first color let's go back and the next color we need to have is this dark gray color.
And then we need to have this dark color over here so for this color we will name it gray color so let's go back and let's create a variable called gray color.
And for the gray color we have a hex value of two three two two two a and then we need to have this dark color right here so for that let's create a variable called dark color.
And for that we have a hex value of one seven 17171a now we need to have one more color which is this light color over here so we have the color for these.
Buttons over here so even for this button we have the same color so let's go back and i will create a variable called light color.
And for this color we have a hex value of ebf 0ff so that's it with the css color variables for our design all right so that's it with the setup of our project in the next video we will start.
Writing the html for this complete design so that's it for this video if you have any doubts you can ask in the comments below and if you like this video please.
Click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day .