GitHub<\/a><\/p>\n\nSee the Pen Responsive & clean footer design by Christopher Schuck (@mofny) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
If you want to add responsive footer to your website, this snippet of code will come in handy. Designed by Christopher Schuck.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":601,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[692528,30305495],"class_list":["post-91","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-footer","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-responsive-footer-design.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":25614,"url":"https:\/\/codemyui.com\/deal-with-it-meme-with-css\/","url_meta":{"origin":91,"position":0},"title":"Deal With It Meme With CSS","author":"Saijo George","date":"April 20, 2018","format":false,"excerpt":"This snippet shows you how to drop a sunglass on to a face to recreate the deal with it meme using a few images and CSS.\u00a0Robin Rendle recreated the snippet from the footer of CSS-Tricks. If you are having trouble with the pen, try the archived copy on GitHub Drop\u2026","rel":"","context":"In \"deconstruction\"","block_context":{"text":"deconstruction","link":"https:\/\/codemyui.com\/tag\/deconstruction\/"},"img":{"alt_text":"drop sunglasses to face","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/drop-sunglasses-to-face.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/drop-sunglasses-to-face.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/drop-sunglasses-to-face.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/drop-sunglasses-to-face.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":99,"url":"https:\/\/codemyui.com\/image-grid-sorting-using-jade-flexbox\/","url_meta":{"origin":91,"position":1},"title":"Image Grid Sorting Using Jade & Flexbox","author":"Hima Vincent","date":"November 8, 2015","format":false,"excerpt":"If you want to add filtering option to your image grid, this handy snippet using Jade and Flexbox might be just what you are looking for. Designed by Christopher Schuck. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"filter ui\"","block_context":{"text":"filter ui","link":"https:\/\/codemyui.com\/tag\/filter-ui\/"},"img":{"alt_text":"Image Grid Sorting Using Jade & Flexbox","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/image-grid-sorting-using-jade-flexbox.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/image-grid-sorting-using-jade-flexbox.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/image-grid-sorting-using-jade-flexbox.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/image-grid-sorting-using-jade-flexbox.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29638,"url":"https:\/\/codemyui.com\/evaporating-gooey-footer-animation\/","url_meta":{"origin":91,"position":2},"title":"Evaporating Gooey Footer Animation","author":"Saijo George","date":"April 20, 2020","format":false,"excerpt":"Code by: Zed Dash from Codepen If you are having trouble with the pen, try the archived copy on GitHub Lava Lamp Gooey Snippet","rel":"","context":"In \"footer\"","block_context":{"text":"footer","link":"https:\/\/codemyui.com\/tag\/footer\/"},"img":{"alt_text":"Evaporating Gooey Footer Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Evaporating-Gooey-Footer-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Evaporating-Gooey-Footer-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Evaporating-Gooey-Footer-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Evaporating-Gooey-Footer-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":100,"url":"https:\/\/codemyui.com\/pure-css-responsive-card-ui\/","url_meta":{"origin":91,"position":3},"title":"Pure CSS Responsive Card UI","author":"Hima Vincent","date":"November 8, 2015","format":false,"excerpt":"Pure CSS based responsive card UI that you can use in your material design web projects. Designed by Jan Willem Henckel. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"Pure CSS Responsive Card UI","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-responsive-card-ui.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-responsive-card-ui.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-responsive-card-ui.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-responsive-card-ui.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":106,"url":"https:\/\/codemyui.com\/pure-css-responsive-table\/","url_meta":{"origin":91,"position":4},"title":"Pure CSS Responsive Table","author":"Hima Vincent","date":"November 3, 2015","format":false,"excerpt":"Use responsive tables in your website using this code snippet. Designed by Andor Nagy If you are having trouble with the pen, try the archived copy on GitHub.","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Pure CSS Responsive Table","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-responsive-table.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-responsive-table.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-responsive-table.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-responsive-table.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26695,"url":"https:\/\/codemyui.com\/footer-reveal-animation-with-jquery\/","url_meta":{"origin":91,"position":5},"title":"Footer Reveal Animation with jQuery","author":"Saijo George","date":"July 17, 2018","format":false,"excerpt":"With this jQuery script, you can add a footer to your site that reveals the content with a delayed fade-in effect. Designed by Mitchel van Eijgen. If you are having trouble with the pen, try the archived copy on GitHub Footer Reveal Animation Snippet","rel":"","context":"In \"footer\"","block_context":{"text":"footer","link":"https:\/\/codemyui.com\/tag\/footer\/"},"img":{"alt_text":"Footer Reveal Animation with jQuery","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Footer-Reveal-Animation-with-jQuery.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Footer-Reveal-Animation-with-jQuery.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Footer-Reveal-Animation-with-jQuery.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Footer-Reveal-Animation-with-jQuery.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/91\/revisions"}],"predecessor-version":[{"id":26197,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/91\/revisions\/26197"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/601"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=91"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=91"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}