Summary
Keywords
Full Transcript
how to make complete animated responsive food / restaurant website design using html, css, javascript / jquery. create a responsive animated website design from scratch. complete responsive animated food and restaurant website design tutorial for beginners step by step. the main feature of this website are: ✔ responsive sticky header with scroll spy effect. ✔ responsive and animated home section. ✔ responsive about section using flexbox. ✔ responsive menu section using flexbox. ✔ responsive popular / product section with card hover effects using flexbox. ✔ responsive gallery section with image overlay hover effect using flexbox. ✔ responsive contact section using flexbox. ✔ responsive footer section using flexbox. * SOURCE CODES * https://www.buymeacoffee.com/mrwebdesigner/e/140168 images are from freepic and pexels: https://www.freepik.com/ https://www.pexels.com/ popular background image link: https://www.pexels.com/photo/kitchen-knife-on-table-349609/ contact form background image link: https://www.freepik.com/free-photo/wooden-board-empty-table-top-blurred-background_1387629.htm#page=1&query=food%20table&position=0 fonts are from google fonts: roboto : https://fonts.google.com/specimen/Roboto?preview.text_type=custom oswald : https://fonts.google.com/specimen/Oswald?preview.text_type=custom font awesome cdn link: https://cdnjs.com/libraries/font-awesome jquery cdn link: https://cdnjs.com/libraries/jquery aos cdn link: https://cdnjs.com/libraries/aos aos website link: https://michalsnik.github.io/aos/ New To My Channel Subscribe Now And See More Stuff Like This: https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw TimeStamps: 0:00 demo 4:06 file structure 6:10 header / navbar section 13:30 home section 18:31 about section 20:54 menu section 27:46 popular section 32:05 gallery section 35:24 order section 39:39 footer section 44:13 AOS 46:28 scroll spy 47:52 final demo #FrontEnd #FoodWebsite #CompleteWebsite #ResponsiveWebsite #restaurantWebsite #HTML5 #CSS3 #JQUERY #Javascript #WebDevelopment #WebsiteDesign
