Banner 9

Banner with a customizable countdown timer. Set your end date in Webflow embed element and the component does the rest of the work.

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"ae348ab9-a0a1-0c77-9fe3-9b665c791e00","type":"Block","tag":"div","classes":["8d7c0322-97af-fb99-5980-9b794376f1a7"],"children":["2ce91dd6-6ae9-8888-fa62-c79025f8dc2a","76dfc5c1-2f58-a75c-c553-0807e8e7b96a"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2ce91dd6-6ae9-8888-fa62-c79025f8dc2a","type":"Block","tag":"div","classes":["0527a821-da87-3ad1-e471-edd9b98d9cd3"],"children":["065e07c8-b6fe-948a-097e-b5532346e71e","d4c6916c-bc7a-6203-1a1a-c16fdc7255b7"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"065e07c8-b6fe-948a-097e-b5532346e71e","type":"Block","tag":"div","classes":["8d7c0322-97af-fb99-5980-9b794376f1a3"],"children":["6997b5ee-f62b-08e1-c7a7-3cddb4b9f86d"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6997b5ee-f62b-08e1-c7a7-3cddb4b9f86d","text":true,"v":"Grand opening coming soon!"},{"_id":"d4c6916c-bc7a-6203-1a1a-c16fdc7255b7","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014f"],"children":["3462e883-719a-652f-aa50-b4ee5ed1a49e","9a2bd08e-6c7b-4d3b-cd55-2e0cee040faa","16991244-6f14-686a-2f59-0beb8ee7cd88","f5d915fc-a91b-7993-33ab-68344f6927b5","6df2e1b9-ffdc-207a-d8a7-903ca48fb9fa","56551265-6ff9-4260-2bca-00dab8e3f832","c4197d53-46c2-dba4-c17b-95d473562b4a"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":"countdown-clock"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"3462e883-719a-652f-aa50-b4ee5ed1a49e","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed0149"],"children":["d28f6e31-4712-79ef-cb76-0273af0e971f","4d5e888f-84e2-ec87-ade7-91113b69e925"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d28f6e31-4712-79ef-cb76-0273af0e971f","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014a"],"children":["be425733-c146-e814-02b0-f3551c786143"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"be425733-c146-e814-02b0-f3551c786143","type":"Span","tag":"span","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014c"],"children":["61643a7a-ff67-6b0f-ca57-a7d1c1ee1e35"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":"days"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"61643a7a-ff67-6b0f-ca57-a7d1c1ee1e35","text":true,"v":"00"},{"_id":"4d5e888f-84e2-ec87-ade7-91113b69e925","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014b"],"children":["d46ded21-d651-8217-0df6-743aabad0bb6"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d46ded21-d651-8217-0df6-743aabad0bb6","text":true,"v":"Days"},{"_id":"9a2bd08e-6c7b-4d3b-cd55-2e0cee040faa","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014d"],"children":["ed6fb470-ee83-a1f3-8d21-9c7806490466"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ed6fb470-ee83-a1f3-8d21-9c7806490466","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed0146"],"children":["32b939dc-8c76-f31d-161a-5f41b6fd6756"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"32b939dc-8c76-f31d-161a-5f41b6fd6756","text":true,"v":":"},{"_id":"16991244-6f14-686a-2f59-0beb8ee7cd88","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed0149"],"children":["89cf924b-7815-db55-b91e-3ffe506a1480","09462475-5a21-9a3b-7802-1427b9ead368"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"89cf924b-7815-db55-b91e-3ffe506a1480","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014a"],"children":["4f0120a3-d473-99a9-4b16-5110f2f3db0b"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4f0120a3-d473-99a9-4b16-5110f2f3db0b","type":"Span","tag":"span","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed0148"],"children":["c9338a88-c920-a5e4-bc81-147afcce8140"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"c9338a88-c920-a5e4-bc81-147afcce8140","text":true,"v":"00"},{"_id":"09462475-5a21-9a3b-7802-1427b9ead368","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014b"],"children":["0ee55883-dba9-e6a4-b498-d4f83d48c7a5"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0ee55883-dba9-e6a4-b498-d4f83d48c7a5","text":true,"v":"Hours"},{"_id":"f5d915fc-a91b-7993-33ab-68344f6927b5","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014d"],"children":["a4ae978a-adf7-cc2f-3e4a-942905401ba2"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a4ae978a-adf7-cc2f-3e4a-942905401ba2","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed0146"],"children":["52ff141d-effd-8241-314a-27b953816bbe"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"52ff141d-effd-8241-314a-27b953816bbe","text":true,"v":":"},{"_id":"6df2e1b9-ffdc-207a-d8a7-903ca48fb9fa","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed0149"],"children":["f3f16e7a-a08e-614c-6a4d-6331f07b26ff","d1129dec-21ca-e08d-9a98-9cca591717dd"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f3f16e7a-a08e-614c-6a4d-6331f07b26ff","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014a"],"children":["6ef9f024-736b-515d-efb6-a015caa4c58a"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6ef9f024-736b-515d-efb6-a015caa4c58a","type":"Span","tag":"span","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014e"],"children":["230607fa-793b-cf1c-a80e-ed88e0f8b124"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"230607fa-793b-cf1c-a80e-ed88e0f8b124","text":true,"v":"00"},{"_id":"d1129dec-21ca-e08d-9a98-9cca591717dd","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014b"],"children":["d88bf569-9a78-c98a-b4ed-56e172246971"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d88bf569-9a78-c98a-b4ed-56e172246971","text":true,"v":"Minutes"},{"_id":"56551265-6ff9-4260-2bca-00dab8e3f832","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014d"],"children":["b77c611e-58d9-2efc-0fc6-b925b58872fd"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b77c611e-58d9-2efc-0fc6-b925b58872fd","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed0146"],"children":["ab5a9026-d173-eb4e-8a46-16d2c002274b"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ab5a9026-d173-eb4e-8a46-16d2c002274b","text":true,"v":":"},{"_id":"c4197d53-46c2-dba4-c17b-95d473562b4a","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed0149"],"children":["d456f3f2-b7a8-5b75-7cd2-35db475daf34","db4b9fb3-2943-4878-4622-238436663a4e"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d456f3f2-b7a8-5b75-7cd2-35db475daf34","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014a"],"children":["ff38023e-28e3-7bc2-5b99-de3767aa0502"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ff38023e-28e3-7bc2-5b99-de3767aa0502","type":"Span","tag":"span","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed0147"],"children":["7d9138de-ff68-84cc-635b-25768bdaed89"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7d9138de-ff68-84cc-635b-25768bdaed89","text":true,"v":"00"},{"_id":"db4b9fb3-2943-4878-4622-238436663a4e","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014b"],"children":["4d58e687-8679-030e-96c2-f208886cf35d"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4d58e687-8679-030e-96c2-f208886cf35d","text":true,"v":"Seconds"},{"_id":"76dfc5c1-2f58-a75c-c553-0807e8e7b96a","type":"HtmlEmbed","tag":"div","classes":["a8cb8461-0290-81db-57a9-73e47a42edef"],"children":[],"v":"<script>\n// Change this date to update when the countdown will be at zero\nconst eventendtime = 'October 02 2024 00:00:00 GMT-0400';\n\nfunction timeRemaining(endtime) {\n const total = Date.parse(endtime) - Date.parse(new Date());\n const seconds = Math.floor((total/1000) % 60);\n const minutes = Math.floor((total/1000/60) % 60);\n const hours = Math.floor((total/1000/60/60) % 24);\n const days = Math.floor((total/1000/60/60/24));\n return {\n total, days, hours, minutes, seconds\n };\n}\n\nfunction initializeClock(id, endtime) {\n const clock = document.getElementById(id);\n const daysElement = clock.querySelector('.days');\n const hoursElement = clock.querySelector('.hours');\n const minutesElement = clock.querySelector('.minutes');\n const secondsElement = clock.querySelector('.seconds');\n function updateClock() {\n const t = timeRemaining(endtime);\n daysElement.innerHTML = t.days;\n hoursElement.innerHTML = ('0' + t.hours).slice(-2);\n minutesElement.innerHTML = ('0' + t.minutes).slice(-2);\n secondsElement.innerHTML = ('0' + t.seconds).slice(-2);\n if (t.total <= 0) {\n clearInterval(time_interval);\n }\n }\n updateClock();\n var time_interval = setInterval(updateClock,1000);\n}\n\ninitializeClock('countdown-clock', eventendtime);\n\n</script>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<script>\n// Change this date to update when the countdown will be at zero\nconst eventendtime = 'October 02 2024 00:00:00 GMT-0400';\n\nfunction timeRemaining(endtime) {\n const total = Date.parse(endtime) - Date.parse(new Date());\n const seconds = Math.floor((total/1000) % 60);\n const minutes = Math.floor((total/1000/60) % 60);\n const hours = Math.floor((total/1000/60/60) % 24);\n const days = Math.floor((total/1000/60/60/24));\n return {\n total, days, hours, minutes, seconds\n };\n}\n\nfunction initializeClock(id, endtime) {\n const clock = document.getElementById(id);\n const daysElement = clock.querySelector('.days');\n const hoursElement = clock.querySelector('.hours');\n const minutesElement = clock.querySelector('.minutes');\n const secondsElement = clock.querySelector('.seconds');\n function updateClock() {\n const t = timeRemaining(endtime);\n daysElement.innerHTML = t.days;\n hoursElement.innerHTML = ('0' + t.hours).slice(-2);\n minutesElement.innerHTML = ('0' + t.minutes).slice(-2);\n secondsElement.innerHTML = ('0' + t.seconds).slice(-2);\n if (t.total <= 0) {\n clearInterval(time_interval);\n }\n }\n updateClock();\n var time_interval = setInterval(updateClock,1000);\n}\n\ninitializeClock('countdown-clock', eventendtime);\n\n</script>","div":false,"script":true,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}}],"styles":[{"_id":"8d7c0322-97af-fb99-5980-9b794376f1a7","fake":false,"type":"class","name":"banner-9","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1rem; padding-left: 2rem; flex-direction: column; justify-content: center; flex-wrap: nowrap; align-items: center; grid-column-gap: 0.25rem; grid-row-gap: 0.25rem; background-color: #e3eaf4;","variants":{"small":{"styleLess":"flex-direction: column; flex-wrap: nowrap; text-align: center;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed014d","fake":false,"type":"class","name":"countdown_divider","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"0527a821-da87-3ad1-e471-edd9b98d9cd3","fake":false,"type":"class","name":"banner-9_content","namespace":"","comb":"","styleLess":"display: flex; max-width: 100%; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; align-items: center; grid-column-gap: 0.5rem; grid-row-gap: 0.5rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed014e","fake":false,"type":"class","name":"minutes","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"a8cb8461-0290-81db-57a9-73e47a42edef","fake":false,"type":"class","name":"CODE: Countdown Timer","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"8d7c0322-97af-fb99-5980-9b794376f1a3","fake":false,"type":"class","name":"banner-9_text","namespace":"","comb":"","styleLess":"font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed0149","fake":false,"type":"class","name":"countdown_days","namespace":"","comb":"","styleLess":"text-align: center;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed014f","fake":false,"type":"class","name":"countdown","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center; grid-column-gap: 0.75em; grid-row-gap: 0.75em; color: #0f1929;","variants":{"tiny":{"styleLess":"grid-column-gap: 0.25em;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed0148","fake":false,"type":"class","name":"hours","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed014c","fake":false,"type":"class","name":"days","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed014a","fake":false,"type":"class","name":"countdown_number","namespace":"","comb":"","styleLess":"min-width: 3rem; font-size: 2rem; font-weight: 700;","variants":{"small":{"styleLess":"font-size: 1.5rem;"},"tiny":{"styleLess":""}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed0146","fake":false,"type":"class","name":"countdown_colon","namespace":"","comb":"","styleLess":"font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed0147","fake":false,"type":"class","name":"seconds","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed014b","fake":false,"type":"class","name":"countdown_label","namespace":"","comb":"","styleLess":"font-size: 0.875rem; font-weight: 700;","variants":{"tiny":{"styleLess":"font-size: 0.75rem;"},"small":{"styleLess":"font-size: 0.75rem;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from
Piixel Media