Create Byline Checkbox with airSlate SignNow

Input checkbox charter

hiren welcome to GT coding in this video we will design this custom check box so let me show you a demo when we click on any of these items we can see we have this animation and we have this custom SVG over here a lot of times the default checkbox may not be suitable for your design so you may have to create your own custom checkbox so let's see how to create this checkbox over here so I have this project opened in vs code and I have this folder called IMG and I have an SVG over here so let's start by creating an index dot HTML file and we'll also create a style dot CSS file and we want to move it outside the IMG alright so we have these two files now let's start with the index dot HTML file we'll just type exclamation and press tab and we have this html5 boilerplate first we'll create a division called container and in that we will have an h1 and we will say apps you use and then we'll create three groups for this checkboxes so we'll create a division with a class of group and in that we'll have an input with a type of check box and we'll also give it an ID of XD alright let's open this with live server and see what we have so here we have the heading and this is a check box let's create a label and it is for XD so we have to type XD over here and in label we will type Adobe XD alright so this is our first check box now let's copy this and we'll paste it two more times and for the next one we will type figma and here we'll type Sigma as well and Sigma here and then we have and we'll type skits over here so if you don't know these are awesome web design and prototype tools all right so we have all our checkboxes and all are working fine now let's link our CSS over here right so let's open the CSS and we'll start styling the page we start with a universal selector as always and we will type margin zero box-sizing border-box and for the body we'll give a font family of Roboto sans-serif and a background color of EC F 0 F 1 and we'll also set the color of the text to 2 C 3 e 5 0 now let's style the h1 and for the h1 will give a margin of 16 pixels and 0 and we'll also give it a border left of 5 pixels solid Yee 74 C 3 C and also a padding left of 16 pixels or ass knowledge style the container for the container we will give a padding of 48 pixels we'll give it a height of 100 viewport height and a display of flex and we'll set the Flex direction to column...