Component laden...
Laden
Bedankt! Ik zal
dit project zo snel mogelijk bijwerken.
dit project zo snel mogelijk bijwerken.
Oeps! Er ging iets mis bij het verzenden van het formulier.
Hoe Google-verificatie inschakelen
Facebook-verificatie inschakelen
Spotify verificatie inschakelen
Hoe Dribbble verificatie in te schakelen
Hoe de Github-authenticatie in te schakelen
Hoe LinkedIn verificatie inschakelen
Hoe wachtwoordloze aanmeldingen inschakelen
Hoe wachtwoordvalidatie configureren
Hoe wachtwoord tonen/verbergen
Werken met profielafbeeldingen
Hoe een wachtwoord vergeten-flow toevoegen
Werken met selectievakjes
Hoe prijstabellen configureren
Over het Stripe klantenportaal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5b","type":"Block","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2ab01"],"children":["e2030b8c-58ec-6267-d158-612c008cdb5c"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5c","type":"Block","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2aaff"],"children":["e2030b8c-58ec-6267-d158-612c008cdb5d","3d9a477f-7982-9840-1393-0dac1f48b18d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"yourDiv"},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5d","type":"HtmlEmbed","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2ab07"],"children":[],"v":"<canvas></canvas>","data":{"insideRTE":false,"embed":{"type":"html","meta":{"html":"<canvas></canvas>","div":false,"iframe":false,"script":false,"compilable":false}},"search":{"exclude":true}}},{"_id":"3d9a477f-7982-9840-1393-0dac1f48b18d","type":"Block","tag":"div","classes":["3d0777cd-2feb-32ee-6a08-dbdb5b0bf488"],"children":["9ec09288-fe5d-26d8-0838-a661c6dddd1f","1889e42f-2b8c-7995-9369-90f37d13e602","fe3b6fc6-f1d4-1417-08d7-1ee0726ebec2"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9ec09288-fe5d-26d8-0838-a661c6dddd1f","type":"Heading","tag":"h1","classes":["d5e6ec04-26b1-5827-135e-aa3a86143f84"],"children":["9ec09288-fe5d-26d8-0838-a661c6dddd20"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"9ec09288-fe5d-26d8-0838-a661c6dddd20","text":true,"v":"You've logged out"},{"_id":"1889e42f-2b8c-7995-9369-90f37d13e602","type":"Paragraph","tag":"p","classes":["6d345404-41b4-ce85-4d44-2a3f40f53b96"],"children":["1889e42f-2b8c-7995-9369-90f37d13e603"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"1889e42f-2b8c-7995-9369-90f37d13e603","text":true,"v":"Your session on this device has been logged out. You can log back in anytime."},{"_id":"fe3b6fc6-f1d4-1417-08d7-1ee0726ebec2","type":"Link","tag":"a","classes":["9b295c4b-25f3-b077-1945-44115324d69a"],"children":["fe3b6fc6-f1d4-1417-08d7-1ee0726ebec3"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"#"}}},{"_id":"fe3b6fc6-f1d4-1417-08d7-1ee0726ebec3","text":true,"v":"Log back in"}],"styles":[{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2ab01","fake":false,"type":"class","name":"main-wrapper","namespace":"","comb":"","styleLess":"display: grid; overflow: hidden; width: 100%; height: 100vh; align-items: stretch; grid-auto-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: 1fr; grid-template-rows: 1fr;","variants":{"small":{"styleLess":"width: 100%; grid-template-columns: 100%;"}},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2aaff","fake":false,"type":"class","name":"section_tip","namespace":"","comb":"","styleLess":"position: relative; left: 0%; top: 0%; right: 0%; bottom: 0%; display: flex; justify-content: center; align-items: center;","variants":{"small":{"styleLess":"overflow: auto; align-items: center;"},"tiny":{"styleLess":"overflow: visible;"}},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2ab07","fake":false,"type":"class","name":"matrix-animation_component","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; display: block;","variants":{},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"3d0777cd-2feb-32ee-6a08-dbdb5b0bf488","fake":false,"type":"class","name":"container","namespace":"","comb":"","styleLess":"position: relative; z-index: 10; max-width: 400px; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 18.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 18.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 18.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 18.67%, 1.00); border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: hsla(0, 0.00%, 0.00%, 0.00); box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2); backdrop-filter: blur(5px);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d5e6ec04-26b1-5827-135e-aa3a86143f84","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"6d345404-41b4-ce85-4d44-2a3f40f53b96","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"margin-bottom: 20px; color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 16px; line-height: 1.6; font-weight: 300;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"9b295c4b-25f3-b077-1945-44115324d69a","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"padding-top: 13px; padding-right: 30px; padding-bottom: 13px; padding-left: 30px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: hsla(126, 84.60%, 69.70%, 1.00); color: hsla(0, 0.00%, 0.00%, 1.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Klonen in Webflow
Kopieer component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5b","type":"Block","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2ab01"],"children":["e2030b8c-58ec-6267-d158-612c008cdb5c"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5c","type":"Block","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2aaff"],"children":["e2030b8c-58ec-6267-d158-612c008cdb5d","3d9a477f-7982-9840-1393-0dac1f48b18d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"yourDiv"},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5d","type":"HtmlEmbed","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2ab07"],"children":[],"v":"<canvas></canvas>","data":{"insideRTE":false,"embed":{"type":"html","meta":{"html":"<canvas></canvas>","div":false,"iframe":false,"script":false,"compilable":false}},"search":{"exclude":true}}},{"_id":"3d9a477f-7982-9840-1393-0dac1f48b18d","type":"Block","tag":"div","classes":["3d0777cd-2feb-32ee-6a08-dbdb5b0bf488"],"children":["9ec09288-fe5d-26d8-0838-a661c6dddd1f","1889e42f-2b8c-7995-9369-90f37d13e602","fe3b6fc6-f1d4-1417-08d7-1ee0726ebec2"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9ec09288-fe5d-26d8-0838-a661c6dddd1f","type":"Heading","tag":"h1","classes":["d5e6ec04-26b1-5827-135e-aa3a86143f84"],"children":["9ec09288-fe5d-26d8-0838-a661c6dddd20"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"9ec09288-fe5d-26d8-0838-a661c6dddd20","text":true,"v":"You've logged out"},{"_id":"1889e42f-2b8c-7995-9369-90f37d13e602","type":"Paragraph","tag":"p","classes":["6d345404-41b4-ce85-4d44-2a3f40f53b96"],"children":["1889e42f-2b8c-7995-9369-90f37d13e603"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"1889e42f-2b8c-7995-9369-90f37d13e603","text":true,"v":"Your session on this device has been logged out. You can log back in anytime."},{"_id":"fe3b6fc6-f1d4-1417-08d7-1ee0726ebec2","type":"Link","tag":"a","classes":["9b295c4b-25f3-b077-1945-44115324d69a"],"children":["fe3b6fc6-f1d4-1417-08d7-1ee0726ebec3"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"#"}}},{"_id":"fe3b6fc6-f1d4-1417-08d7-1ee0726ebec3","text":true,"v":"Log back in"}],"styles":[{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2ab01","fake":false,"type":"class","name":"main-wrapper","namespace":"","comb":"","styleLess":"display: grid; overflow: hidden; width: 100%; height: 100vh; align-items: stretch; grid-auto-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: 1fr; grid-template-rows: 1fr;","variants":{"small":{"styleLess":"width: 100%; grid-template-columns: 100%;"}},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2aaff","fake":false,"type":"class","name":"section_tip","namespace":"","comb":"","styleLess":"position: relative; left: 0%; top: 0%; right: 0%; bottom: 0%; display: flex; justify-content: center; align-items: center;","variants":{"small":{"styleLess":"overflow: auto; align-items: center;"},"tiny":{"styleLess":"overflow: visible;"}},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2ab07","fake":false,"type":"class","name":"matrix-animation_component","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; display: block;","variants":{},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"3d0777cd-2feb-32ee-6a08-dbdb5b0bf488","fake":false,"type":"class","name":"container","namespace":"","comb":"","styleLess":"position: relative; z-index: 10; max-width: 400px; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 18.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 18.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 18.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 18.67%, 1.00); border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: hsla(0, 0.00%, 0.00%, 0.00); box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2); backdrop-filter: blur(5px);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d5e6ec04-26b1-5827-135e-aa3a86143f84","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"6d345404-41b4-ce85-4d44-2a3f40f53b96","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"margin-bottom: 20px; color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 16px; line-height: 1.6; font-weight: 300;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"9b295c4b-25f3-b077-1945-44115324d69a","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"padding-top: 13px; padding-right: 30px; padding-bottom: 13px; padding-left: 30px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: hsla(126, 84.60%, 69.70%, 1.00); color: hsla(0, 0.00%, 0.00%, 1.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser niet ondersteund. Gebruik
Chrome of Safari.
Chrome of Safari.
Over dit onderdeel
AI-gegenereerd
Beschrijving van onderdeel (gegenereerd door AI)
The Animated Matrix Logged Out component provides a visually engaging experience for users who have logged out, featuring an animated background and clear messaging.
Belangrijkste kenmerken:
- Full-screen animated background using a canvas element
- Responsive ontwerp geschikt voor verschillende schermformaten
- Clear messaging indicating the user has logged out
- Call-to-action button to log back in
Ontwerpelementen:
- Grid layout for structured content display
- Dark color scheme with white text for high contrast
- Rounded corners and shadow effects for a modern look
- Flexbox alignment for centered content
Potentiële gebruikssituaties:
- Web applications requiring user authentication
- E-commerce sites needing a logout confirmation page
- Social media platforms managing user sessions
- Online services with user accounts
Conclusion: The Animated Matrix Logged Out component is a versatile and visually appealing solution for enhancing user experience during the logout process, making it suitable for various web applications.
Bouwen
Begin met het bouwen van je dromen
Memberstack is 100% gratis totdat u klaar bent om te lanceren - dus waar wacht u nog op? Maak je eerste app en begin vandaag nog.