Skip to main content

Posts

JavaScript Text Animation

Download Source Code From Here: Click To Download
Recent posts

UI Card Design Using Only HTML and CSS

\ <! DOCTYPE   html > < html   lang = "en" > < head >     < meta   charset = "UTF-8" >     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >     < meta   http-equiv = "X-UA-Compatible"   content = "ie=edge" >     < title >UI CARD DESIGN</ title >     < link   rel = "stylesheet"   href = "style.css" > </ head > < body >     < div   class = "box" >         < div   class = "text" >             < h2 >Gaming Mouse</ h2 >             < p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident  tenetur necessitatibus veniam? Repudiandae in consequatur fuga eaque culpa veniam  perferendis!</ p >             < div   class = "pricing" >                 < span   class = "price" >$70</ span >                 < button

Amazing 404 Error Page Using HTML & CSS

  Video: Source Code: <! DOCTYPE   html > < html   lang = "en" > < head >     < meta   charset = "UTF-8" >     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >     < meta   http-equiv = "X-UA-Compatible"   content = "ie=edge" >     < title >Error! 404</ title > </ head > <style> * {     margin:  0 ;     padding:  0 ;     font-family: Nunito;     box-sizing:  border-box ; } body {     background:  linear-gradient (to  right ,  #48dbfb ,  #1dd1a1 );     display:  flex ;     align-items:  center ;     justify-content:  center ;     min-height:  100 vh ; } .box {     width:  40 % ;     background:  #0abde3 ;     padding:  50 px ;     text-align:  center ;     color:  #ffffff ;     border-radius:  8 px ;      box-shadow:  0   19 px   38 px   rgba ( 0 ,  0 ,  0 ,  .3 ),  0   15 px   12 px   rgba ( 0 ,  0 ,  0 ,  .22 ); } .box   h1 {     margi

Popup Modal Using Html, CSS and JavaScript

Video: Source Code: //HTML <! DOCTYPE   html > < html   lang = "en" > < head >     < meta   charset = "UTF-8" >     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >     < meta   http-equiv = "X-UA-Compatible"   content = "ie=edge" >     < link   rel = "stylesheet"   href = "style.css" >     < title >Javascript Popup Modal</ title > </ head > < body >     < button   onclick = " pop () "   class = "btn" >Click Me!</ button >     < div   id = "box"   class = "box" >         < span   onclick = " hide () " > &times; </ span >         < h2 >Javascript Popup Modal</ h2 >         < p >             Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, expedita! Laudantium tempora voluptate fuga, vero omnis numqu

Login Form With Animated Placeholders Using Html & CSS

  Video: Source Code: <! DOCTYPE   html > < html   lang = "en" > < head >     < meta   charset = "UTF-8" >     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >     < title >Login</ title > </ head > <style> * {     margin:  0 ;     padding:  0 ;     font-family:  Century  Gothic;     box-sizing:  border-box ; } body {     height:  100 vh ;     display:  flex ;     align-items:  center ;     justify-content:  center ;     flex-direction:  column ;     background:  -webkit-linear-gradient ( right ,  #7579ff ,  #b224ef ); } .parent   h2 {     color:  #ffffff ;     font-weight:  500 ;     margin-bottom:  40 px ;     padding-bottom:  5 px ;     width:  40 % ;     border-bottom:  1 px   solid   #ffffff ; } .main_u {     padding-bottom:  40 px ; } .user_div {     height:  50 px ;     width:  250 px ;     position:  relative ;     background:  none ; } .user_div   label

Pure CSS Hamburger Menu | Side Bar Menu

Video:  Source Code: HTML <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < meta   http-equiv = "X-UA-Compatible"   content = "ie=edge" >      < link   rel = "stylesheet"   href = "style.css" >      < title > Hamburger Menu </ title > </ head > < body >      < input   type = "checkbox"   name = ""   id = "check" >      < label   class = "ham_menu"   for = "check" > &#9776; </ label >      < div   class = "main" >          < label   for = "check" > &times; </ label >          < h1 > Menu </ h1 >          < ul >              < li >< a   href = "#" > Home </ a >

Image Grid Gallery Using CSS3

  Video:  Images: Source Code: HTML: <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < link   rel = "stylesheet"   href = "style.css" >      < title > CSS Image Grid Gallery </ title > </ head > < body >      < main >          < div   class = "box1" >   </ div >          < div   class = "box2" >   </ div >          < div   class = "box3" >   </ div >          < div   class = "box4" >   </ div >          < div   class = "box5" >   </ div >          < div   class = "box6" >   </ div >      </ main > </ body > </ html > CSS: * {      margin :  0 ;      padding :  0 ;      box-sizing : border