diff --git a/Buy Me A Coffee/.gitignore b/Buy Me A Coffee/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/Buy Me A Coffee/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/Buy Me A Coffee/README.md b/Buy Me A Coffee/README.md new file mode 100644 index 0000000..65f9ce6 --- /dev/null +++ b/Buy Me A Coffee/README.md @@ -0,0 +1,36 @@ + +# Buy me a Coffee +Buy Me a Coffee" is a platform that allows creators, such as artists, writers, musicians, and other content creators, to receive support and donations from their fans and followers. The platform provides a simple and user-friendly way for creators to set up a page where their audience can contribute money as a gesture of appreciation for their work. + +Here are some key features and aspects of Buy Me a Coffee: + +Support for Creators: Buy Me a Coffee is designed to help creators receive financial support directly from their audience. Instead of asking for a one-time payment, supporters can "buy a coffee" for their favorite creators, with each "coffee" representing a small monetary contribution. + +Creator Pages: Creators can create personalized pages on Buy Me a Coffee where they can showcase their work, share updates, and interact with their supporters. + +Integration with Social Media: The platform often integrates with social media platforms, allowing creators to share their Buy Me a Coffee page easily and connect with their audience. + +Flexible Payments: Supporters can make contributions through various payment methods, making it convenient for people to support their favorite creators. + +Membership and Subscriptions: Buy Me a Coffee may offer features for creators to set up recurring support through memberships or subscriptions, allowing them to receive ongoing support from their fans. + +No Platform Fees: In the past, Buy Me a Coffee was known for not charging platform fees on the donations creators receive, meaning that creators could keep a larger portion of the money sent by their supporters. However, it's advisable to check the latest terms and conditions, as platforms may update their policies over time. + +## Tech Stack + +**Client:** HTML, CSS, JAVASCRIPT, ANIMATE CSS + +## Screenshots + + + + +## Authors + +- [@Shu12388y](https://www.github.com/Shu12388y) + + +## License + +[MIT](https://choosealicense.com/licenses/mit/) + diff --git a/Buy Me A Coffee/index.html b/Buy Me A Coffee/index.html new file mode 100644 index 0000000..61fc451 --- /dev/null +++ b/Buy Me A Coffee/index.html @@ -0,0 +1,336 @@ + + + + + + + Buy Me a Coffee + + + + + + + +
+ +
+
+
+

+ A supporter is worth a
+ thousand followers. +

+

+ Accept donations. Start a membership. Sell anything you like.
+ It’s easier than you think +

+
+
+ buymeacoffee.com/ + +
+ +
+
+ It’s free, and takes less than a minute. +
+
+
+

DONATIONS

+

+ Give your audience an easy way to say thanks. +

+

+ Buy Me a Coffee makes supporting fun and easy. In just a couple of + taps, your fans can make the payment (buy you a coffee) and leave a + message. They don’t even have to create an account! +

+
+ +
+

MEMBERSHIPS

+

+ Monthly membership for your biggest fans. +

+

+ Earn a recurring income by accepting monthly or yearly membership. + Share exclusive content, or just give them a way to support your work + on an ongoing basis. +

+
+ +
+

EXTRAS

+

+ Introducing Extras, the creative way to sell. +

+

+ The things you’d like to sell probably do not belong in a Shopify + store. Extras is designed from the ground up with creators in mind. + Whether it’s a 1-1 Zoom call, art commissions, or an ebook, Extras is + for you. +

+
+ +
+
+
+
+

+ Designed for + creators, + + + + + + + + + not for businesses. +

