Posts

New From Inputs Style Code HTML , CSS

Image
  HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Form </ title >     < link rel = "stylesheet" href = "Form1.css" > </ head > < body > < form action = "" >     < div class = "input-field" >         < input type = "text" id = "name" required />         < label for = "name" > Name: </ label >     </ div >     < div class = "input-field" id = "section" >         < input type = "number" id = "number" required >         < label for = "number" > Number: </ label >     </ div >       < div class = "input-field" id = "section" >   ...

Hover Effect box shadow 25

Image
  BUTTON or BOX Shadow code we write this code in our hover effect and in other things   box-shadow : rgba ( 50 , 50 , 93 , 0.25 ) 0px 30px 60px -12px inset , rgba ( 0 , 0 , 0 , 0.3 ) 0px 18px 36px -18px inset ;

Hamburger Menu Code

Index.html Code <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Humburger Menu </ title >     < link rel = "stylesheet" href = "./style.css" >   < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" integrity = "sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin = "anonymous" /> </ head > < body >         < nav >             < div class = "logo" >< h1 > Deltaty </ h1 ></ div >             < div class = "openMenu" >< i class = "fa fa-bars" ></ i ></ div >             < ul class = "mainMenu" >   ...

Grid Latest Tutorial Code

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < style >         * {             box-sizing : border-box ;             margin : 0px ;             padding : 0px ;         }         .container {             display : grid ;             /* grid-template-columns: 250px 250px 250px;             grid-template-rows: 250px 250px 250px; */             grid-template-columns : 1fr 1fr 1fr ;             grid-template-rows : 100px 1fr 100px ;   ...

Text Underline Hover After Affect

Copy Paste than change class name   .pak2 {     width : max-content ;     font-size : 16px ;     position : relative ;     cursor : pointer ;     font-family : Arial , Helvetica , sans-serif ;     color : #3D626C ;     font-weight : 600 ;     /* margin: 100px auto; */ } .pak2::after {     content : "" ;     position : absolute ;     bottom : -5px ;     height : 2px ;     width : 100% ;     left : 0 ;     background : #3D626C ;     transition : 0.3s ;     transition-timing-function : ease-in-out ;     transform : scaleX ( 0 ); } .pak2:hover::after {     transform : scale ( 1 ); }

After Before in Html Css

<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < link rel = "stylesheet" href = "AfterBefore.css" > </ head > < body >     < div class = "slideleft" >         < p > Slide From Left </ p >     </ div >     < div class = "slideright" >         < p > Slide From right </ p >     </ div >     < div class = "slidetop" >         < p > Slide From top </ p >     </ div >     < div class = "slidebottom" >         < p > Slide From bottom </ p >     </ div >     < div class = ...

Unsplash Pictures auto change HTML HTTP Code

  src = "https://source.unsplash.com/1400x600/?coding"