SARDAR Coding

                                    Use HTML (favicon) This is HTML sheet (icon)    < title > Ismail sarder </ title >     < link rel = "shortcut icon" type = "image/png" href = "media1/GROUP-1.png" >

Use CSS variable (form and list style)  If you want icon like -list ..Go to this wed -site : https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=tick And attest HTML <header> this link : <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> This is CSS sheet /* form style */ .text-are12 {     resize : none ;     border : 3px solid rgb ( 71 , 3 , 3 );     border-radius : 5px ;     margin : 10px ; } input [ type = "submit" ], input [ type = "reset" ]{     width : 90px ;     border : none ;     margin : 10px ;     border-radius : 5px ;     padding : 5px ;     background-color : olivedrab ;     color : white ;     cursor : pointer...

                        Use CSS variable and make search Bar This is CSS sheet .header-grvu {     background-color : yellowgreen ;     padding : 2% 4% ;     text-align : center ;     box-sizing : border-box ;     height : 100px ; } .header-grvu1 {     float : inline-end ; } .header-grvu2 {     float : right ;   } /* background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),                   url("../../media/examples/lizard.png"); */ .header-grvu2 #search1 {     background-image : linear-gradient ( rgba ( 156 , 156 , 163 , 0.5 ), rgba ( 197 , 197 , 194 , 0.575 )), url ( search.png );     background-size : 10% ;     background-repeat : no-repeat ;     background-position : right ;     /* background-color: rgba(163, 162, 162, 0.856); */ ...

                                     Use CSS variable(Table style)                                                   This is CSS sheet /* table anamition */ .table332 tr:nth-child (even) :hover {     background-color : rgba ( 248 , 103 , 51 , 0.849 ); } .table332 tr:nth-child (odd) :hover {     background-color : rgba ( 248 , 103 , 51 , 0.849 ); } tr , th {     padding : 20px ;     text-align : center ; } .table332 {     margin-left : 30px ;     } .table332 tr:nth-child (even){     background-color : rgb ( 180 , 172 , 172 ); } .table332 tr:nth-child (odd){     background-color : rgb ( 119 , 173 , 10 ); } This is HTML sheet < div >               ...

Use CSS variable (animation progress) This is CSS sheet(progress bar) /* progress animation */ .progres-ani {     background-color : gray ;     width : 300px ;     padding : 10px 10px ;     margin : 0 auto ;     box-sizing : border-box ;     border : 3px solid black ;     border-radius : 10px ; } .progres-ani li {     list-style-type : none ;     margin : 30px 0 ;     font-weight : bolder ;     text-transform : uppercase ;     position : relative ; } .progres-ani li::before {     content : '' ;     position : absolute ;     top : calc ( 100% + 7px );     left : 0 ;     border-radius : 1000px ;     background-color : rgba ( 202 , 186 , 186 , 0.705 );     width : 100% ;     height : 15px ; } .progres-ani li::after {     content : '' ;     position : absolute ; ...

Use CSS variable (Transition and Transform)  This is CSS sheet(transform) /* transition variable */ .mainn12 {     background-color : yellowgreen ;     width : 200px ;     height : 200px ;     margin : 0 auto ;       transition-property : width,height,transform;     transition-duration : 0.5s , 1s ;     transition-timing-function : ease-in-out ;     /* transition: width 1s,height 2s; */ } .mainn12:hover {     width : 300px ;     height : 400px ;     transform : rotate ( 360deg ); } .mainn12 h1 {     text-align : center ; } This is HTML sheet   < div class = "mainn12" >< br >                 < h1 > Sardar IT </ h1 >                 </ div >

Use CSS variable(animation) This is CSS sheet(animation) /* css animation */ .img-fin {     max-width : 170px ;     height : 200px ;     display : block ;     margin : 0 auto ;     margin-top : 100px ;     margin-bottom : 100px ;     border : 4px solid black ;     border-radius : 60% ;   } .img-fin:hover {     animation-name : img-ani;     animation-duration : 3s ;     animation-fill-mode : forwards ; } @keyframes img-ani {         0%{         max-width : 170px ;         border-color : chartreuse ;     }     50%{         max-width : 240px ;         border-color : rgb ( 27 , 3 , 243 );     }     100%{         max-width : 300px ;         height : 300px ;         border-color...

Use CSS variable (Transform)  This is CSS variable sheet(transform) /* transform CSS variable  */ .transform {     width : 200px ;     height : 200px ;     background-color : blueviolet ;     margin : 0 auto ;     margin-top : 200px ;     margin-bottom : 200px ;     transition : 3s ; } .transform:hover {     transform : scale ( 1.9 ) rotate ( 360deg ); } .rtd11 {     margin : 0 auto ;     color : white ; } This is HTML sheet     < div class = "transform" >             < h1 class = "rtd11" > Ismail Sardar </ h1 >         </ div >  

Use CSS variable (@media screen)  This is CSS variable sheet(responsible) /* Responsive web design using grid view CSS */ * {     box-sizing : border-box ; } .header-grvu {     background-color : yellowgreen ;     padding : 2% 4% ;     text-align : center ; } .nab-tuve {     background-color : rgb ( 13 , 173 , 168 );     /* padding: 10px; */     /* background-size: 100%; */     /* height: 600px; */     /* display: flex; */     } .nab-tuve   .nav-tu2 a {     padding : 10px ;     display : block ;     /* margin-bottom: 20px; */ } /* .nab-tuve a{     /* flex-direction: row; */     /* text-decoration: none;     color: black; */     /* margin: 10px; */     /* padding: 10px; */     /* background-color: rgba(101, 222, 226, 0.774); */ /* } */ .main-tuve {     background-color : rgb ( ...