diff --git a/assets/scripts/congrats/congrats.js b/assets/scripts/congrats/congrats.js new file mode 100644 index 0000000..cc01ff8 --- /dev/null +++ b/assets/scripts/congrats/congrats.js @@ -0,0 +1,23 @@ + +// get canvas from DOM +const canvas = document.querySelector('.congrats__canvas'); + +// create the confetti it return a function +const myConfetti = confetti.create(canvas, { + resize: true, + useWorker: true + }); + +// execute the confetti witha config +let id = setInterval(() => { + myConfetti({ + particleCount: 50, + // particleCount: 1, + // startVelocity: 0, + spread: 160, + origin: { + x: Math.random(), + y: (Math.random() * 1) - 0.2 + }, + }); +}, 1000) diff --git a/assets/styles/pages/congrats/congrats.css b/assets/styles/pages/congrats/congrats.css index 79f65d9..68906b2 100644 --- a/assets/styles/pages/congrats/congrats.css +++ b/assets/styles/pages/congrats/congrats.css @@ -24,3 +24,113 @@ * 5. Otros * Metodología => BEM */ + +h1 { + margin: 0; +} + +.congrats__wrapper { + display: grid; + place-content: center; + width: 100%; + min-width: 320px; + min-height: 100vh; + /* Opcion1 */ + /* background-color: var(--color-secundary-purple); + background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='40' height='40' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(135)'%3E%3Crect width='100%25' height='100%25' fill='rgba(159, 122, 234,1)'/%3E%3Cpath d='m0 10h40v2h-40z' fill='rgba(74, 85, 104,1)' filter='url(%23filter-doodad-1)'/%3E%3C/pattern%3E%3Cfilter id='filter-doodad-1'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='0.2'/%3E%3C/filter%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E "); */ + + /* opcion2 */ + /* background-color: #222831; */ + + background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='40' height='40' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(135)'%3E%3Crect width='100%25' height='100%25' fill='rgba(159, 122, 234,1)'/%3E%3Cpath d='M0 29a 9-9 0 0 0 9-9a 11-11 0 0 1 11-11v2a-9 9 0 0 0-9 9a-11 11 0 0 1-11 11zM0 69a 9-9 0 0 0 9-9a 11-11 0 0 1 11-11v2a-9 9 0 0 0-9 9a-11 11 0 0 1-11 11z' fill='rgba(74, 85, 104,1)' filter='url(%23filter-doodad-1)'/%3E%3Cpath d='M20 29.5a 9.5-9.5 0 0 0 9.5-9.5a 10.5-10.5 0 0 1 10.5-10.5v1a-9.5 9.5 0 0 0-9.5 9.5a-10.5 10.5 0 0 1-10.5 10.5z' fill='rgba(254, 178, 178,1)'/%3E%3C/pattern%3E%3Cfilter id='filter-doodad-1'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='0.2'/%3E%3C/filter%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E "); + + + /* Opcion3 */ + /* background-color: #8287DE; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23f27882' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23bf126c' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23f06184' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23bc0175' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23ea4a8c' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23b7007f' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23e03097' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23b10089' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23cf16a6' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%23a90093' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23b700b7' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%239e009e' points='943 900 1210 900 971 687'/%3E%3C/svg%3E"); + background-attachment: fixed; + background-size: cover; */ +} + +.congrats { + min-width: 300px; + width: 80%; + max-width: 700px; + margin: 0 auto; + text-align: center; + padding: 15px 20px; + border-radius: 10px 50px 10px 10px; + background-color: var(--color-background); + opacity: 0.9; + box-shadow: 8px 8px 2px 2px rgba(0, 0, 0, 0.3); +} + +.congrats__title { + font-family: 'Potta One'; + font-size: 3.2rem; + font-weight: 400; + color: var(--color-black); +} + +.congrats__text { + width: 70%; + margin: 20px auto; + font-size: 1.8rem; + line-height: 2.5rem; + word-break: break-word; +} + +.congrats__btn { + width: 50%; + display: inline-block; + padding: 10px 15px; + position: relative; + z-index: 1; + text-decoration: none; + font-size: 1.8rem; + line-height: 2.7rem; + font-weight: 500; + border-radius: 30px; + border: 2px solid var(--color-black); + color: var(--color-black); + overflow: hidden; + transition: all ease-in 400ms; +} + +.congrats__btn::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + right: 50%; + opacity: 0; + transition: all ease 500ms; + background-color: var(--color-black); + color: var(--color-background); + +} + +.congrats__btn:hover::before { + transition: all ease 500ms; + opacity: 1; + left: 0; + right: 0; + z-index: -1; +} + +.congrats__btn:hover { + color: var(--color-background); +} + +.congrats__canvas { + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + width: 100%; + height: 100vh; + z-index: 2; + pointer-events: none; +} \ No newline at end of file diff --git a/views/pages/congrats.php b/views/pages/congrats.php index c77cac2..ad7aa2c 100644 --- a/views/pages/congrats.php +++ b/views/pages/congrats.php @@ -31,8 +31,20 @@ + - + + + + +
+
+

¡Felicidades!

+

🚀 Pronto tendrás noticias acerca de tu post gracias por compartir lo que sabes 💜

+ Ir al muro +
+
+ \ No newline at end of file