We have a new code displayed over here and we can see we have the code and also the author of the court displayed over here and then we have this button called new court and if i click on that.
We have a new code displayed over here so whenever you click on this new code button a new code is generated and we also have the author of the court displayed over here so this is what.
We're gonna design now in the first video i'll show you how to design this using html and css and in the next video we will add some javascript to make the api work to generate the code and this.
Author so let's get started right here i have opened up this folder called quotes in vs code and i also have this folder called images over here and.
In that we have this quartz icon and we're going to use that in our project so first of all let's create the necessary files so let's click on new file and we'll.
File so let's create a new file and i'll just name it main.js alright 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 will have this basic html5 code and here i will link our css file so i'll just type link and press tab and here in the editor i'll just type.
Style.css and we'll also link our javascript file over here so i'll just type script called an src and press tab and here i'll just type main.js.
All right now first of all we'll create a division with a class of code container and in that we will have a division with the class of code.
Now in this first of all we need to have the icon so here we can see we have this images folder and in that we have this svg file so let's go to the svg file and i'll.
Just copy everything from here Wesdigital
And let's go back to our index.html file and let's create a division with a class of code icon and here i'll just paste the svg code.All right now the next thing we need to have is the code so for the code we'll create a division with a class of code content and in that we will have a code.
Now just for testing i'll just copy this code from here and i'll just paste it over here and i will create a division for the court author so i'll just create a.
Division with a class of code author and in that i'll just copy and paste this author now the last thing we need to have is this button.
So let's create a button and we will give it a class of new code button and here i'll just type new code all right that's it with the html now let's.
Open this in our browser so i have this extension called live server installed in vs code so you can just go ahead and install this live server extension and once you do that you can just right.
Click over here in the html and click on open with live server and now here we can see our design is being displayed over here in the browser now let's start styling this.
So let's go to the style.css file and first of all we will remove the margin from the body so let's type body and i'll just type margin 0..
Now the next thing we will do is style the code container so here we have this division of the class of code container so let's target that here i'll just type dot code container.
And i'll just set the height to 100
Report height which is 100 height of the browser window and then we'll set the width to 100 percent and let's set.A background color of zero zero one two one nine right now let's bring everything to the center so let's type display of flex.
And we'll align items to the center and also justify content to the center and now you can see all this content is in the center and we'll also set the font family to pop-ins so here i'm in.
Phones.google.com and let's search for pop-ins and let's click on this font and we need to have the regular and the bold fonts.
So let's select them so i'll just select the regular 400 and let's scroll down and let's select bold 700 and now let's copy this link from here.
And let's go back and let's go to the html file and i'll just paste the link over here in the head section right now let's go back to our style.css.
File and here we'll just type font family and we'll just set it to pop-ins and send serif and we'll also add a padding of 32.
Pixels for smaller screens right now let's go back to our design now here we can see that the height and the width of the code.
Container is more than expected so here we can see we also have these scroll bars displayed over here so let's go back to our css and here we.
Need to add a line of code called box sizing and we have to set it to border box now when we add this line of code the padding of the element is also added.
With the height and the width of the element so now let's go back and here we can see we don't have any scroll bars now let's go back to the css and we will set a max width to this code so if you.
Go back to our html here we can see in the code container we have this code so we'll set a max width for this so let's go back and here we just type code container.
Code and we will set a max width of 700 pixels and let me just add a background color to.
See whether it is being applied and here we can see we have this max width of 700 pixels let's remove this background color right now let's style this code content.
So let's go back and let's type code container code content and we'll set the font weight to bold and also font size of 30 pixels.
And we'll set the color of the text to white and here we can see the code content all right now the next thing we will style is the code author so let's go back.
And we have a class of code author for that so let's target that so here let's type code container code author.
And for this we will set a font size of 18 pixels and reset the color of the text to yellow and we'll also add a border top so let's.
Type border top and i'll just set it to 1 pixel solid and let's set the color as 9 3e 0ff and we'll also add some padding so let's.
Type padding of 16 pixels top and bottom and 32 pixels left and right and we'll also set a margin top so let's type margin top.
And i'll just set it to 20 pixels now let's style the squat icon so let's go back and we'll position the code icon relative to the code so here we can see we have this code division and in that.
We have the chord icon so let's go back to the css and for the code we'll also type position relative now whenever we add a position of absolute to any of the children of code.
Then they will be positioned relative to the code so let's type code container code icon and we will set the left position to negative 76 pixels.
And the top position to negative 48 pixels you can go ahead and play around with these values so let's go back and we'll also rotate this a little bit and also change the scale.
So let's go back and let's type transform and let's type scale and we'll set the scale to 1.5 and we'll set the rotate z.
To 5 degrees and let's also set the opacity to a lower value so let's set it to 0.1 all right that's it with the code.
Icon now the last thing we need to style is this button so let's go back and if you go back to the html we can see that for the button we have this class of new code button.
So let's go back and let's type code container new code button and let's set a padding of 16 pixels top and bottom and 36 pixels left and right.
And we will position it to the bottom of the screen so let's type position of fixed and we'll set the bottom position to 36 pixels.