+
+
+
+ + + + + + + + + +
+
+ We don't call them "customers" or transactions. They are your + supporters. +
+
+ + + + +
+
+ You get paid instantly to your bank account. + No more 30-day delays. +
+
+ + + + +
+
+ You have 100% ownership of your supporters. We never email + them, and you can export the list any time you like. +
+ +
+ + + + +
+
+ You get to talk to a human for help, or if you just like + some advice to hit the ground running. +
+ +
+ It’s free, and takes less than a minute. +
+
+
+ +
+ + diff --git a/Buy Me A Coffee/main.js b/Buy Me A Coffee/main.js new file mode 100644 index 0000000..a58c8b9 --- /dev/null +++ b/Buy Me A Coffee/main.js @@ -0,0 +1,44 @@ +const app = document.querySelector("#apps"); + +app.addEventListener("click", function () { + const appData = document.querySelector(".app__data"); + appData.classList.toggle("app__data__active"); +}); + +let lastKnownScrollPosition = 0; +let ticking = false; + +function doSomething(scrollPos) { + // Do something with the scroll position + if (window.scrollY > 300) { + const img1 = document.querySelector("#img__1"); + img1.classList.remove("hide"); + img1.classList.add("animate__animated", "animate__backInLeft"); + } + + if (window.scrollY > 900) { + const donationdiv = document.querySelector(".donation_1"); + donationdiv.classList.add("animate__animated", "animate__backInRight"); + + donationdiv.classList.remove("hide"); + } + if (window.scrollY > 1700) { + const lower = document.querySelector(".donation_2"); + lower.classList.add("animate__animated", "animate__fadeInBottomRight"); + lower.classList.remove("hide"); + } +} + +document.addEventListener("scroll", (event) => { + lastKnownScrollPosition = window.scrollY; + + if (!ticking) { + window.requestAnimationFrame(() => { + doSomething(lastKnownScrollPosition); + ticking = false; + }); + + ticking = true; + // console.log(lastKnownScrollPosition); + } +}); diff --git a/Buy Me A Coffee/package-lock.json b/Buy Me A Coffee/package-lock.json new file mode 100644 index 0000000..0b4efd2 --- /dev/null +++ b/Buy Me A Coffee/package-lock.json @@ -0,0 +1,749 @@ +{ + "name": "buy-me-a-coffee", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "buy-me-a-coffee", + "version": "0.0.0", + "devDependencies": { + "vite": "^5.0.8" + } + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.10.tgz", + "integrity": "sha512-Q+mk96KJ+FZ30h9fsJl+67IjNJm3x2eX+GBWGmocAKgzp27cowCOOqSdscX80s0SpdFXZnIv/+1xD1EctFx96Q==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.10.tgz", + "integrity": "sha512-7W0bK7qfkw1fc2viBfrtAEkDKHatYfHzr/jKAHNr9BvkYDXPcC6bodtm8AyLJNNuqClLNaeTLuwURt4PRT9d7w==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.10.tgz", + "integrity": "sha512-1X4CClKhDgC3by7k8aOWZeBXQX8dHT5QAMCAQDArCLaYfkppoARvh0fit3X2Qs+MXDngKcHv6XXyQCpY0hkK1Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.10.tgz", + "integrity": "sha512-O/nO/g+/7NlitUxETkUv/IvADKuZXyH4BHf/g/7laqKC4i/7whLpB0gvpPc2zpF0q9Q6FXS3TS75QHac9MvVWw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.10.tgz", + "integrity": "sha512-YSRRs2zOpwypck+6GL3wGXx2gNP7DXzetmo5pHXLrY/VIMsS59yKfjPizQ4lLt5vEI80M41gjm2BxrGZ5U+VMA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.10.tgz", + "integrity": "sha512-alfGtT+IEICKtNE54hbvPg13xGBe4GkVxyGWtzr+yHO7HIiRJppPDhOKq3zstTcVf8msXb/t4eavW3jCDpMSmA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.10.tgz", + "integrity": "sha512-dMtk1wc7FSH8CCkE854GyGuNKCewlh+7heYP/sclpOG6Cectzk14qdUIY5CrKDbkA/OczXq9WesqnPl09mj5dg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.10.tgz", + "integrity": "sha512-G5UPPspryHu1T3uX8WiOEUa6q6OlQh6gNl4CO4Iw5PS+Kg5bVggVFehzXBJY6X6RSOMS8iXDv2330VzaObm4Ag==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.10.tgz", + "integrity": "sha512-j6gUW5aAaPgD416Hk9FHxn27On28H4eVI9rJ4az7oCGTFW48+LcgNDBN+9f8rKZz7EEowo889CPKyeaD0iw9Kg==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.10.tgz", + "integrity": "sha512-QxaouHWZ+2KWEj7cGJmvTIHVALfhpGxo3WLmlYfJ+dA5fJB6lDEIg+oe/0//FuyVHuS3l79/wyBxbHr0NgtxJQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.10.tgz", + "integrity": "sha512-4ub1YwXxYjj9h1UIZs2hYbnTZBtenPw5NfXCRgEkGb0b6OJ2gpkMvDqRDYIDRjRdWSe/TBiZltm3Y3Q8SN1xNg==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.10.tgz", + "integrity": "sha512-lo3I9k+mbEKoxtoIbM0yC/MZ1i2wM0cIeOejlVdZ3D86LAcFXFRdeuZmh91QJvUTW51bOK5W2BznGNIl4+mDaA==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.10.tgz", + "integrity": "sha512-J4gH3zhHNbdZN0Bcr1QUGVNkHTdpijgx5VMxeetSk6ntdt+vR1DqGmHxQYHRmNb77tP6GVvD+K0NyO4xjd7y4A==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.10.tgz", + "integrity": "sha512-tgT/7u+QhV6ge8wFMzaklOY7KqiyitgT1AUHMApau32ZlvTB/+efeCtMk4eXS+uEymYK249JsoiklZN64xt6oQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.10.tgz", + "integrity": "sha512-0f/spw0PfBMZBNqtKe5FLzBDGo0SKZKvMl5PHYQr3+eiSscfJ96XEknCe+JoOayybWUFQbcJTrk946i3j9uYZA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.10.tgz", + "integrity": "sha512-pZFe0OeskMHzHa9U38g+z8Yx5FNCLFtUnJtQMpwhS+r4S566aK2ci3t4NCP4tjt6d5j5uo4h7tExZMjeKoehAA==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.10.tgz", + "integrity": "sha512-SpYNEqg/6pZYoc+1zLCjVOYvxfZVZj6w0KROZ3Fje/QrM3nfvT2llI+wmKSrWuX6wmZeTapbarvuNNK/qepSgA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.10.tgz", + "integrity": "sha512-ACbZ0vXy9zksNArWlk2c38NdKg25+L9pr/mVaj9SUq6lHZu/35nx2xnQVRGLrC1KKQqJKRIB0q8GspiHI3J80Q==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.10.tgz", + "integrity": "sha512-PxcgvjdSjtgPMiPQrM3pwSaG4kGphP+bLSb+cihuP0LYdZv1epbAIecHVl5sD3npkfYBZ0ZnOjR878I7MdJDFg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.10.tgz", + "integrity": "sha512-ZkIOtrRL8SEJjr+VHjmW0znkPs+oJXhlJbNwfI37rvgeMtk3sxOQevXPXjmAPZPigVTncvFqLMd+uV0IBSEzqA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.10.tgz", + "integrity": "sha512-+Sa4oTDbpBfGpl3Hn3XiUe4f8TU2JF7aX8cOfqFYMMjXp6ma6NJDztl5FDG8Ezx0OjwGikIHw+iA54YLDNNVfw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.10.tgz", + "integrity": "sha512-EOGVLK1oWMBXgfttJdPHDTiivYSjX6jDNaATeNOaCOFEVcfMjtbx7WVQwPSE1eIfCp/CaSF2nSrDtzc4I9f8TQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.10.tgz", + "integrity": "sha512-whqLG6Sc70AbU73fFYvuYzaE4MNMBIlR1Y/IrUeOXFrWHxBEjjbZaQ3IXIQS8wJdAzue2GwYZCjOrgrU1oUHoA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.1.tgz", + "integrity": "sha512-6vMdBZqtq1dVQ4CWdhFwhKZL6E4L1dV6jUjuBvsavvNJSppzi6dLBbuV+3+IyUREaj9ZFvQefnQm28v4OCXlig==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.1.tgz", + "integrity": "sha512-Jto9Fl3YQ9OLsTDWtLFPtaIMSL2kwGyGoVCmPC8Gxvym9TCZm4Sie+cVeblPO66YZsYH8MhBKDMGZ2NDxuk/XQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.1.tgz", + "integrity": "sha512-LtYcLNM+bhsaKAIGwVkh5IOWhaZhjTfNOkGzGqdHvhiCUVuJDalvDxEdSnhFzAn+g23wgsycmZk1vbnaibZwwA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.1.tgz", + "integrity": "sha512-KyP/byeXu9V+etKO6Lw3E4tW4QdcnzDG/ake031mg42lob5tN+5qfr+lkcT/SGZaH2PdW4Z1NX9GHEkZ8xV7og==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.1.tgz", + "integrity": "sha512-Yqz/Doumf3QTKplwGNrCHe/B2p9xqDghBZSlAY0/hU6ikuDVQuOUIpDP/YcmoT+447tsZTmirmjgG3znvSCR0Q==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.1.tgz", + "integrity": "sha512-u3XkZVvxcvlAOlQJ3UsD1rFvLWqu4Ef/Ggl40WAVCuogf4S1nJPHh5RTgqYFpCOvuGJ7H5yGHabjFKEZGExk5Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.1.tgz", + "integrity": "sha512-0XSYN/rfWShW+i+qjZ0phc6vZ7UWI8XWNz4E/l+6edFt+FxoEghrJHjX1EY/kcUGCnZzYYRCl31SNdfOi450Aw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.1.tgz", + "integrity": "sha512-LmYIO65oZVfFt9t6cpYkbC4d5lKHLYv5B4CSHRpnANq0VZUQXGcCPXHzbCXCz4RQnx7jvlYB1ISVNCE/omz5cw==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.1.tgz", + "integrity": "sha512-kr8rEPQ6ns/Lmr/hiw8sEVj9aa07gh1/tQF2Y5HrNCCEPiCBGnBUt9tVusrcBBiJfIt1yNaXN6r1CCmpbFEDpg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.1.tgz", + "integrity": "sha512-t4QSR7gN+OEZLG0MiCgPqMWZGwmeHhsM4AkegJ0Kiy6TnJ9vZ8dEIwHw1LcZKhbHxTY32hp9eVCMdR3/I8MGRw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.1.tgz", + "integrity": "sha512-7XI4ZCBN34cb+BH557FJPmh0kmNz2c25SCQeT9OiFWEgf8+dL6ZwJ8f9RnUIit+j01u07Yvrsuu1rZGxJCc51g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.1.tgz", + "integrity": "sha512-yE5c2j1lSWOH5jp+Q0qNL3Mdhr8WuqCNVjc6BxbVfS5cAS6zRmdiw7ktb8GNpDCEUJphILY6KACoFoRtKoqNQg==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.1.tgz", + "integrity": "sha512-PyJsSsafjmIhVgaI1Zdj7m8BB8mMckFah/xbpplObyHfiXzKcI5UOUXRyOdHW7nz4DpMCuzLnF7v5IWHenCwYA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/esbuild": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.10.tgz", + "integrity": "sha512-S1Y27QGt/snkNYrRcswgRFqZjaTG5a5xM3EQo97uNBnH505pdzSNe/HLBq1v0RO7iK/ngdbhJB6mDAp0OK+iUA==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.19.10", + "@esbuild/android-arm": "0.19.10", + "@esbuild/android-arm64": "0.19.10", + "@esbuild/android-x64": "0.19.10", + "@esbuild/darwin-arm64": "0.19.10", + "@esbuild/darwin-x64": "0.19.10", + "@esbuild/freebsd-arm64": "0.19.10", + "@esbuild/freebsd-x64": "0.19.10", + "@esbuild/linux-arm": "0.19.10", + "@esbuild/linux-arm64": "0.19.10", + "@esbuild/linux-ia32": "0.19.10", + "@esbuild/linux-loong64": "0.19.10", + "@esbuild/linux-mips64el": "0.19.10", + "@esbuild/linux-ppc64": "0.19.10", + "@esbuild/linux-riscv64": "0.19.10", + "@esbuild/linux-s390x": "0.19.10", + "@esbuild/linux-x64": "0.19.10", + "@esbuild/netbsd-x64": "0.19.10", + "@esbuild/openbsd-x64": "0.19.10", + "@esbuild/sunos-x64": "0.19.10", + "@esbuild/win32-arm64": "0.19.10", + "@esbuild/win32-ia32": "0.19.10", + "@esbuild/win32-x64": "0.19.10" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/postcss": { + "version": "8.4.32", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz", + "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/rollup": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.1.tgz", + "integrity": "sha512-pgPO9DWzLoW/vIhlSoDByCzcpX92bKEorbgXuZrqxByte3JFk2xSW2JEeAcyLc9Ru9pqcNNW+Ob7ntsk2oT/Xw==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.9.1", + "@rollup/rollup-android-arm64": "4.9.1", + "@rollup/rollup-darwin-arm64": "4.9.1", + "@rollup/rollup-darwin-x64": "4.9.1", + "@rollup/rollup-linux-arm-gnueabihf": "4.9.1", + "@rollup/rollup-linux-arm64-gnu": "4.9.1", + "@rollup/rollup-linux-arm64-musl": "4.9.1", + "@rollup/rollup-linux-riscv64-gnu": "4.9.1", + "@rollup/rollup-linux-x64-gnu": "4.9.1", + "@rollup/rollup-linux-x64-musl": "4.9.1", + "@rollup/rollup-win32-arm64-msvc": "4.9.1", + "@rollup/rollup-win32-ia32-msvc": "4.9.1", + "@rollup/rollup-win32-x64-msvc": "4.9.1", + "fsevents": "~2.3.2" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/vite": { + "version": "5.0.10", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz", + "integrity": "sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==", + "dev": true, + "dependencies": { + "esbuild": "^0.19.3", + "postcss": "^8.4.32", + "rollup": "^4.2.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || >=20.0.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + } + } +} diff --git a/Buy Me A Coffee/package.json b/Buy Me A Coffee/package.json new file mode 100644 index 0000000..9bf4117 --- /dev/null +++ b/Buy Me A Coffee/package.json @@ -0,0 +1,14 @@ +{ + "name": "buy-me-a-coffee", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "vite": "^5.0.8" + } +} diff --git a/Buy Me A Coffee/pages/about.css b/Buy Me A Coffee/pages/about.css new file mode 100644 index 0000000..0a3eba7 --- /dev/null +++ b/Buy Me A Coffee/pages/about.css @@ -0,0 +1,601 @@ +html, +body { + padding: 0%; + margin: 0%; + overflow-x: hidden; +} + +.icon__logo { + width: 2rem; + max-height: 3rem; +} +header { + background-color: #fffce6; +} + +nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + padding-bottom: 1rem; +} +.nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 37rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 50vw; + margin-top: 1rem; + box-shadow: 0px 0px 30px 0px lightgrey; +} +a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; +} +.faq, +.creator { + position: relative; +} +.faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -80%; + opacity: 0; + top: -50%; + z-index: 9; + /* transition: all ease-in 400ms; */ +} +.faq:hover::after { + opacity: 0.3; +} + +.left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; +} + +.right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ +} + +.login { + position: relative; + width: 3rem; +} +.login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ +} + +.login:hover::after { + opacity: 0.3; +} +.signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4rem; + outline: none; + /* margin-left: 2rem; */ +} +.signup:hover { + border: 1px #ffdd00 solid; +} +.header { + background-color: #fffce6; + padding: 1rem; +} +.header__data { + font-size: 3rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-weight: 500; + text-align: center; +} +.logo__flex { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; + padding-bottom: 2rem; +} +svg { + width: 6rem; + max-height: 10rem; +} +.content { + padding: 1rem; +} +.about > img { + object-fit: cover; + width: 70rem; + /* padding: -4rem; */ + padding: 1rem 24rem; + margin-left: -2rem; + background-position: center; + max-height: 70rem; +} +.inner__lower { + display: flex; + align-items: center; + justify-content: space-evenly; + gap: 1rem; +} +.lower { + padding: 1rem; + box-shadow: 0px 0px 8px 0px lightgrey; +} +.data { + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: column; + gap: 1rem; +} +span { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-weight: 600; + font-size: 4rem; +} +.contents { + padding: 1rem 24rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 1.5rem; +} +.second, +.third, +.sign__name { + padding-top: 2rem; +} +.sign__svg { + margin-left: 23rem; +} + +.lower { + width: 30rem; + margin-left: 40rem; +} + +.footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; +} +.footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; +} +.right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} +.app__data { + display: none; +} +.app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 49%; + + background-color: white; + padding: 1rem; +} +.sign__svg > svg { + width: 15rem; + max-height: 8rem; + padding-bottom: 3rem; +} + +/* =========================================================================== */ + +@media screen and (min-width: 300px) and (max-width: 480px) { + .icon__logo { + width: 2rem; + max-height: 3rem; + } + header { + background-color: #fffce6; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + padding-bottom: 1rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 7rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 100vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -80%; + opacity: 0; + top: -50%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4rem; + outline: none; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header { + background-color: #fffce6; + padding: 1rem; + } + .header__data { + font-size: 2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-weight: 500; + } + .logo__flex { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; + padding-bottom: 2rem; + } + svg { + width: 6rem; + max-height: 10rem; + } + .content { + padding: 1rem; + } + .about > img { + object-fit: fill; + width: 30rem; + /* padding: -4rem; */ + padding: 1rem 11rem; + margin-left: -2rem; + background-position: center; + max-height: 30rem; + } + .sign__svg { + margin-left: 0rem; + } + .inner__lower { + display: flex; + align-items: center; + justify-content: space-evenly; + gap: 1rem; + } + .lower { + padding: 1rem; + box-shadow: 0px 0px 20px 0px lightgrey; + width: 20rem; + margin-left: 0rem; + } + .data { + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: column; + gap: 1rem; + } + span { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-weight: 600; + font-size: 4rem; + } + .contents { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + } + .second, + .third, + .sign__name { + padding-top: 2rem; + } + + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 49%; + + background-color: white; + padding: 1rem; + } + .sign__svg > svg { + width: 15rem; + max-height: 8rem; + padding-bottom: 3rem; + } +} + +@media screen and (min-width: 481px) and (max-width: 780px) { + .nav__bar { + gap: 18rem; + width: 100vw; + } + .header__data { + text-align: left; + font-size: 2.7rem; + } + .about { + padding: 2rem; + } + .about > img { + width: 32rem; + max-height: 40rem; + object-fit: cover; + /* min-height: 30rem; */ + padding: 0%; + } + .contents { + padding: 1rem; + } + .sign__svg { + margin-left: 0rem; + } + .lower { + margin-left: 6rem; + width: 20rem; + } +} + +@media screen and (min-width: 781px) and (max-width: 950px) { + .nav__bar { + gap: 32rem; + width: 100vw; + } + + .header__data { + text-align: left; + font-size: 2.8rem; + } + .about > img { + padding: 1rem; + width: 50rem; + min-height: 20rem; + } + .about { + padding: 1rem; + } + .contents { + padding: 2rem; + } + .sign__svg { + margin-left: 0rem; + } + .lower { + width: 30rem; + margin-left: 10rem; + } +} + +@media screen and (min-width: 951px) and (max-width: 1080px) { + .nav__bar { + gap: 42rem; + width: 100vw; + } + + .header__data { + text-align: center; + font-size: 2.8rem; + } + .about > img { + padding: 1rem; + width: 60rem; + max-height: 50rem; + /* min-height: 20rem; */ + } + .about { + padding: 2rem; + } + .contents { + padding: 2rem; + } + .sign__svg { + margin-left: 0rem; + } + .lower { + width: 30rem; + margin-left: 16rem; + } +} + +@media screen and (min-width: 1081px) and (max-width: 1300px) { + .about > img { + padding: 1rem; + width: 77rem; + max-height: 50rem; + /* min-height: 20rem; */ + } + .about { + padding: 2rem; + } + .nav__bar { + gap: 52rem; + width: 100vw; + } + .contents { + padding: 2rem; + } + .sign__svg { + margin-left: 0rem; + } + .lower { + width: 30rem; + margin-left: 20rem; + } +} diff --git a/Buy Me A Coffee/pages/about.html b/Buy Me A Coffee/pages/about.html new file mode 100644 index 0000000..5544b65 --- /dev/null +++ b/Buy Me A Coffee/pages/about.html @@ -0,0 +1,573 @@ + + + + + + About-Buy Me a Coffee + + + + +
+ +
+
+

+ We believe almost everyone will
+ work for themselves in the future—
our mission is to empower +
+ individuals to achieve that. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+
+
+ When we started designing Buy Me a Coffee in 2017, our + goal was to remove all the complexities and give creators a simple way + to get paid and connect with their fans. But simple wasn't enough. + Creators needed a product that was meaningful and enjoyable to use. + This meant designing a payment platform that doesn't feel + transactional—starting with the name itself. +
+
+ Where did the idea come from? Our founders Jijo Sunny and Joseph Sunny + were creators who lived on a moderate advertising income from their + creative gigs. Although $500 per month is what you pay for a gym + membership in San Francisco, it’s enough to make a living in many + parts of the world. If it weren't for those Adsense checks, there + would be no Buy Me a Coffee. + +
+
That said, advertising model and algorithms have become too + unreliable to pay creators what they're worth. It is far more reliable + to build a direct relationship with the audience. Buy Me a Coffee + gives fans a meaningful way to express gratitude to creators. Creators + can also offer exclusive content and community access for their + biggest fans. +
+
+
Sip sip hooray.
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+
Official payment partner
+ + + + + + + + + +
+ +
+
+
+
+ Backed by +
+ + +
+
+ +
+
+ + +
+ + + diff --git a/Buy Me A Coffee/pages/faq.css b/Buy Me A Coffee/pages/faq.css new file mode 100644 index 0000000..785f20e --- /dev/null +++ b/Buy Me A Coffee/pages/faq.css @@ -0,0 +1,513 @@ +html, +body { + padding: 0%; + margin: 0%; + overflow-x: hidden; +} + +.icon__logo { + width: 2rem; + max-height: 3rem; +} +header { + background-color: #fffce6; +} + +nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + padding-bottom: 3rem; +} +.nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 47rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 60vw; + margin-top: 1rem; + box-shadow: 0px 0px 30px 0px lightgrey; +} +a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; +} +.faq, +.creator { + position: relative; +} +.faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -60%; + opacity: 0.4; + top: -40%; + z-index: 9; + /* transition: all ease-in 400ms; */ +} +/* .faq:hover::after { + opacity: 0.3; +} */ + +.left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; +} +a { + font-weight: 400; + font-size: 1rem; +} + +.right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ +} + +.login { + position: relative; + width: 3rem; +} +.login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ +} + +.login:hover::after { + opacity: 0.3; +} +.signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 5rem; + outline: none; + /* margin-left: 2rem; */ +} +.signup:hover { + border: 1px #ffdd00 solid; +} +.upper { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + padding: 1rem; + background-color: #fffce6; + padding-bottom: 3rem; +} +.section__header { + text-align: center; + font-size: 3rem; +} +.sub__header { + text-align: center; + font-size: 1.7rem; + font-weight: 300; + margin-bottom: 3rem; +} +.side__flex { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + cursor: pointer; +} +.side__content { + border: 2px solid black; + border-radius: 2rem; + padding: 0.8rem; + width: 15rem; + text-align: center; +} +.next { + padding: 1rem 40rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} +.info__header { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 0.7rem; + padding-top: 16px; + padding-bottom: 16px; + cursor: pointer; +} +.info__head { + text-align: left; + width: 20rem; +} +.activeanimation { + transform: rotateZ(180deg); +} +.infobox__content { + font-size: 1.2rem; + padding: 0.2rem; + text-align: left; + display: none; +} +.activedisplay { + display: block; +} +.activeColor { + background-color: #ffdd00; +} +.activeanim { + transition: all ease-in 1s; +} +/* hr{ + background-color: #ffdd00; +} */ +.info__head { + font-weight: 600; + font-size: 1.3rem; +} +.footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; +} +.footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; +} +.right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} +.app__data { + display: none; +} +.app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 49%; + + background-color: white; + padding: 1rem; +} + +/* ============================================= */ +@media screen and (min-width: 300px) and (max-width: 699px) { + .icon__logo { + width: 2rem; + max-height: 3rem; + } + header { + background-color: #fffce6; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + padding-bottom: 3rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 7rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 100vw; + margin-top: 1rem; + flex-wrap: wrap; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -80%; + opacity: 0.4; + top: -50%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + /* .faq:hover::after { + opacity: 0.3; + } */ + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4rem; + outline: none; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .upper { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + padding: 1rem; + background-color: #fffce6; + padding-bottom: 3rem; + } + .section__header { + text-align: center; + } + .sub__header { + text-align: center; + font-size: 1rem; + font-weight: 300; + margin-bottom: 3rem; + } + .side__flex { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + flex-direction: column; + } + .side__content { + border: 2px solid black; + border-radius: 2rem; + padding: 0.8rem; + width: 15rem; + text-align: center; + } + .next { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .info__header { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 0.7rem; + padding-top: 16px; + padding-bottom: 16px; + cursor: pointer; + } + .info__head { + text-align: left; + width: 20rem; + } + .activeanimation { + transform: rotateZ(180deg); + } + .infobox__content { + font-size: 1rem; + padding: 0.2rem; + text-align: left; + display: none; + } + .activedisplay { + display: block; + } + .activeColor { + background-color: #ffdd00; + } + .activeanim { + transition: all ease-in 1s; + } + /* hr{ + background-color: #ffdd00; + } */ + .info__head { + font-weight: 600; + font-size: 1.3rem; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 49%; + + background-color: white; + padding: 1rem; + } +} + +@media screen and (min-width: 700px) and (max-width: 1080px) { + .nav__bar { + width: 100vw; + gap: 30rem; + } + .signup { + width: 5rem; + } + .faq::after { + left: -59%; + /* opacity: 0.4; */ + top: -39%; + } + .next { + padding: 1rem 4rem; + } + .infobox__content { + font-size: 1.3rem; + } +} + +@media screen and (min-width: 1081px) and (max-width: 1780px) { + .nav__bar { + gap: 52rem; + width: 100vw; + } + .signup { + width: 5rem; + } + .faq::after { + left: -59%; + /* opacity: 0.4; */ + top: -39%; + } + .next { + padding: 1rem 4rem; + } + .infobox__content { + font-size: 1.6rem; + } +} diff --git a/Buy Me A Coffee/pages/faq.html b/Buy Me A Coffee/pages/faq.html new file mode 100644 index 0000000..cccf55e --- /dev/null +++ b/Buy Me A Coffee/pages/faq.html @@ -0,0 +1,429 @@ + + + + + + FAQ | Buy Me a Coffee + + + + + +
+ +
+ +
+ + +

+ Frequently Asked
Questions +

+

+ If you can't find an answer that you're looking for, feel free to drop us a line. +

+
+
Visit help center +
+ +
Contact Support +
+
About the company +
+
+ + +
+
+
+
+

Who uses Buy Me a Coffee?

+
+
+ + + + + +
+ +
+ +
+
+ Anyone with an audience. Youtubers, musicians, podcasters, writers, programmers, nonprofits, cosplayers, you name it. More than a million creators and their supporters are on Buy Me a Coffee. +
+
+
+
+
+

How do I get paid?

+
+
+ + + + + +
+ +
+ +
+
+ You get paid instantly to your local bank account. There’s a one-time process of connecting your Stripe account. Creating a Stripe account is free, and we’re a verified Stripe partner.
+ + If you are not from a Stripe-supported country, you can choose Standard Payout which is available in 150+ countries. With Standard Payout, we payout every Wednesday via Payoneer and bank deposit. +
+
+
+
+
+

How can my audience pay?

+
+
+ + + + + +
+ +
+ +
+
+ We support all major credit and debit cards, Apple Pay, Google Pay. +
+
+
+
+
+

Is there a fee to use Buy Me a Coffee?

+
+
+ + + + + +
+ +
+ +
+
+ We do not charge a monthly fee. All features including publishing and emails are free for everyone.
+ + We charge a 5% transaction fee, and creators keep 95% of the earnings. We make money only when you do. We'll never show ads and we'll never sell your data. +
+
+
+
+
+

Is Buy Me a Coffee safe and reliable?

+
+
+ + + + + +
+ +
+ +
+
+ We take security seriously. Here are some measures we’ve taken to protect your and your supporter’s data +
    +
  • We don’t store credit card data on our servers. Payment processing is handled by Stripe (PCI Compliance Level 1), Payoneer and Wise.
  • +
  • We run on the robust Amazon infrastructure. Cloudflare adds an additional layer of security. We also take periodic backups and force SSL encryption across the platform.
  • +
  • We have a bug bounty program to encourage responsible reporting of any security issues, and we’re quick to take action.
  • +
+
+
+
+
+

Do I have complete ownership of my supporters?

+
+
+ + + + + +
+ +
+ +
+
+ Yes, your supporters are strictly yours. We do not email them. You can export their list any time you like. +
+
+
+
+
+

How is this different from other platforms for creators?

+
+
+ + + + + +
+ +
+ +
+
+ With Buy Me a Coffee, you get everything you need to run your creative business. You don't have to worry about paying for and stitching together a dozen services, from sending emails to charging for subscriptions.
+ + Besides, your Buy Me a Coffee page is arguably the most delightful experience you can offer your audience. From the one-tap payment (look ma, no sign-ups required!) to the delightful little touches for your supporters, we’ve obsessed over every bit of detail. +
+
+
+
+
+

Can I build a serious business using Buy Me a Coffee?

+
+
+ + + + + +
+ +
+ +
+
+ Yes, there are many creators earning a six-figure income on Buy Me a Coffee. We will grow with you. +
+
+
+
+
+

Who are you folks?

+
+
+ + + + + +
+ +
+ +
+
+ Buy Me a Coffee is a company based in San Francisco. Read more about us and our guiding values. +
+
+
+
+
+

How do I contact Buy Me a Coffee?

+
+
+ + + + + +
+ +
+ +
+
+ You can email us at support@buymeacoffee.com, or leave us a message on the Intercom chat. We also respond to every feature request submitted. +
+
+
+ +
+
+ + + + + + + diff --git a/Buy Me A Coffee/pages/faq.js b/Buy Me A Coffee/pages/faq.js new file mode 100644 index 0000000..58f94bf --- /dev/null +++ b/Buy Me A Coffee/pages/faq.js @@ -0,0 +1,15 @@ +const arrow = document.getElementsByClassName("downarrow"); +for (let i = 0; i < arrow.length; i++) { + // arrow[i]; + + arrow[i].addEventListener("click", function () { + console.log("clicked"); + arrow[i].classList.toggle("activeanimation"); + const ruler = document.getElementsByClassName("ruler"); + ruler[i].classList.toggle("activeColor"); + + const infoBox = document.getElementsByClassName("infobox__content"); + + infoBox[i].classList.toggle("activedisplay"); + }); +} diff --git a/Buy Me A Coffee/pages/loginpage.css b/Buy Me A Coffee/pages/loginpage.css new file mode 100644 index 0000000..55c0416 --- /dev/null +++ b/Buy Me A Coffee/pages/loginpage.css @@ -0,0 +1,371 @@ +html, +body { + padding: 0%; + margin: 0%; + overflow-x: hidden; +} +:root { + --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} +a { + color: black; + text-decoration: none; +} + +@media screen and (min-width: 300px) and (max-width: 739px) { + .nav__flex { + display: flex; + align-items: center; + justify-content: center; + gap: 14rem; + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + } + .info { + display: none; + } + .but__signin { + border: 2.6px solid black; + padding: 0.5rem; + width: 4rem; + text-align: center; + border-radius: 2rem; + } + section { + padding: 2rem; + } + .header { + font-family: var(--font-family); + text-align: center; + font-size: 2rem; + font-weight: 500; + } + form { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 3rem; + } + #email { + border: 2px solid black; + outline: none; + padding: 1rem; + width: 18rem; + border-radius: 0.5rem; + } + form > button { + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + background-color: #ffdd00; + width: 20rem; + border-radius: 1rem; + border: none; + margin-bottom: 3rem; + } + .login__side { + text-align: center; + font-family: var(--font-family); + font-weight: 400; + color: black; + } + .login__side::before { + content: ""; + padding-left: 6rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + margin-right: 0.8rem; + height: 0.1rem; + } + .login__side::after { + content: ""; + padding-left: 6rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + height: 0.1rem; + margin-left: 0.8rem; + /* margin-top: 0.8rem; */ + } + span > img { + width: 2rem; + max-height: 10rem; + margin-right: 1rem; + } + .login_icon { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 2rem; + margin-top: 3rem; + } + .containers { + /* padding: 1rem; */ + display: flex; + align-items: center; + justify-content: center; + border: 2px solid black; + padding: 0.4rem; + border-radius: 2rem; + width: 21rem; + text-align: center; + font-family: var(--font-family); + font-weight: 500; + /* gap: 1rem; */ + } + .apple__icon { + margin-left: -1rem; + } + .google__icon { + margin-right: 2rem; + } +} + +/* for tablet */ + +@media screen and (min-width: 740px) and (max-width: 900px) { + .nav__flex { + display: flex; + align-items: center; + justify-content: center; + gap: 39rem; + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + } + .info { + display: none; + } + .but__signin { + border: 2.6px solid black; + padding: 0.5rem; + width: 4rem; + text-align: center; + border-radius: 2rem; + } + section { + padding: 2rem; + margin-top: 15rem; + } + .header { + font-family: var(--font-family); + text-align: center; + font-size: 2rem; + font-weight: 500; + } + form { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 3rem; + } + #email { + border: 2px solid black; + outline: none; + padding: 1rem; + width: 25rem; + border-radius: 0.5rem; + } + form > button { + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + background-color: #ffdd00; + width: 28rem; + border-radius: 2rem; + border: none; + margin-bottom: 3rem; + } + .login__side { + text-align: center; + font-family: var(--font-family); + font-weight: 400; + color: black; + } + .login__side::before { + content: ""; + padding-left: 6rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + margin-right: 0.8rem; + height: 0.1rem; + } + .login__side::after { + content: ""; + padding-left: 6rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + height: 0.1rem; + margin-left: 0.8rem; + /* margin-top: 0.8rem; */ + } + span > img { + width: 2rem; + max-height: 10rem; + margin-right: 1rem; + } + .login_icon { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 2rem; + margin-top: 3rem; + } + .containers { + /* padding: 1rem; */ + display: flex; + align-items: center; + justify-content: center; + border: 2px solid black; + padding: 0.4rem; + border-radius: 2rem; + width: 28rem; + text-align: center; + font-family: var(--font-family); + font-weight: 500; + /* gap: 1rem; */ + } + .apple__icon { + margin-left: -1rem; + } + .google__icon { + margin-right: 2rem; + } +} + +@media screen and (min-width: 901px) { + .nav__flex { + display: flex; + align-items: center; + justify-content: center; + gap: 35rem; + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + } + .info { + display: block; + font-weight: 400; + width: 12rem; + } + .but__signin { + border: 2.6px solid black; + padding: 0.5rem; + width: 6rem; + text-align: center; + border-radius: 2rem; + } + .signup { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + section { + padding: 2rem; + margin-top: 6rem; + } + .header { + font-family: var(--font-family); + text-align: center; + font-size: 2rem; + font-weight: 500; + } + form { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 3rem; + } + #email { + border: 2px solid black; + outline: none; + padding: 1rem; + width: 25rem; + border-radius: 0.5rem; + } + form > button { + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + background-color: #ffdd00; + width: 28rem; + border-radius: 2rem; + border: none; + margin-bottom: 3rem; + } + .login__side { + text-align: center; + font-family: var(--font-family); + font-weight: 400; + color: black; + } + .login__side::before { + content: ""; + padding-left: 6rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + margin-right: 0.8rem; + height: 0.1rem; + } + .login__side::after { + content: ""; + padding-left: 6rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + height: 0.1rem; + margin-left: 0.8rem; + /* margin-top: 0.8rem; */ + } + span > img { + width: 2rem; + max-height: 10rem; + margin-right: 1rem; + } + .login_icon { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 2rem; + margin-top: 3rem; + } + .containers { + /* padding: 1rem; */ + display: flex; + align-items: center; + justify-content: center; + border: 2px solid black; + padding: 0.4rem; + border-radius: 2rem; + width: 28rem; + text-align: center; + font-family: var(--font-family); + font-weight: 500; + /* gap: 1rem; */ + } + .apple__icon { + margin-left: -1rem; + } + .google__icon { + margin-right: 2rem; + } +} diff --git a/Buy Me A Coffee/pages/loginpage.html b/Buy Me A Coffee/pages/loginpage.html new file mode 100644 index 0000000..7b30360 --- /dev/null +++ b/Buy Me A Coffee/pages/loginpage.html @@ -0,0 +1,132 @@ + + + + + + Sign Up-Buy Me a Coffee + + + + +
+ +
+
+
+

Welcome back

+
+ + +
+ + + +
+
+ + diff --git a/Buy Me A Coffee/pages/privacy.css b/Buy Me A Coffee/pages/privacy.css new file mode 100644 index 0000000..5a69fe9 --- /dev/null +++ b/Buy Me A Coffee/pages/privacy.css @@ -0,0 +1,609 @@ +html, +body { + padding: 0%; + margin: 0%; + overflow-x: hidden; +} +@media screen and (min-width: 300px) and (max-width: 580px) { + .icon__logo { + width: 2rem; + max-height: 3rem; + } + header { + background-color: #fffce6; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + padding-bottom: 1rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 7rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 100vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + font-weight: 500; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -80%; + opacity: 0; + top: -50%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4rem; + outline: none; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header { + background-color: #fffce6; + padding: 1rem; + } + .priv__header { + background-color: #fffce6; + } + .content { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + + .bold__header__upper { + font-size: 2rem; + font-weight: 600; + text-align: center; + padding-bottom: 2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .content__data, + .content__header { + margin-bottom: 2rem; + font-weight: 350; + } + .bold__header { + margin-top: 2rem; + } + .content__header__list { + margin-left: 3rem; + margin-top: 1rem; + margin-bottom: 1rem; + font-weight: 350; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 49%; + + background-color: white; + padding: 1rem; + } +} + +/* tablet screen */ +@media screen and (min-width: 581px) and (max-width: 1290px) { + .icon__logo { + width: 2rem; + max-height: 3rem; + } + header { + background-color: #fffce6; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + padding-bottom: 1rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 32rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 100vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + font-weight: 500; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -80%; + opacity: 0; + top: -50%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4rem; + outline: none; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header { + background-color: #fffce6; + padding: 1rem; + } + .priv__header { + background-color: #fffce6; + } + .content { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + + .bold__header__upper { + font-size: 2rem; + font-weight: 600; + text-align: center; + padding-bottom: 2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .content__data, + .content__header { + margin-bottom: 2rem; + font-weight: 350; + } + .bold__header { + margin-top: 2rem; + } + .content__header__list { + margin-left: 3rem; + margin-top: 1rem; + margin-bottom: 1rem; + font-weight: 350; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 49%; + + background-color: white; + padding: 1rem; + } +} + +/* ====================================================================== */ + +/* desktop screen */ + +@media screen and (min-width: 1291px) { + .icon__logo { + width: 2rem; + max-height: 3rem; + } + header { + background-color: #fffce6; + display: flex; + align-items: center; + justify-content: center; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + width: 60vw; + height: 6vh; + padding-top: 4rem; + padding-bottom: 1rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 50rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 100vw; + margin-top: 1rem; + box-shadow: 1px 19px 30px -6px lightgrey; + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + font-weight: 500; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -80%; + opacity: 0; + top: -50%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4rem; + outline: none; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header { + background-color: #fffce6; + padding: 1rem; + } + .priv__header { + background-color: #fffce6; + } + .content { + padding-top: 3rem; + padding-left: 30rem; + padding-right: 30rem; + margin-top: -1rem; + padding-bottom: 5rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + + .bold__header__upper { + font-size: 3rem; + font-weight: 600; + text-align: center; + padding-bottom: 5rem; + padding-top: 10rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + margin-top: -1rem; + } + + .content__data, + .content__header { + margin-bottom: 2rem; + font-weight: 350; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.3rem; + } + .bold__header { + margin-top: 2rem; + } + .content__header__list { + margin-left: 3rem; + margin-top: 1rem; + margin-bottom: 1rem; + font-weight: 350; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 3rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 49%; + + background-color: white; + padding: 1rem; + } +} diff --git a/Buy Me A Coffee/pages/privacy.html b/Buy Me A Coffee/pages/privacy.html new file mode 100644 index 0000000..c7e4b50 --- /dev/null +++ b/Buy Me A Coffee/pages/privacy.html @@ -0,0 +1,291 @@ + + + + + + Privacy Policy | Buy Me a Coffee + + + + +
+ +
+
+

Privacy Policy

+
+
+
+ Buy Me a Coffee is a platform for creators to accept support from their + audience and share exclusive content. At Buy Me a Coffee, your privacy + is important to us, and we want you to feel confident that your personal + information is secure when using our products and our platform. +
+
+ The services are provided by Publisherr Inc (parent company and + hereinafter referred to as “Buy Me a Coffee”), a Delaware company with + registered address at 2035 Sunset Lake Road, Suite B-2 Newark, DE 19702, + USA. It is Buy Me a Coffee’s policy to respect your privacy regarding + any information we may collect while operating our website. +
+

Website Visitors

+
+ Like most website operators, Buy Me a Coffee collects + non-personally-identifying information of the sort that web browsers and + servers typically make available, such as the browser type, language + preference, referring site, and the date and time of each visitor + request. Buy Me a Coffee's purpose in collecting non-personally + identifying information is to better understand how Buy Me a Coffee's + visitors use its website. From time to time, Buy Me a Coffee may release + non-personally-identifying information in the aggregate, e.g., by + publishing a report on trends in the usage of its website. +
+
+ Buy Me a Coffee also collects potentially personally-identifying + information like Internet Protocol (IP) addresses for logged in users + and for users making payments on BuyMeACoffee.com. Buy Me a Coffee only + discloses logged in user and commenter IP addresses under the same + circumstances that it uses and discloses personally-identifying + information as described below, except that payee IP addresses and email + addresses are visible and disclosed to the administrators of Buy Me a + Coffee and is handled by payment processors at the time of processing + the payments. +
+

Payments

+
+ To make a payment to a creator on Buy Me a Coffee, you have to provide + our payment processor (Stripe) with your payment information. They + provide us with a token that represents your account, your card’s + expiration date, card type and the last four digits of your credit card. + If you provide them with a name and email address then they also provide + us with that information. +
+
+ We collect and process information about the creators you support, the + level at which you support them, what rewards you receive and how often + you support them. +
+
+ Gathering of Personally-Identifying Information +
+
+ Certain visitors to Buy Me a Coffee's websites choose to interact with + Buy Me a Coffee in ways that require Buy Me a Coffee to gather + personally-identifying information. The amount and type of information + that Buy Me a Coffee gathers depends on the nature of the interaction. + For example, we ask visitors who sign up at BuyMeACoffee.com to provide + a username and email address. Those who engage in transactions with Buy + Me a Coffee are asked to provide additional information, including as + necessary the personal and financial information required to process + those transactions. In each case, Buy Me a Coffee collects such + information only insofar as is necessary or appropriate to fulfill the + purpose of the visitor's interaction with Buy Me a Coffee. Buy Me a + Coffee does not disclose personally-identifying information other than + as described below. And visitors can always refuse to supply + personally-identifying information, with the caveat that it may prevent + them from engaging in certain website-related activities. +
+
+ You can request to delete your personal data by emailing us at + support@buymeacoffee.com. +
+

Aggregated Statistics

+
+ Buy Me a Coffee may collect statistics about the behavior of visitors to + its websites. Buy Me a Coffee may display this information publicly or + provide it to others. However, Buy Me a Coffee does not disclose + personally-identifying information other than as described below. +
+

+ Protection of Certain Personally-Identifying Information +

+
+ Buy Me a Coffee discloses potentially personally-identifying and + personally-identifying information only to those of its employees, + contractors and affiliated organizations that (i) need to know that + information in order to process it on Buy Me a Coffee's behalf or to + provide services available at Buy Me a Coffee's websites, and (ii) that + have agreed not to disclose it to others. Some of those employees, + contractors and affiliated organizations may be located outside of your + home country; by using Buy Me a Coffee's websites, you consent to the + transfer of such information to them. Buy Me a Coffee will not rent or + sell potentially personally-identifying and personally-identifying + information to anyone. Other than to its employees, contractors and + affiliated organizations, as described above, Buy Me a Coffee discloses + potentially personally-identifying and personally-identifying + information only in response to a subpoena, court order or other + governmental request, or when Buy Me a Coffee believes in good faith + that disclosure is reasonably necessary to protect the property or + rights of Buy Me a Coffee, third parties or the public at large. If you + are a registered user of an Buy Me a Coffee website and have supplied + your email address, Buy Me a Coffee may occasionally send you an email + to tell you about new features, solicit your feedback, or just keep you + up to date with what's going on with Buy Me a Coffee and our products. + If you send us a request (for example via email or via one of our + feedback mechanisms), we reserve the right to publish it in order to + help us clarify or respond to your request or to help us support other + users. Buy Me a Coffee takes all measures reasonably necessary to + protect against the unauthorized access, use, alteration or destruction + of potentially personally-identifying and personally-identifying + information. +
+

Account deletion

+
+ You may stop using our Service, by contacting Buy Me a Coffee at + support@buymeacoffee.com, and requesting account deletion. We may retain + certain information as required by law or as necessary for our + legitimate business purposes. All provisions of this agreement survive + termination of an account, including our rights regarding any content + you’ve already submitted to the Site. (For instance, if you’ve launched + a page, deleting your account will not automatically remove the page + from the Site.) If you have signed up for a membership, you can find + information about your cancellation rights on our site. You will need to + cancel your subscription in accordance with these cancellation rights to + stop your recurring payments for the relevant subscription. Merely + deleting your account without canceling your subscription will not stop + these payments. +
+
+ You can request to delete your personal data by emailing us at + support@buymeacoffee.com. +
+

Cookies

+
+ A cookie is a string of information that a website stores on a visitor's + computer, and that the visitor's browser provides to the website each + time the visitor returns. For more information, visit All About Cookies. +
+
+ Buy Me a Coffee uses cookies to help Buy Me a Coffee identify and track + visitors, their usage of Buy Me a Coffee website, and their website + access preferences. Some cookies expire after a certain amount of time, + or upon logging out (session cookies), others remain on your computer or + terminal device for a longer period (persistent cookies). Our Site uses + first party cookies (cookies set directly by Anchor) as well as third + party cookies, as described below: +
+
+ - Strictly Necessary Cookies: Used to provide Users with the Services + available through our Site and to use some of their features, such as + the ability to log-in and access to secure areas. These cookies are + served by Anchor and are essential for using and navigating the Site. + Without these cookies, basic functions of our Site would not work. + Because these cookies are strictly necessary to deliver the Site and the + Services, you cannot refuse them. +
+
+ - Analytics/Performance: Used to better understand the behavior of the + Users on our Site and improve our Site accordingly, for example by + making sure Users are finding what they need easily. The Site uses + Google Analytics, a web analytics service provided by Google Inc. + (“Google”). The information collected by Google (including your IP + address) will be transmitted to and stored by Google on servers in the + United States (Google is certified to the Privacy Shield for data + transfers). How long a Google Analytics cookie remains on your computer + or device depends on what it is and what it is used for. Some Google + Analytics cookies expire at the end of your browser session, whilst + others can remain for up to two years. You can prevent your data from + being collected by Google Analytics on our Site by downloading and + installing the Google Analytics Opt-out Browser Add-on for your current + web browser. For more information on Google Analytics privacy practices, + read here. +
+
+ Buy Me a Coffee visitors who do not wish to have cookies placed on their + computers should set their browsers to refuse cookies before using Buy + Me a Coffee's websites, with the drawback that certain features of Buy + Me a Coffee's websites may not function properly without the aid of + cookies. +
+

Business Transfers

+
+ If Buy Me a Coffee, or substantially all of its assets, were acquired, + or in the unlikely event that Buy Me a Coffee goes out of business or + enters bankruptcy, user information would be one of the assets that is + transferred or acquired by a third party. You acknowledge that such + transfers may occur, and that any acquirer of Buy Me a Coffee may + continue to use your personal information as set forth in this policy. +
+

Ads

+
+ We do not run any external advertisements on Buy Me a Coffee. However, + we use ad networks such as Twitter Ads to collect retargeting + information to compile information about our users. This Privacy Policy + covers the use of cookies by Buy Me a Coffee and does not cover the use + of cookies by any advertisers. +
+

Prohibited and restricted content

+
+ We want Buy Me a Coffee to be a safe venue for a diverse range of + creators and their communities. Please respect the people and + communities that are building with you on Buy Me a Coffee. If you find + any creators breaking our permitted content guidelines, you can report + them to us. Alternatively, you can block them permanently, and we’ll no + longer show you their profile or content posted by them. +
+
+

Contact Us

+
+ Please feel free to contact us if you have any questions about Buy Me + a Coffee’s Privacy Policy or the information practices. +
+
+ You may contact us as follows: You may send an email to + support@buymeacoffee.com, or send mail to: +
+
Publisherr
+
2261 Market Street
+
#4610, San Francisco
+ CA 94114, USA +
+
+ + + diff --git a/Buy Me A Coffee/pages/signup.css b/Buy Me A Coffee/pages/signup.css new file mode 100644 index 0000000..a2c9857 --- /dev/null +++ b/Buy Me A Coffee/pages/signup.css @@ -0,0 +1,378 @@ +html, +body { + padding: 0%; + margin: 0%; + overflow-x: hidden; +} +:root { + --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} +.infomer { + text-align: center; + font-size: 0.5rem; + font-family: var(--font-family); + font-weight: 400; + margin-top: 2rem; +} +a { + color: black; + text-decoration: none; +} + +@media screen and (min-width: 300px) and (max-width: 739px) { + .nav__flex { + display: flex; + align-items: center; + justify-content: center; + gap: 14rem; + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + } + .info { + display: none; + } + .but__signin { + border: 2.6px solid black; + padding: 0.5rem; + width: 4rem; + text-align: center; + border-radius: 2rem; + } + section { + padding: 2rem; + } + .header { + font-family: var(--font-family); + text-align: center; + font-size: 2rem; + font-weight: 500; + } + form { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 3rem; + } + #email { + border: 2px solid black; + outline: none; + padding: 1rem; + width: 18rem; + border-radius: 0.5rem; + } + form > button { + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + background-color: #ffdd00; + width: 20rem; + border-radius: 1rem; + border: none; + margin-bottom: 3rem; + } + .login__side { + text-align: center; + font-family: var(--font-family); + font-weight: 400; + color: black; + } + .login__side::before { + content: ""; + padding-left: 5rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + margin-right: 0.8rem; + height: 0.1rem; + } + .login__side::after { + content: ""; + padding-left: 5rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + height: 0.1rem; + margin-left: 0.8rem; + /* margin-top: 0.8rem; */ + } + span > img { + width: 2rem; + max-height: 10rem; + margin-right: 1rem; + } + .login_icon { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 2rem; + margin-top: 3rem; + } + .containers { + /* padding: 1rem; */ + display: flex; + align-items: center; + justify-content: center; + border: 2px solid black; + padding: 0.4rem; + border-radius: 2rem; + width: 21rem; + text-align: center; + font-family: var(--font-family); + font-weight: 500; + /* gap: 1rem; */ + } + .apple__icon { + margin-left: -1rem; + } + .google__icon { + margin-right: 2rem; + } +} + +/* for tablet */ + +@media screen and (min-width: 740px) and (max-width: 900px) { + .nav__flex { + display: flex; + align-items: center; + justify-content: center; + gap: 39rem; + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + } + .info { + display: none; + } + .but__signin { + border: 2.6px solid black; + padding: 0.5rem; + width: 4rem; + text-align: center; + border-radius: 2rem; + } + section { + padding: 2rem; + margin-top: 15rem; + } + .header { + font-family: var(--font-family); + text-align: center; + font-size: 2rem; + font-weight: 500; + } + form { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 3rem; + } + #email { + border: 2px solid black; + outline: none; + padding: 1rem; + width: 25rem; + border-radius: 0.5rem; + } + form > button { + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + background-color: #ffdd00; + width: 28rem; + border-radius: 2rem; + border: none; + margin-bottom: 3rem; + } + .login__side { + text-align: center; + font-family: var(--font-family); + font-weight: 400; + color: black; + } + .login__side::before { + content: ""; + padding-left: 6rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + margin-right: 0.8rem; + height: 0.1rem; + } + .login__side::after { + content: ""; + padding-left: 6rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + height: 0.1rem; + margin-left: 0.8rem; + /* margin-top: 0.8rem; */ + } + span > img { + width: 2rem; + max-height: 10rem; + margin-right: 1rem; + } + .login_icon { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 2rem; + margin-top: 3rem; + } + .containers { + /* padding: 1rem; */ + display: flex; + align-items: center; + justify-content: center; + border: 2px solid black; + padding: 0.4rem; + border-radius: 2rem; + width: 28rem; + text-align: center; + font-family: var(--font-family); + font-weight: 500; + /* gap: 1rem; */ + } + .apple__icon { + margin-left: -1rem; + } + .google__icon { + margin-right: 2rem; + } +} + +@media screen and (min-width: 901px) { + .nav__flex { + display: flex; + align-items: center; + justify-content: center; + gap: 35rem; + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + } + .info { + display: block; + font-weight: 400; + width: 12rem; + } + .but__signin { + border: 2.6px solid black; + padding: 0.5rem; + width: 6rem; + text-align: center; + border-radius: 2rem; + } + .signup { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + section { + padding: 2rem; + margin-top: 6rem; + } + .header { + font-family: var(--font-family); + text-align: center; + font-size: 2rem; + font-weight: 500; + } + form { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 3rem; + } + #email { + border: 2px solid black; + outline: none; + padding: 1rem; + width: 25rem; + border-radius: 0.5rem; + } + form > button { + padding: 1rem; + font-family: var(--font-family); + font-size: 1rem; + font-weight: 500; + background-color: #ffdd00; + width: 28rem; + border-radius: 2rem; + border: none; + margin-bottom: 3rem; + } + .login__side { + text-align: center; + font-family: var(--font-family); + font-weight: 400; + color: black; + } + .login__side::before { + content: ""; + padding-left: 6rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + margin-right: 0.8rem; + height: 0.1rem; + } + .login__side::after { + content: ""; + padding-left: 6rem; + /* padding-right: -121rem; */ + background-color: black; + display: inline-block; + height: 0.1rem; + margin-left: 0.8rem; + /* margin-top: 0.8rem; */ + } + span > img { + width: 2rem; + max-height: 10rem; + margin-right: 1rem; + } + .login_icon { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 2rem; + margin-top: 3rem; + } + .containers { + /* padding: 1rem; */ + display: flex; + align-items: center; + justify-content: center; + border: 2px solid black; + padding: 0.4rem; + border-radius: 2rem; + width: 28rem; + text-align: center; + font-family: var(--font-family); + font-weight: 500; + /* gap: 1rem; */ + } + .apple__icon { + margin-left: -1rem; + } + .google__icon { + margin-right: 2rem; + } +} diff --git a/Buy Me A Coffee/pages/signup.html b/Buy Me A Coffee/pages/signup.html new file mode 100644 index 0000000..07d9f93 --- /dev/null +++ b/Buy Me A Coffee/pages/signup.html @@ -0,0 +1,145 @@ + + + + + + Login-Buy Me a Coffee + + + + +
+ +
+
+
+

Sign up

+
+ + + + +
+ + + +
+ By signing up, you agree to the Terms and Privacy Policy. Creators or + content that violate our terms will be unpublished. +
+
+
+ + diff --git a/Buy Me A Coffee/pages/terms.css b/Buy Me A Coffee/pages/terms.css new file mode 100644 index 0000000..5a69fe9 --- /dev/null +++ b/Buy Me A Coffee/pages/terms.css @@ -0,0 +1,609 @@ +html, +body { + padding: 0%; + margin: 0%; + overflow-x: hidden; +} +@media screen and (min-width: 300px) and (max-width: 580px) { + .icon__logo { + width: 2rem; + max-height: 3rem; + } + header { + background-color: #fffce6; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + padding-bottom: 1rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 7rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 100vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + font-weight: 500; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -80%; + opacity: 0; + top: -50%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4rem; + outline: none; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header { + background-color: #fffce6; + padding: 1rem; + } + .priv__header { + background-color: #fffce6; + } + .content { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + + .bold__header__upper { + font-size: 2rem; + font-weight: 600; + text-align: center; + padding-bottom: 2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .content__data, + .content__header { + margin-bottom: 2rem; + font-weight: 350; + } + .bold__header { + margin-top: 2rem; + } + .content__header__list { + margin-left: 3rem; + margin-top: 1rem; + margin-bottom: 1rem; + font-weight: 350; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 49%; + + background-color: white; + padding: 1rem; + } +} + +/* tablet screen */ +@media screen and (min-width: 581px) and (max-width: 1290px) { + .icon__logo { + width: 2rem; + max-height: 3rem; + } + header { + background-color: #fffce6; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + padding-bottom: 1rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 32rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 100vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + font-weight: 500; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -80%; + opacity: 0; + top: -50%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4rem; + outline: none; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header { + background-color: #fffce6; + padding: 1rem; + } + .priv__header { + background-color: #fffce6; + } + .content { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + + .bold__header__upper { + font-size: 2rem; + font-weight: 600; + text-align: center; + padding-bottom: 2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .content__data, + .content__header { + margin-bottom: 2rem; + font-weight: 350; + } + .bold__header { + margin-top: 2rem; + } + .content__header__list { + margin-left: 3rem; + margin-top: 1rem; + margin-bottom: 1rem; + font-weight: 350; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 49%; + + background-color: white; + padding: 1rem; + } +} + +/* ====================================================================== */ + +/* desktop screen */ + +@media screen and (min-width: 1291px) { + .icon__logo { + width: 2rem; + max-height: 3rem; + } + header { + background-color: #fffce6; + display: flex; + align-items: center; + justify-content: center; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + width: 60vw; + height: 6vh; + padding-top: 4rem; + padding-bottom: 1rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 50rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 100vw; + margin-top: 1rem; + box-shadow: 1px 19px 30px -6px lightgrey; + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + font-weight: 500; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -80%; + opacity: 0; + top: -50%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4rem; + outline: none; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header { + background-color: #fffce6; + padding: 1rem; + } + .priv__header { + background-color: #fffce6; + } + .content { + padding-top: 3rem; + padding-left: 30rem; + padding-right: 30rem; + margin-top: -1rem; + padding-bottom: 5rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + + .bold__header__upper { + font-size: 3rem; + font-weight: 600; + text-align: center; + padding-bottom: 5rem; + padding-top: 10rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + margin-top: -1rem; + } + + .content__data, + .content__header { + margin-bottom: 2rem; + font-weight: 350; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.3rem; + } + .bold__header { + margin-top: 2rem; + } + .content__header__list { + margin-left: 3rem; + margin-top: 1rem; + margin-bottom: 1rem; + font-weight: 350; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 3rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 49%; + + background-color: white; + padding: 1rem; + } +} diff --git a/Buy Me A Coffee/pages/terms.html b/Buy Me A Coffee/pages/terms.html new file mode 100644 index 0000000..b3a3e13 --- /dev/null +++ b/Buy Me A Coffee/pages/terms.html @@ -0,0 +1,297 @@ + + + + + + Terms | Buy Me a Coffee + + + + +
+ +
+
+

Terms of use

+
+
+
+ Welcome to Buy Me a Coffee, this page explains our terms of use. When + you use Buy Me a Coffee, you’re agreeing to all the rules on this page. + Some of them need to be expressed in legal language, but we’ve done our + best to offer you clear and simple explanations of what everything + means. +
+
+ The services are provided by Publisherr Inc (parent company and + hereinafter referred to as “Buy Me a Coffee”), a Delaware company with + registered address at 2035 Sunset Lake Road, Suite B-2 Newark, DE 19702, + USA. It is Buy Me a Coffee’s policy to respect your privacy regarding + any information we may collect while operating our website. +
+

About Creating an Account

+
+ To sign up for a Buy Me a Coffee account, you need to be 18 or over. + You’re responsible for your account and all the activity on it. You can + browse Buy Me a Coffee without registering for an account. But to use + some of our features, you’ll need to register, choose a username, and + set a password. When you do that, the information you give us has to be + accurate and complete. Don’t impersonate anyone else or choose names + that are offensive or that violate anyone’s rights. If you don’t follow + these rules, we may cancel your account. You’re responsible for all the + activity on your account, and for keeping your password confidential. If + you find out that someone has used your account without your permission, + you should report it to support@buymeacoffee.com. To sign up for an + account, you need to be at least 18 years old, or old enough to form a + binding contract where you live. If necessary, we may ask you for proof + of age. +
+
+ Buy Me a Coffee also collects potentially personally-identifying + information like Internet Protocol (IP) addresses for logged in users + and for users making payments on BuyMeACoffee.com. Buy Me a Coffee only + discloses logged in user and commenter IP addresses under the same + circumstances that it uses and discloses personally-identifying + information as described below, except that payee IP addresses and email + addresses are visible and disclosed to the administrators of Buy Me a + Coffee and is handled by payment processors at the time of processing + the payments. +
+

Payments

+
+ To make a payment to a creator on Buy Me a Coffee, you have to provide + our payment processor (Stripe) with your payment information. They + provide us with a token that represents your account, your card’s + expiration date, card type and the last four digits of your credit card. + If you provide them with a name and email address then they also provide + us with that information. +
+
+ We collect and process information about the creators you support, the + level at which you support them, what rewards you receive and how often + you support them. +
+
+ Gathering of Personally-Identifying Information +
+
+ Certain visitors to Buy Me a Coffee's websites choose to interact with + Buy Me a Coffee in ways that require Buy Me a Coffee to gather + personally-identifying information. The amount and type of information + that Buy Me a Coffee gathers depends on the nature of the interaction. + For example, we ask visitors who sign up at BuyMeACoffee.com to provide + a username and email address. Those who engage in transactions with Buy + Me a Coffee are asked to provide additional information, including as + necessary the personal and financial information required to process + those transactions. In each case, Buy Me a Coffee collects such + information only insofar as is necessary or appropriate to fulfill the + purpose of the visitor's interaction with Buy Me a Coffee. Buy Me a + Coffee does not disclose personally-identifying information other than + as described below. And visitors can always refuse to supply + personally-identifying information, with the caveat that it may prevent + them from engaging in certain website-related activities. +
+
+ You can request to delete your personal data by emailing us at + support@buymeacoffee.com. +
+

Aggregated Statistics

+
+ Buy Me a Coffee may collect statistics about the behavior of visitors to + its websites. Buy Me a Coffee may display this information publicly or + provide it to others. However, Buy Me a Coffee does not disclose + personally-identifying information other than as described below. +
+

+ Protection of Certain Personally-Identifying Information +

+
+ Buy Me a Coffee discloses potentially personally-identifying and + personally-identifying information only to those of its employees, + contractors and affiliated organizations that (i) need to know that + information in order to process it on Buy Me a Coffee's behalf or to + provide services available at Buy Me a Coffee's websites, and (ii) that + have agreed not to disclose it to others. Some of those employees, + contractors and affiliated organizations may be located outside of your + home country; by using Buy Me a Coffee's websites, you consent to the + transfer of such information to them. Buy Me a Coffee will not rent or + sell potentially personally-identifying and personally-identifying + information to anyone. Other than to its employees, contractors and + affiliated organizations, as described above, Buy Me a Coffee discloses + potentially personally-identifying and personally-identifying + information only in response to a subpoena, court order or other + governmental request, or when Buy Me a Coffee believes in good faith + that disclosure is reasonably necessary to protect the property or + rights of Buy Me a Coffee, third parties or the public at large. If you + are a registered user of an Buy Me a Coffee website and have supplied + your email address, Buy Me a Coffee may occasionally send you an email + to tell you about new features, solicit your feedback, or just keep you + up to date with what's going on with Buy Me a Coffee and our products. + If you send us a request (for example via email or via one of our + feedback mechanisms), we reserve the right to publish it in order to + help us clarify or respond to your request or to help us support other + users. Buy Me a Coffee takes all measures reasonably necessary to + protect against the unauthorized access, use, alteration or destruction + of potentially personally-identifying and personally-identifying + information. +
+

Account deletion

+
+ You may stop using our Service, by contacting Buy Me a Coffee at + support@buymeacoffee.com, and requesting account deletion. We may retain + certain information as required by law or as necessary for our + legitimate business purposes. All provisions of this agreement survive + termination of an account, including our rights regarding any content + you’ve already submitted to the Site. (For instance, if you’ve launched + a page, deleting your account will not automatically remove the page + from the Site.) If you have signed up for a membership, you can find + information about your cancellation rights on our site. You will need to + cancel your subscription in accordance with these cancellation rights to + stop your recurring payments for the relevant subscription. Merely + deleting your account without canceling your subscription will not stop + these payments. +
+
+ You can request to delete your personal data by emailing us at + support@buymeacoffee.com. +
+

Cookies

+
+ A cookie is a string of information that a website stores on a visitor's + computer, and that the visitor's browser provides to the website each + time the visitor returns. For more information, visit All About Cookies. +
+
+ Buy Me a Coffee uses cookies to help Buy Me a Coffee identify and track + visitors, their usage of Buy Me a Coffee website, and their website + access preferences. Some cookies expire after a certain amount of time, + or upon logging out (session cookies), others remain on your computer or + terminal device for a longer period (persistent cookies). Our Site uses + first party cookies (cookies set directly by Anchor) as well as third + party cookies, as described below: +
+
+ - Strictly Necessary Cookies: Used to provide Users with the Services + available through our Site and to use some of their features, such as + the ability to log-in and access to secure areas. These cookies are + served by Anchor and are essential for using and navigating the Site. + Without these cookies, basic functions of our Site would not work. + Because these cookies are strictly necessary to deliver the Site and the + Services, you cannot refuse them. +
+
+ - Analytics/Performance: Used to better understand the behavior of the + Users on our Site and improve our Site accordingly, for example by + making sure Users are finding what they need easily. The Site uses + Google Analytics, a web analytics service provided by Google Inc. + (“Google”). The information collected by Google (including your IP + address) will be transmitted to and stored by Google on servers in the + United States (Google is certified to the Privacy Shield for data + transfers). How long a Google Analytics cookie remains on your computer + or device depends on what it is and what it is used for. Some Google + Analytics cookies expire at the end of your browser session, whilst + others can remain for up to two years. You can prevent your data from + being collected by Google Analytics on our Site by downloading and + installing the Google Analytics Opt-out Browser Add-on for your current + web browser. For more information on Google Analytics privacy practices, + read here. +
+
+ Buy Me a Coffee visitors who do not wish to have cookies placed on their + computers should set their browsers to refuse cookies before using Buy + Me a Coffee's websites, with the drawback that certain features of Buy + Me a Coffee's websites may not function properly without the aid of + cookies. +
+

Business Transfers

+
+ If Buy Me a Coffee, or substantially all of its assets, were acquired, + or in the unlikely event that Buy Me a Coffee goes out of business or + enters bankruptcy, user information would be one of the assets that is + transferred or acquired by a third party. You acknowledge that such + transfers may occur, and that any acquirer of Buy Me a Coffee may + continue to use your personal information as set forth in this policy. +
+

Ads

+
+ We do not run any external advertisements on Buy Me a Coffee. However, + we use ad networks such as Twitter Ads to collect retargeting + information to compile information about our users. This Privacy Policy + covers the use of cookies by Buy Me a Coffee and does not cover the use + of cookies by any advertisers. +
+

Prohibited and restricted content

+
+ We want Buy Me a Coffee to be a safe venue for a diverse range of + creators and their communities. Please respect the people and + communities that are building with you on Buy Me a Coffee. If you find + any creators breaking our permitted content guidelines, you can report + them to us. Alternatively, you can block them permanently, and we’ll no + longer show you their profile or content posted by them. +
+
+

Contact Us

+
+ Please feel free to contact us if you have any questions about Buy Me + a Coffee’s Privacy Policy or the information practices. +
+
+ You may contact us as follows: You may send an email to + support@buymeacoffee.com, or send mail to: +
+
Publisherr
+
2261 Market Street
+
#4610, San Francisco
+ CA 94114, USA +
+
+ + + diff --git a/Buy Me A Coffee/public/images/02c2d752e1526c8be4372ec32d3c0e49.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/02c2d752e1526c8be4372ec32d3c0e49.jpg@300w_0e.jpg new file mode 100644 index 0000000..477bcb7 Binary files /dev/null and b/Buy Me A Coffee/public/images/02c2d752e1526c8be4372ec32d3c0e49.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/0ae66445e9c19709a9f008d80a595f30.png@300w_0e.jpg b/Buy Me A Coffee/public/images/0ae66445e9c19709a9f008d80a595f30.png@300w_0e.jpg new file mode 100644 index 0000000..a449ed9 Binary files /dev/null and b/Buy Me A Coffee/public/images/0ae66445e9c19709a9f008d80a595f30.png@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/203f7b05f58281d74c2d1c3bbdf556e7.png@300w_0e.jpg b/Buy Me A Coffee/public/images/203f7b05f58281d74c2d1c3bbdf556e7.png@300w_0e.jpg new file mode 100644 index 0000000..d440c10 Binary files /dev/null and b/Buy Me A Coffee/public/images/203f7b05f58281d74c2d1c3bbdf556e7.png@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/3380c03206000e044d2eba714b862710.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/3380c03206000e044d2eba714b862710.jpg@300w_0e.jpg new file mode 100644 index 0000000..87c5e97 Binary files /dev/null and b/Buy Me A Coffee/public/images/3380c03206000e044d2eba714b862710.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/348df2c9ac273b642918f634ac2d2086.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/348df2c9ac273b642918f634ac2d2086.jpg@300w_0e.jpg new file mode 100644 index 0000000..0231c31 Binary files /dev/null and b/Buy Me A Coffee/public/images/348df2c9ac273b642918f634ac2d2086.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/42177848f2038c819c990f7f0dcad897.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/42177848f2038c819c990f7f0dcad897.jpg@300w_0e.jpg new file mode 100644 index 0000000..69e9c7e Binary files /dev/null and b/Buy Me A Coffee/public/images/42177848f2038c819c990f7f0dcad897.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/4353c5ff434fdf121bc8c7653bc10ea2.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/4353c5ff434fdf121bc8c7653bc10ea2.jpg@300w_0e.jpg new file mode 100644 index 0000000..d6ada30 Binary files /dev/null and b/Buy Me A Coffee/public/images/4353c5ff434fdf121bc8c7653bc10ea2.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/495a7acb9f9b123ff8692feed03b6eed.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/495a7acb9f9b123ff8692feed03b6eed.jpg@300w_0e.jpg new file mode 100644 index 0000000..6e34e4d Binary files /dev/null and b/Buy Me A Coffee/public/images/495a7acb9f9b123ff8692feed03b6eed.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/4e03a8ed95a45a0019f5233a599e5439.png@300w_0e.jpg b/Buy Me A Coffee/public/images/4e03a8ed95a45a0019f5233a599e5439.png@300w_0e.jpg new file mode 100644 index 0000000..b882d51 Binary files /dev/null and b/Buy Me A Coffee/public/images/4e03a8ed95a45a0019f5233a599e5439.png@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/500b9f3362e0118cbb93024190207942.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/500b9f3362e0118cbb93024190207942.jpg@300w_0e.jpg new file mode 100644 index 0000000..9847ef9 Binary files /dev/null and b/Buy Me A Coffee/public/images/500b9f3362e0118cbb93024190207942.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/52065af5108f9ee380564a58d713ea9c.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/52065af5108f9ee380564a58d713ea9c.jpg@300w_0e.jpg new file mode 100644 index 0000000..21981df Binary files /dev/null and b/Buy Me A Coffee/public/images/52065af5108f9ee380564a58d713ea9c.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/5aa39b9e54efd9125b7de0cfba3b4d4d.png@300w_0e.jpg b/Buy Me A Coffee/public/images/5aa39b9e54efd9125b7de0cfba3b4d4d.png@300w_0e.jpg new file mode 100644 index 0000000..512906e Binary files /dev/null and b/Buy Me A Coffee/public/images/5aa39b9e54efd9125b7de0cfba3b4d4d.png@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/67f31e0864cbe5686d330fce51d2aedf.png@300w_0e.jpg b/Buy Me A Coffee/public/images/67f31e0864cbe5686d330fce51d2aedf.png@300w_0e.jpg new file mode 100644 index 0000000..dc1c833 Binary files /dev/null and b/Buy Me A Coffee/public/images/67f31e0864cbe5686d330fce51d2aedf.png@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/6c7e6522ea1fca5dde612b64fc30af5c.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/6c7e6522ea1fca5dde612b64fc30af5c.jpg@300w_0e.jpg new file mode 100644 index 0000000..e848cf2 Binary files /dev/null and b/Buy Me A Coffee/public/images/6c7e6522ea1fca5dde612b64fc30af5c.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/918dc13f5113bc239b1e61414db59177.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/918dc13f5113bc239b1e61414db59177.jpg@300w_0e.jpg new file mode 100644 index 0000000..8994b23 Binary files /dev/null and b/Buy Me A Coffee/public/images/918dc13f5113bc239b1e61414db59177.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/9fcd8d2b32ac48444bd6a682c5a67ebb.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/9fcd8d2b32ac48444bd6a682c5a67ebb.jpg@300w_0e.jpg new file mode 100644 index 0000000..dfa6f1b Binary files /dev/null and b/Buy Me A Coffee/public/images/9fcd8d2b32ac48444bd6a682c5a67ebb.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/AO.jfif b/Buy Me A Coffee/public/images/AO.jfif new file mode 100644 index 0000000..9677d1d Binary files /dev/null and b/Buy Me A Coffee/public/images/AO.jfif differ diff --git a/Buy Me A Coffee/public/images/abf02d8c433f9b9b36272b48e66ceba8.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/abf02d8c433f9b9b36272b48e66ceba8.jpg@300w_0e.jpg new file mode 100644 index 0000000..1d6e18b Binary files /dev/null and b/Buy Me A Coffee/public/images/abf02d8c433f9b9b36272b48e66ceba8.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/about-bg.png b/Buy Me A Coffee/public/images/about-bg.png new file mode 100644 index 0000000..b89ad86 Binary files /dev/null and b/Buy Me A Coffee/public/images/about-bg.png differ diff --git a/Buy Me A Coffee/public/images/ac7015e6f13636e13fb1db44bd92d1a8.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/ac7015e6f13636e13fb1db44bd92d1a8.jpg@300w_0e.jpg new file mode 100644 index 0000000..4e70bd9 Binary files /dev/null and b/Buy Me A Coffee/public/images/ac7015e6f13636e13fb1db44bd92d1a8.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/ad51e2567ce386ee073fb18f11591285.png@300w_0e.jpg b/Buy Me A Coffee/public/images/ad51e2567ce386ee073fb18f11591285.png@300w_0e.jpg new file mode 100644 index 0000000..f2e742c Binary files /dev/null and b/Buy Me A Coffee/public/images/ad51e2567ce386ee073fb18f11591285.png@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/afbbbd8d60495bdec56bb34a582b11fc.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/afbbbd8d60495bdec56bb34a582b11fc.jpg@300w_0e.jpg new file mode 100644 index 0000000..29a5e7b Binary files /dev/null and b/Buy Me A Coffee/public/images/afbbbd8d60495bdec56bb34a582b11fc.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/apple-logo.png b/Buy Me A Coffee/public/images/apple-logo.png new file mode 100644 index 0000000..31fa44e Binary files /dev/null and b/Buy Me A Coffee/public/images/apple-logo.png differ diff --git a/Buy Me A Coffee/public/images/b1f5e9f78a48d0bdd36efd89d33de61e.jpeg@300w_0e.jpg b/Buy Me A Coffee/public/images/b1f5e9f78a48d0bdd36efd89d33de61e.jpeg@300w_0e.jpg new file mode 100644 index 0000000..1a021f7 Binary files /dev/null and b/Buy Me A Coffee/public/images/b1f5e9f78a48d0bdd36efd89d33de61e.jpeg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/bmc-logo.svg b/Buy Me A Coffee/public/images/bmc-logo.svg new file mode 100644 index 0000000..5ba6db9 --- /dev/null +++ b/Buy Me A Coffee/public/images/bmc-logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/Buy Me A Coffee/public/images/c07dde95e8e9264a3b3e4423f9fa28b1.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/c07dde95e8e9264a3b3e4423f9fa28b1.jpg@300w_0e.jpg new file mode 100644 index 0000000..05529c0 Binary files /dev/null and b/Buy Me A Coffee/public/images/c07dde95e8e9264a3b3e4423f9fa28b1.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/c1dbcaa3bf4d76fbb090756e67642fcd.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/c1dbcaa3bf4d76fbb090756e67642fcd.jpg@300w_0e.jpg new file mode 100644 index 0000000..f8f32f2 Binary files /dev/null and b/Buy Me A Coffee/public/images/c1dbcaa3bf4d76fbb090756e67642fcd.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/c57d1a414cf8382e84d92cc12e328c14.png@300w_0e.jpg b/Buy Me A Coffee/public/images/c57d1a414cf8382e84d92cc12e328c14.png@300w_0e.jpg new file mode 100644 index 0000000..9f55614 Binary files /dev/null and b/Buy Me A Coffee/public/images/c57d1a414cf8382e84d92cc12e328c14.png@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/c6e5b3cdfc172304e71332471c857bde.jpeg@300w_0e.jpg b/Buy Me A Coffee/public/images/c6e5b3cdfc172304e71332471c857bde.jpeg@300w_0e.jpg new file mode 100644 index 0000000..40dd95f Binary files /dev/null and b/Buy Me A Coffee/public/images/c6e5b3cdfc172304e71332471c857bde.jpeg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/c8c1818ace00d219ffabb502488751a1.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/c8c1818ace00d219ffabb502488751a1.jpg@300w_0e.jpg new file mode 100644 index 0000000..ca7d22e Binary files /dev/null and b/Buy Me A Coffee/public/images/c8c1818ace00d219ffabb502488751a1.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/d1dcf12336309e1a95607d2911bbe003.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/d1dcf12336309e1a95607d2911bbe003.jpg@300w_0e.jpg new file mode 100644 index 0000000..a6169a8 Binary files /dev/null and b/Buy Me A Coffee/public/images/d1dcf12336309e1a95607d2911bbe003.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/db6092827c76c116dfc3699b7aaeda94.png@300w_0e.jpg b/Buy Me A Coffee/public/images/db6092827c76c116dfc3699b7aaeda94.png@300w_0e.jpg new file mode 100644 index 0000000..8e1802e Binary files /dev/null and b/Buy Me A Coffee/public/images/db6092827c76c116dfc3699b7aaeda94.png@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/e6e0576b382a634ec565a912630856ff.png@300w_0e.jpg b/Buy Me A Coffee/public/images/e6e0576b382a634ec565a912630856ff.png@300w_0e.jpg new file mode 100644 index 0000000..4959010 Binary files /dev/null and b/Buy Me A Coffee/public/images/e6e0576b382a634ec565a912630856ff.png@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/e89f37b98084a15966bec5db2319967f.png@300w_0e.jpg b/Buy Me A Coffee/public/images/e89f37b98084a15966bec5db2319967f.png@300w_0e.jpg new file mode 100644 index 0000000..7ae3b4c Binary files /dev/null and b/Buy Me A Coffee/public/images/e89f37b98084a15966bec5db2319967f.png@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/extras-new.png b/Buy Me A Coffee/public/images/extras-new.png new file mode 100644 index 0000000..d5feed8 Binary files /dev/null and b/Buy Me A Coffee/public/images/extras-new.png differ diff --git a/Buy Me A Coffee/public/images/fGQqf1EXwCjvZWrR.jpg@300w_0e.jpg b/Buy Me A Coffee/public/images/fGQqf1EXwCjvZWrR.jpg@300w_0e.jpg new file mode 100644 index 0000000..add4ab4 Binary files /dev/null and b/Buy Me A Coffee/public/images/fGQqf1EXwCjvZWrR.jpg@300w_0e.jpg differ diff --git a/Buy Me A Coffee/public/images/facebook.png b/Buy Me A Coffee/public/images/facebook.png new file mode 100644 index 0000000..1eb64d2 Binary files /dev/null and b/Buy Me A Coffee/public/images/facebook.png differ diff --git a/Buy Me A Coffee/public/images/google.png b/Buy Me A Coffee/public/images/google.png new file mode 100644 index 0000000..494aced Binary files /dev/null and b/Buy Me A Coffee/public/images/google.png differ diff --git a/Buy Me A Coffee/public/images/membership-new.png b/Buy Me A Coffee/public/images/membership-new.png new file mode 100644 index 0000000..f7d4e41 Binary files /dev/null and b/Buy Me A Coffee/public/images/membership-new.png differ diff --git a/Buy Me A Coffee/public/images/onetime-support-new.png b/Buy Me A Coffee/public/images/onetime-support-new.png new file mode 100644 index 0000000..3adfcec Binary files /dev/null and b/Buy Me A Coffee/public/images/onetime-support-new.png differ diff --git a/Buy Me A Coffee/public/images/twitter.png b/Buy Me A Coffee/public/images/twitter.png new file mode 100644 index 0000000..eb76313 Binary files /dev/null and b/Buy Me A Coffee/public/images/twitter.png differ diff --git a/Buy Me A Coffee/style.css b/Buy Me A Coffee/style.css new file mode 100644 index 0000000..abed244 --- /dev/null +++ b/Buy Me A Coffee/style.css @@ -0,0 +1,2174 @@ +html, +body { + margin: 0%; + padding: 0%; + overflow-x: hidden; +} + +/* .icon__logo { + width: 1rem; + max-height: 2rem; +} + +nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 20vh; + margin-bottom: 1rem; +} +.nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 80vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + +a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue"; + font-weight: 500; + font-size: 0.8rem; + /* font-display: bold; */ + box-sizing: border-box; +} + +.donation__img__1 { + display: flex; + align-items: center; + justify-content: center; +} + +.faq, +.creator { + position: relative; +} +.faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 3rem; + left: -84%; + opacity: 0; + top: -20%; + z-index: 9; + transition: all ease-in 400ms; +} +.faq:hover::after { + opacity: 0.3; +} + +.creator::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 7rem; + left: -9%; + opacity: 0; + top: -20%; + z-index: 9; + transition: all ease-in 400ms; +} +.creator:hover::after { + opacity: 0.3; +} + +.left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 4rem; +} + +.right__nav { + display: flex; + gap: 3rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ +} + +.login { + position: relative; + width: 3rem; +} +.login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 3rem; + left: -29%; + opacity: 0; + top: -16%; + z-index: 9; + transition: all ease-in 400ms; +} + +.login:hover::after { + opacity: 0.3; +} +.signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4.5rem; + text-align: center; + text-align: center; + /* margin-left: 2rem; */ +} +.signup:hover { + border: 1px #ffdd00 solid; +} + +.sub__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 1.3rem; + /* color: lightgrey; */ + font-weight: 400; + margin-top: -2rem; +} + +@media screen and (min-width: 300px) and (max-width: 499px) { + .hide { + visibility: hidden; + } + + .icon__logo { + width: 2rem; + max-height: 3rem; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + margin-bottom: 3rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 7rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 80vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + /* padding: 1rem; */ + width: 2rem; + left: -80%; + opacity: 0; + top: -29%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4.5rem; + outline: none; + text-align: center; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 2rem; + padding: 1rem; + font-weight: 450; + } + .sub__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + + /* color: lightgrey; */ + font-weight: 400; + padding: 1rem 2rem; + } + .form__header { + /* width: 20vw; */ + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + text-align: center; + margin-bottom: 2rem; + padding-top: 1rem; + padding-bottom: 1rem; + border-radius: 1rem; + /* background-color: red; */ + padding-left: 0.4rem; + padding-right: 0.4rem; + box-shadow: 8px 9px 33px -7px lightgrey; + width: 89%; + margin-left: 1rem; + } + .form__header > input { + border: none; + outline: none; + width: 8rem; + } + .start__page { + width: 22rem; + margin-left: 1rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 400; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + } + .lower__title { + /* align-items: center; */ + font-size: 1.1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-weight: 400; + text-align: center; + margin-top: 1rem; + } + .body__upper { + /* padding: 1rem; */ + padding-bottom: 2rem; + } + .donation { + background-color: #fffce6; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .donation__header { + color: lightslategray; + text-align: center; + font-size: 0.9rem; + } + .subheader__donation { + font-size: 1.3rem; + text-align: center; + font-weight: 600; + padding: 1rem; + } + .sub__sub__header { + font-size: 0.8rem; + font-weight: 400; + padding: 1rem; + text-align: center; + } + .img__1 { + width: 20rem; + max-height: 20rem; + margin-bottom: 5rem; + } + #img__2, + #img__1, + #img__3 { + margin-left: 1rem; + } + #img__3 { + padding-bottom: 0rem; + } + .creator { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .header__creator__1 { + text-align: center; + } + .stroke__gradient { + width: 6rem; + } + .header__creator__1 { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.4rem; + font-size: 1.9rem; + padding-bottom: 5rem; + } + .stroke__creator { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 1rem; + } + .svg__flex { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + gap: 2rem; + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .start_my_page { + width: 18rem; + margin-left: 1rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 600; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + margin-top: 3rem; + } + .free { + font-weight: 300; + } + .lower__text { + text-align: center; + font-size: 0.9rem; + font-weight: 300; + margin-top: -1rem; + padding-bottom: 2rem; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 42%; + + background-color: white; + padding: 1rem; + } +} + +/* ================================================================ */ + +@media screen and (min-width: 500px) and (max-width: 699px) { + .hide { + visibility: hidden; + } + + .icon__logo { + width: 2rem; + max-height: 3rem; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + margin-bottom: 3rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 7rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 80vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + /* padding: 1rem; */ + width: 2rem; + left: -80%; + opacity: 0; + top: -29%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4.5rem; + outline: none; + text-align: center; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 2rem; + padding: 1rem; + font-weight: 450; + } + .sub__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + + /* color: lightgrey; */ + font-weight: 400; + padding: 1rem 2rem; + } + .form__header { + /* width: 20vw; */ + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + text-align: center; + margin-bottom: 2rem; + padding-top: 1rem; + padding-bottom: 1rem; + border-radius: 1rem; + /* background-color: red; */ + padding-left: 0.4rem; + padding-right: 0.4rem; + box-shadow: 8px 9px 33px -7px lightgrey; + width: 89%; + margin-left: 1rem; + } + .form__header > input { + border: none; + outline: none; + width: 8rem; + } + .start__page { + width: 32rem; + margin-left: 1rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 400; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + } + .lower__title { + /* align-items: center; */ + font-size: 1.1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-weight: 400; + text-align: center; + margin-top: 1rem; + } + .body__upper { + /* padding: 1rem; */ + padding-bottom: 2rem; + } + .donation { + background-color: #fffce6; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .donation__header { + color: lightslategray; + text-align: center; + font-size: 0.9rem; + } + .subheader__donation { + font-size: 1.3rem; + text-align: center; + font-weight: 600; + padding: 1rem; + } + .sub__sub__header { + font-size: 0.8rem; + font-weight: 400; + padding: 1rem; + text-align: center; + } + .img__1 { + width: 30rem; + max-height: 30rem; + margin-bottom: 5rem; + } + #img__2, + #img__1, + #img__3 { + margin-left: 1rem; + } + #img__3 { + padding-bottom: 0rem; + } + .creator { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .header__creator__1 { + text-align: center; + } + .stroke__gradient { + width: 6rem; + } + .header__creator__1 { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.4rem; + font-size: 1.9rem; + padding-bottom: 3rem; + } + .stroke__creator { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 1rem; + } + .svg__flex { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + gap: 2rem; + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .start_my_page { + width: 18rem; + margin-left: 1rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 600; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + margin-top: 3rem; + } + .free { + font-weight: 300; + } + .lower__text { + text-align: center; + font-size: 0.9rem; + font-weight: 300; + margin-top: -1rem; + padding-bottom: 2rem; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -65%; + left: 45%; + + background-color: white; + padding: 1rem; + } +} + +/* ============================================================================== + */ + +@media screen and (min-width: 700px) and (max-width: 1000px) { + .hide { + visibility: hidden; + } + + .icon__logo { + width: 2rem; + max-height: 3rem; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + margin-bottom: 3rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 30rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 80vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + /* padding: 1rem; */ + width: 2rem; + left: -80%; + opacity: 0; + top: -29%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4.5rem; + outline: none; + text-align: center; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 4rem; + padding: 1rem; + font-weight: 450; + } + .sub__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.4rem; + + /* color: lightgrey; */ + font-weight: 400; + padding: 1rem 2rem; + } + .form__header { + /* width: 20vw; */ + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + text-align: center; + /* margin-bottom: 2rem; */ + padding-top: 1rem; + padding-bottom: 1rem; + border-radius: 1rem; + /* background-color: red; */ + padding-left: 0.4rem; + padding-right: 0.4rem; + box-shadow: 8px 9px 33px -7px lightgrey; + width: 55%; + margin-left: 1rem; + } + .flex__form { + display: flex; + align-items: center; + justify-content: center; + } + .form__header > input { + border: none; + outline: none; + width: 8rem; + } + .start__page { + width: 15rem; + margin-left: -6rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 400; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + } + .lower__title { + /* align-items: center; */ + font-size: 1.1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-weight: 400; + text-align: center; + margin-top: 1rem; + } + .body__upper { + /* padding: 1rem; */ + padding-bottom: 2rem; + } + .donation { + background-color: #fffce6; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .donation__header { + color: lightslategray; + text-align: center; + font-size: 1rem; + } + .subheader__donation { + font-size: 2rem; + text-align: center; + font-weight: 600; + padding: 1rem; + } + .sub__sub__header { + font-size: 1.2rem; + font-weight: 400; + padding: 1rem; + text-align: center; + } + .img__1 { + width: 45rem; + max-height: 50rem; + margin-bottom: 5rem; + object-fit: cover; + } + #img__2, + #img__1, + #img__3 { + margin-left: 1rem; + } + #img__3 { + padding-bottom: 0rem; + } + .creator { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .header__creator__1 { + text-align: center; + } + .stroke__gradient { + width: 12rem; + } + .header__creator__1 { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.4rem; + font-size: 3rem; + /* padding-bottom: 5rem; */ + } + .stroke__creator { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 1rem; + } + .svg__flex { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + gap: 2rem; + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .start_my_page { + width: 18rem; + margin-left: 1rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 600; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + margin-top: 3rem; + } + .free { + font-weight: 300; + } + .lower__text { + text-align: center; + font-size: 0.9rem; + font-weight: 300; + margin-top: -1rem; + padding-bottom: 2rem; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -171%; + left: 31%; + + background-color: white; + padding: 1rem; + } +} + +/* ===================================================================================== */ + +@media screen and (min-width: 1001px) and (max-width: 1080px) { + .hide { + visibility: hidden; + } + + .icon__logo { + width: 2rem; + max-height: 3rem; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + margin-bottom: 3rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 30rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 80vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + /* padding: 1rem; */ + width: 2rem; + left: -80%; + opacity: 0; + top: -29%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4.5rem; + outline: none; + text-align: center; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 4rem; + padding: 1rem; + font-weight: 450; + } + .sub__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.4rem; + + /* color: lightgrey; */ + font-weight: 400; + padding: 1rem 2rem; + } + .form__header { + /* width: 20vw; */ + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + text-align: center; + /* margin-bottom: 2rem; */ + padding-top: 1rem; + padding-bottom: 1rem; + border-radius: 1rem; + /* background-color: red; */ + padding-left: 0.4rem; + padding-right: 0.4rem; + box-shadow: 8px 9px 33px -7px lightgrey; + width: 55%; + margin-left: 1rem; + } + .flex__form { + display: flex; + align-items: center; + justify-content: center; + } + .form__header > input { + border: none; + outline: none; + width: 8rem; + } + .start__page { + width: 15rem; + margin-left: -6rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 400; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + } + .lower__title { + /* align-items: center; */ + font-size: 1.1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-weight: 400; + text-align: center; + margin-top: 1rem; + } + .body__upper { + /* padding: 1rem; */ + padding-bottom: 2rem; + } + .donation { + background-color: #fffce6; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .donation__header { + color: lightslategray; + text-align: center; + font-size: 1rem; + } + .subheader__donation { + font-size: 2rem; + text-align: center; + font-weight: 600; + padding: 1rem; + } + .sub__sub__header { + font-size: 1.2rem; + font-weight: 400; + padding: 1rem; + text-align: center; + } + .img__1 { + width: 60rem; + max-height: 50rem; + margin-bottom: 5rem; + object-fit: cover; + } + #img__2, + #img__1, + #img__3 { + margin-left: 1rem; + } + #img__3 { + padding-bottom: 0rem; + } + .creator { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .header__creator__1 { + text-align: center; + } + .stroke__gradient { + width: 12rem; + } + .header__creator__1 { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.4rem; + font-size: 3rem; + /* padding-bottom: 5rem; */ + } + .stroke__creator { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 1rem; + } + .svg__flex { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + gap: 2rem; + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .start_my_page { + width: 18rem; + margin-left: 1rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 600; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + margin-top: 3rem; + } + .free { + font-weight: 300; + } + .lower__text { + text-align: center; + font-size: 0.9rem; + font-weight: 300; + margin-top: -1rem; + padding-bottom: 2rem; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -173%; + left: 35%; + + background-color: white; + padding: 1rem; + } +} + +/* ======================================================================= */ + +@media screen and (min-width: 1081px) and (max-width: 1299px) { + .hide { + visibility: hidden; + } + + .icon__logo { + width: 2rem; + max-height: 3rem; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + margin-bottom: 3rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 30rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 80vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + /* padding: 1rem; */ + width: 2rem; + left: -80%; + opacity: 0; + top: -29%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4.5rem; + outline: none; + text-align: center; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 4rem; + padding: 1rem; + font-weight: 450; + } + .sub__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.4rem; + + /* color: lightgrey; */ + font-weight: 400; + padding: 1rem 2rem; + } + .form__header { + /* width: 20vw; */ + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + text-align: center; + /* margin-bottom: 2rem; */ + padding-top: 1rem; + padding-bottom: 1rem; + border-radius: 1rem; + /* background-color: red; */ + padding-left: 0.4rem; + padding-right: 0.4rem; + box-shadow: 8px 9px 33px -7px lightgrey; + width: 55%; + margin-left: 1rem; + } + .flex__form { + display: flex; + align-items: center; + justify-content: center; + } + .form__header > input { + border: none; + outline: none; + width: 8rem; + } + .start__page { + width: 15rem; + margin-left: -6rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 400; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + } + .lower__title { + /* align-items: center; */ + font-size: 1.1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-weight: 400; + text-align: center; + margin-top: 1rem; + } + .body__upper { + /* padding: 1rem; */ + padding-bottom: 2rem; + } + .donation { + background-color: #fffce6; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .donation__header { + color: lightslategray; + text-align: center; + font-size: 1rem; + } + .subheader__donation { + font-size: 2rem; + text-align: center; + font-weight: 600; + padding: 1rem; + } + .sub__sub__header { + font-size: 1.2rem; + font-weight: 400; + padding: 1rem; + text-align: center; + } + .img__1 { + width: 60rem; + max-height: 50rem; + margin-bottom: 5rem; + object-fit: cover; + } + #img__2, + #img__1, + #img__3 { + margin-left: 13rem; + } + #img__3 { + padding-bottom: 0rem; + } + .creator { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .header__creator__1 { + text-align: center; + } + .stroke__gradient { + width: 12rem; + } + .header__creator__1 { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.4rem; + font-size: 3rem; + /* padding-bottom: 5rem; */ + } + .stroke__creator { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 1rem; + } + .svg__flex { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + gap: 2rem; + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .start_my_page { + width: 18rem; + margin-left: 1rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 600; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + margin-top: 3rem; + } + .free { + font-weight: 300; + } + .lower__text { + text-align: center; + font-size: 0.9rem; + font-weight: 300; + margin-top: -1rem; + padding-bottom: 2rem; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -179%; + left: 38%; + + background-color: white; + padding: 1rem; + } +} + +/* ============================================================= */ + +@media screen and (min-width: 1300px) { + .hide { + visibility: hidden; + } + + .icon__logo { + width: 2rem; + max-height: 3rem; + } + + nav { + display: flex; + align-items: center; + justify-content: center; + max-width: 100vw; + height: 6vh; + padding-top: 2rem; + margin-bottom: 3rem; + } + .nav__bar { + display: flex; + align-items: center; + justify-content: center; + gap: 30rem; + padding: 1rem 0; + background-color: rgb(255, 255, 255); + border-radius: 2rem; + width: 80vw; + margin-top: 1rem; + /* box-shadow: 1px 19px 30px -6px lightgrey; */ + } + a { + text-decoration: none; + color: black; + font-family: "system-ui,Circular Medium", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue"; + font-weight: 700; + /* font-display: bold; */ + box-sizing: border-box; + font-size: 0.8rem; + } + .faq, + .creator { + position: relative; + } + .faq::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + /* padding: 1rem; */ + width: 2rem; + left: -80%; + opacity: 0; + top: -29%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + .faq:hover::after { + opacity: 0.3; + } + + .left__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + } + + .right__nav { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + /* width: 20rem; */ + } + + .login { + position: relative; + width: 3rem; + } + .login::after { + content: ""; + position: absolute; + background-color: rgb(195, 201, 207); + border-radius: 3rem; + padding: 1rem; + width: 2rem; + left: -29%; + opacity: 0; + top: -28%; + z-index: 9; + /* transition: all ease-in 400ms; */ + } + + .login:hover::after { + opacity: 0.3; + } + .signup { + background-color: #ffdd00; + padding: 0.6rem; + transition: all ease-in 400ms; + border: none; + border-radius: 2rem; + box-sizing: border-box; + width: 4.5rem; + outline: none; + text-align: center; + /* margin-left: 2rem; */ + } + .signup:hover { + border: 1px #ffdd00 solid; + } + .header__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 4rem; + padding: 1rem; + font-weight: 450; + } + .sub__title { + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.4rem; + + /* color: lightgrey; */ + font-weight: 400; + padding: 1rem 2rem; + } + .form__header { + /* width: 20vw; */ + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + text-align: center; + /* margin-bottom: 2rem; */ + padding-top: 1rem; + padding-bottom: 1rem; + border-radius: 1rem; + /* background-color: red; */ + padding-left: 0.4rem; + padding-right: 0.4rem; + box-shadow: 8px 9px 33px -7px lightgrey; + width: 30%; + margin-left: 1rem; + } + .flex__form { + display: flex; + align-items: center; + justify-content: center; + } + .form__header > input { + border: none; + outline: none; + width: 8rem; + } + .start__page { + width: 15rem; + margin-left: -6rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 400; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + } + .lower__title { + /* align-items: center; */ + font-size: 1.1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-weight: 400; + text-align: center; + margin-top: 1rem; + } + .body__upper { + /* padding: 1rem; */ + padding-bottom: 2rem; + } + .donation { + background-color: #fffce6; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .donation__header { + color: lightslategray; + text-align: center; + font-size: 1rem; + } + .subheader__donation { + font-size: 2rem; + text-align: center; + font-weight: 600; + padding: 1rem; + } + .sub__sub__header { + font-size: 1.2rem; + font-weight: 400; + padding: 1rem; + text-align: center; + } + .img__1 { + width: 60rem; + max-height: 50rem; + margin-bottom: 5rem; + object-fit: cover; + } + + #img__3 { + padding-bottom: 0rem; + } + .creator { + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .header__creator__1 { + text-align: center; + } + .stroke__gradient { + width: 12rem; + } + .header__creator__1 { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.4rem; + font-size: 3rem; + /* padding-bottom: 5rem; */ + } + .stroke__creator { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 1rem; + } + .svg__flex { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + gap: 2rem; + font-size: 1.2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + } + .start_my_page { + width: 18rem; + margin-left: 1rem; + padding: 1rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1.2rem; + font-weight: 600; + border-radius: 2rem; + border: none; + outline: none; + background-color: #ffdd00; + margin-top: 3rem; + } + .free { + font-weight: 300; + } + .lower__text { + text-align: center; + font-size: 0.9rem; + font-weight: 300; + margin-top: -1rem; + padding-bottom: 2rem; + } + footer { + cursor: pointer; + } + .footer__flex { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + font-size: 1rem; + font-weight: 400; + gap: 2rem; + padding: 1rem; + } + .footer__container { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + } + .right__footer { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + .app__data { + display: none; + } + .app__data__active { + position: absolute; + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + z-index: 10; + top: -179%; + left: 42%; + + background-color: white; + padding: 1rem; + } +}