Posts

box animation

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 >Landing Page</ title >   </ head >   < body >     < div class =" container ">       < div class =" rectangle "></ div >       < div class =" rectangle "></ div >       < div class =" rectangle "></ div >       < div class =" rectangle "></ div >     </ div >   </ body > </ html > CSS body {   display: flex ;   justify-content: center ;   align-items: end ;   margin: 0 % ;   height: 100 vh ;   overflow: hidden ;   backgroun...

Simple Landing Page

Image
SOURCE CODE: HTML <! DOCTYPE html > < html lang =" en ">   < head >     < meta charset =" UTF-8 " />     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />     < title >Landing Page</ title >     < link rel =" stylesheet " href =" style.css " />   </ head >   < body >     < div class =" main ">< div class =" box ">       < div class =" contain ">         < h1 >NATURE IS LOVE</ h1 >         < p >Adopt the pace of nature         </ p >    < div class =" btn ">     < button >click here</ button ></ div >       </ div >     </ div ></ div >   </ body > </ html > CSS: * {   padding: 0 ;   margin: 0 ; ...

Login page

Image
 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 =" preconnect " href =" https://fonts.googleapis.com " />     < link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin />     < link       href =" https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap "       rel =" stylesheet "     />     < link rel =" stylesheet " href =" style.css " />     < title >Welcome</ title >   </ head >   < body >     < main >       < div class =" login ">  ...

bounce ball simple animation

Image
                         source code     HTML <! DOCTYPE html > < html lang =" en "> < head >     < meta charset =" UTF-8 ">     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 ">     < title >Bounce ball</ title >     < link rel =" stylesheet " href =" style.css ">     </ head > < body > < div class =" main ">     < div class =" box1 box "></ div >     < div class =" box2 box "></ div >     < div class =" box3 box "></ div > </ div ></ body > </ html > CSS . main . box {   height: 100 px ;   width: 100 px ;   border-radius: 50 % ;   margin: 20 px ; } . main {   width: 100 % ;   height: 100 vh ;   display: flex ;   justify-content: center ...

UltraEdit Website Clone

Image
             SOURCE CODE:                                                               HTML <! DOCTYPE html > < html lang =" en ">   < head >     < meta charset =" UTF-8 " />     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />     < title >Download Ultraedit for windos</ title >     < link rel =" stylesheet " href =" style.css " />     < link       rel =" stylesheet "       href =" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css "       integrity =" sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg== "       crossorigin =" anonymou...

Simple navigation bar

Image
  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 >Animation</ title >   </ head >   < body >     < a href =" / ">< span >FaiZan</ span ></ a >     < div class =" nav ">       < ul >         < li >< a href =" / ">Home</ a ></ li >         < li >< a href =" / ">Contact</ a ></ li >         < li >< a href =" / ">Blog</ a ></ li >         < li >< a href =" / ">About Us</ a ></ li >       </ ul > ...