Skip to main content

Posts

Showing posts from August, 2023

Mountains and Truck

  HTML CODE: <! DOCTYPE html > < html >   < head >     < title > Message Box </ title >     < link rel = "stylesheet" href = "css/mountain.css" />   </ head > < div class = "loop-wrapper" >   < div class = "mountain" ></ div >   < div class = "hill" ></ div >   < div class = "tree" ></ div >   < div class = "tree" ></ div >   < div class = "tree" ></ div >   < div class = "rock" ></ div >   < div class = "truck" ></ div >   < div class = "wheels" ></ div > </ div > </ html > CSS CODE: body {     background : #136482 ;     overflow : hidden ;     font-family : 'Open Sans' , sans-serif ;   }   .loop-wrapper {     margin : 0 auto ;     position : relative ;     display : block ...

Crab animation

HTML CODE: <! DOCTYPE html > < html lang = "en" >   < head >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > Crab CSS Animation </ title >     <!-- Stylesheet -->     < link rel = "stylesheet" href = "css/crab.css" />   </ head >   < body >     < div class = "container" >       < div class = "crab" >         < div class = "hand" >           < div class = "claw-1-l" ></ div >           < div class = "claw-1-r" ></ div >           < div class = "claw-2-l" ></ div >           < div class = "claw-2-r" ></ div >         </ div >         < div class = "mouth" ...

Message Box

  HTML CODE: <! DOCTYPE html > < html >   < head >     < title > Message Box </ title >     < link rel = "stylesheet" href = "css/message.css" />   </ head > < div class = "letter-image" >     < div class = "animated-mail" >         < div class = "back-fold" ></ div >         < div class = "letter" >             < div class = "letter-border" ></ div >             < div class = "letter-title" ></ div >             < div class = "letter-context" ></ div >             < div class = "letter-stamp" >                 < div class = "letter-stamp-inner" ></ div >             </ div ...

Animated Typewriter

  HTML CODE: < html > < head >     < title > Type Writer </ title >     < link rel = "stylesheet" href = "css/typewriter1.css" > </ head > < body >     < div class = "typewriter" >         < div class = "slide" >< i ></ i ></ div >         < div class = "paper" ></ div >         < div class = "keyboard" ></ div >     </ div >     <!-- dribbble -->     < a class = "dribbble" href = "https://dribbble.com/shots/8184246-Typewriter"         target = "_blank" >         < img src = "https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg"         alt = "" >     </ a >     </ body > </ h...