Here as the content you can add images videos list or whatever you want and then we have another tab over here called comments and then we have the content of the comments displayed over.
Here and this is also responsive so if i decrease the width of the screen and if you cross this breakpoint we can see that all the tabs are displayed.
In full width and if we decrease the width even more we have smaller headings for the content and also the font size of these are.
Decreased so this is what we're going to design in this video now in the first video we'll just design it using html and css and in the next video i'll show you how to add.
Right here i have created this folder called responsive tabs and i just opened it with vs code and i also have this folder called images for this image right here.
And let's go ahead and start by creating the necessary files so let's click on new file and let's create an html file let's name it index.html and now let's create a css file let's.
Name it style.css and let's also create a javascript file let's name it main.js now let's start with the index.html file now in vs code you have the shortcut.
Where you can just press exclamation and press tab and you will have this basic html5 code right let's link our css over here so let's type link and in the sf i'll just type style or css and here in.
The body i'll just link the javascript file so i'll just type script and in the src i'll just type main.js all right let's start with the markup of the tabs now the first thing we will do.
Posts Related:
Is we'll create a container division to
Hold everything so let's give it a class of tabs container and in that we will create a division of.The class of tab heading container for all these tabs over here so let's tap tab heading container.
And that will have divisions with the class of tab heading and in that we need to have this icon and this text so for the icon we're going to use hero icons right here i'm.
In heroicons.com and let's go ahead and search for bookmarks so here let's type bookmark and here we have the icon so let's click on copy svg.
Let's go back and paste it over here first of all let's create a container division so let's create a division of the class of icon and in that i just pasted the svg.
And after that we need to type the text so let's go outside this division and let's type bookmarks right now we need to create another tab heading division so let's create a.
Division with the class of tab heading and let's create a division for the icon right now let's go back to hero icons and we need to search for this icon right here now for that we can just type.
Chart and here we can see this is the icon so let's click on copy svg and let's go back and paste it over here and after this division we need to type.
The text so let's type analytics and let's create one more tab heading so let's tap tab heading and let's create an icon division and the next icon we need to have is this.
Comments icon over here
So let's search for comments we have this icon right here so let's click on copy svg and let's paste it over here inside the.Icon division and after that we need to have the text which is comments all right that's it with the tab heading.
Container now let's create the content of the tabs so for that let's go outside this division and let's create a division of the class.
Of tab content container and in that for each of the content let's create a division of the class of tab content and.
Here let's create a heading and i'll just type bookmarks and let's create a division with the class of content and here we'll just add all the content.
That we want so i'll just copy this text and let's create a paragraph and i'll just paste it over here now we want the first tab content to be.
Displayed at the beginning so here we'll just add a class of active so when we have the active class we will display the content and here also for the tab heading.
For the first one let's add a class of active really scroll down and let's create one more tab content so i'll just copy this.
And let's paste it two more times and for the second one let's type analytics and for the content we can add an image as well so let's create an img tag.
And in the src i'll just type images forward slash and we have this image called analytics.jpg and let's also copy this paragraph and paste it down here.
And scroll down and here let's type comments and let's copy this and paste it down right that's basically it with the html.
Of our tabs now let's go to our css and let's start styling this before that let's open this in our 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 and click on open with live server and here we can see that our design is.
Being displayed over here now before doing anything else let's go ahead and decrease the height of these images so let's go back and let's go to.
Style.css file and let's target the image so the image is inside this tabs container division and in that we have this tab heading and in that we have the icon division and in the icon.
Division we have the svg so let's target that let's tap tabs container tab heading icon svg and let's set the height to.
Let's try 30 pixels and i think that looks alright right now let's start styling everything else so first of all let's bring everything to.
The center so i'll just target the body and let's set the display to grid and place items to center and let's set the height to 100 viewport.
Height and we'll also set the margin to zero and now let's go ahead and style the tabs container so here we can see we have this main container division called tabs container.
So let's type tabs container and let's set the width to 800 pixels and let's set the height to 400 pixels and now we can see that it is in the.
Center let's also set a font family of roboto and sans serif and we'll also add a padding of 16 pixels and let's set the background.
Color to white and i will also set the color of the text to 14213d and let's also add a box shadow so let's tap box shadow and let's set the values.
To 0 5 pixels 50 pixels negative 8 pixels rgba 0 0 0 and 0.3 let's also have rounded corners so here let's type border radius and let's.
Set it to 10 pixels now for all these elements let's set the box sizing to border box so that we have the correct height and width for all the elements.
So here i'll just tap tabs container and also tabs container asterisk to select everything and here i'll start box sizing and set it to border box.
Right now let's tile the tab heading container so we have this division of the class of tab heading container and in that we have all the tab headings.
So here let's tap tabs container tab heading container now we want all these elements to be one next to the other so let's set the.
Display to flex and we'll set a background color of e63946 and now we can see we have all these elements one next to the other now here.
We can see we have added some padding for the tabs container so that's why we cannot move this tab heading container to the edge of this tabs container division.