├── .gitignore ├── README.md ├── build ├── asset-manifest.json ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt └── static │ ├── css │ ├── main.e5ae9a6c.css │ └── main.e5ae9a6c.css.map │ ├── js │ ├── main.b44e377c.js │ ├── main.b44e377c.js.LICENSE.txt │ └── main.b44e377c.js.map │ └── media │ ├── home.7fc4253ec840bd813401.png │ ├── release1.0c482aba7d6da2c3e9bb.png │ ├── release2.d54e21ff9ecf711580c1.png │ ├── signup.12cb0fcd7fcce38eca10.png │ ├── super1.1fbdfb3ac7255099ffbb.png │ ├── super2.3dd3ef03cdf3bdd7f265.png │ ├── super3.190d195b791351c19c67.png │ └── super4.cb4b74964859a8dd6ecb.png ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── assets │ ├── clients1.png │ ├── clients2.png │ ├── clients3.png │ ├── clients4.png │ ├── clients5.png │ ├── eth1.png │ ├── eth2.png │ ├── home.png │ ├── icon.png │ ├── logo.png │ ├── release1.png │ ├── release2.png │ ├── signup.png │ ├── super1.png │ ├── super2.png │ ├── super3.png │ ├── super4.png │ └── supereth.png ├── components │ ├── Card.jsx │ ├── Clients.jsx │ ├── Footer.jsx │ ├── Free.jsx │ ├── Home.jsx │ ├── Like.jsx │ ├── Navbar.jsx │ ├── Release.jsx │ ├── ScrollToTop.jsx │ ├── Signup.jsx │ └── SuperRare.jsx ├── index.js └── sass │ ├── base │ └── _base.scss │ ├── components │ ├── _card.scss │ ├── _footer.scss │ ├── _navbar.scss │ └── _scrollToTop.scss │ ├── index.scss │ └── sections │ ├── _clients.scss │ ├── _free.scss │ ├── _home.scss │ ├── _like.scss │ ├── _release.scss │ ├── _signup.scss │ └── _superRare.scss └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "./static/css/main.e5ae9a6c.css", 4 | "main.js": "./static/js/main.b44e377c.js", 5 | "static/media/release1.png": "./static/media/release1.0c482aba7d6da2c3e9bb.png", 6 | "static/media/home.png": "./static/media/home.7fc4253ec840bd813401.png", 7 | "static/media/signup.png": "./static/media/signup.12cb0fcd7fcce38eca10.png", 8 | "static/media/release2.png": "./static/media/release2.d54e21ff9ecf711580c1.png", 9 | "static/media/super2.png": "./static/media/super2.3dd3ef03cdf3bdd7f265.png", 10 | "static/media/super4.png": "./static/media/super4.cb4b74964859a8dd6ecb.png", 11 | "static/media/super1.png": "./static/media/super1.1fbdfb3ac7255099ffbb.png", 12 | "static/media/super3.png": "./static/media/super3.190d195b791351c19c67.png", 13 | "index.html": "./index.html", 14 | "main.e5ae9a6c.css.map": "./static/css/main.e5ae9a6c.css.map", 15 | "main.b44e377c.js.map": "./static/js/main.b44e377c.js.map" 16 | }, 17 | "entrypoints": [ 18 | "static/css/main.e5ae9a6c.css", 19 | "static/js/main.b44e377c.js" 20 | ] 21 | } -------------------------------------------------------------------------------- /build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/favicon.ico -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/logo192.png -------------------------------------------------------------------------------- /build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/logo512.png -------------------------------------------------------------------------------- /build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /build/static/css/main.e5ae9a6c.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);:root{--orange:#ff8139;--pink:#ff3998;--green:#39ffa0;--red:#ff3939;--light-green:#edfff6;--light-orange:#fff0e8;--accent-color1:#fff;--accent-color2:#555;--accent-color3:#ccc;--card-color:#000;--background:#111;--font-family:"Inter",sans-serif}[data-theme=light]{--background:#fff;--accent-color1:#000;--accent-color2:#eee;--accent-color3:#777;--card-color:#eee}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}.app-container{background-color:#111;background-color:var(--background);font-family:Inter,sans-serif;font-family:var(--font-family);overflow-x:hidden;padding:2rem 4rem;transition:.5s ease-in-out}@media screen and (min-width:280px)and (max-width:1080px){.app-container{padding:0}}::-webkit-scrollbar{background-color:#111;width:.2rem}::-webkit-scrollbar-thumb{background-color:#ff8139;background-color:var(--orange)}.scrollToTop{align-items:center;background-clip:content-box,border-box;background-color:red;background-image:linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,0)),linear-gradient(101deg,#ff3998,#ff8139);background-image:linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,0)),linear-gradient(101deg,var(--pink),var(--orange));background-origin:border-box;border:3px solid transparent;border-radius:5rem;bottom:5%;box-shadow:inset 2px 1000px 1px #111;box-shadow:2px 1000px 1px var(--background) inset;cursor:pointer;display:flex;height:4rem;justify-content:center;opacity:0;position:fixed;right:5%;transition:.5s ease-in-out;visibility:hidden;width:4rem;z-index:100}.scrollToTop:hover{box-shadow:none}.scrollToTop a svg{color:#fff;color:var(--accent-color1);font-size:2rem}.visible{opacity:1;visibility:visible}nav{align-items:center;display:flex;justify-content:space-between}nav .brand-container .brand img{height:100%}nav .brand-container .toggle-container{display:none}nav .links-container .links{display:flex;gap:4rem;list-style-type:none}nav .links-container .links li .dark{color:#000}nav .links-container .links li .light{color:#ff0}nav .links-container .links li a{color:#ccc;color:var(--accent-color3);text-decoration:none}nav .links-container .links li:last-of-type a{color:#ff3998;color:var(--pink)}[data-theme=light] nav .brand-container .brand img{-webkit-filter:brightness(0);filter:brightness(0)}@media screen and (min-width:280px)and (max-width:1080px){nav{padding:1rem 2rem;position:relative}nav .brand-container{align-items:center;display:flex;justify-content:space-between;width:100%}nav .brand-container .brand img{height:1.5rem}nav .brand-container .toggle-container{color:#fff;color:var(--accent-color1);display:block;display:flex;flex-direction:row-reverse;gap:1rem;z-index:40}nav .brand-container .toggle-container .toggle{display:block;z-index:40}nav .links-container{align-items:center;background-image:linear-gradient(101deg,#ff3998,#ff8139);background-image:linear-gradient(101deg,var(--pink),var(--orange));display:flex;height:100vh;justify-content:center;opacity:0;position:absolute;right:0;top:0;transition:.5s ease-in-out;visibility:hidden;width:0;z-index:30}nav .links-container .links{flex-direction:column}nav .links-container .links li a{color:#111;color:var(--background)}nav .links-container .links li:last-of-type{display:none}nav .nav-visible{opacity:1;visibility:visible;width:60vw}}footer{display:flex;flex-direction:column;gap:5rem;margin:6rem 0}footer .upper{color:#ccc;color:var(--accent-color3);display:flex;justify-content:space-between}footer .upper .brand-container{display:flex;flex-direction:column;gap:1.5rem}footer .upper .brand-container ul{display:flex;gap:1rem;list-style-type:none}footer .upper .links{display:flex;gap:8rem}footer .upper .links .link{display:flex;flex-direction:column;gap:2rem}footer .upper .links .link h4{color:#fff;color:var(--accent-color1);text-transform:uppercase}footer .upper .links .link ul{display:flex;flex-direction:column;gap:1rem;list-style-type:none}footer .lower{display:flex;justify-content:space-between}footer .lower span{color:#ccc;color:var(--accent-color3)}[data-theme=light] footer .brand-container .brand img{-webkit-filter:brightness(0);filter:brightness(0)}@media screen and (min-width:280px)and (max-width:1080px){footer{gap:2rem;margin:0;padding:1rem 2rem}footer .upper{flex-direction:column;gap:2rem}footer .upper .links{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:1fr 1fr}footer .upper .links .link{gap:1rem}footer .lower{flex-direction:column;gap:1rem}}.card{background-color:#000;background-color:var(--card-color);border-radius:1rem;width:-webkit-max-content;width:max-content}.card-content{display:flex;flex-direction:column;gap:.5rem;padding:1rem}.card-content .card-heading{display:flex;justify-content:space-between}.card-content .card-heading .card-series{color:#ff8139;color:var(--orange);font-size:.7rem;text-transform:uppercase}.card-content .card-heading .card-top{color:#ccc;color:var(--accent-color3);font-size:.7rem;text-transform:uppercase}.card-content .card-details{color:#fff;color:var(--accent-color1);display:flex;justify-content:space-between}.card-content .card-details .card-price{display:flex;gap:1rem}.card-content .card-sub-details{display:flex;justify-content:space-between}.card-content .card-sub-details span{color:#ccc;color:var(--accent-color3);font-size:.9rem}.home{margin-top:6rem}.home .container{display:grid;font-size:32px;grid-template-columns:1fr 1fr}.home .container .content{align-items:flex-start;display:flex;flex-direction:column;gap:2rem;margin-top:3rem}.home .container .content .sub-title{color:#ff3998;color:var(--pink);letter-spacing:.1rem;text-transform:uppercase}.home .container .content .title{color:#fff;color:var(--accent-color1)}.home .container .content .description{color:#ccc;color:var(--accent-color3)}.home .container .content button{background-clip:content-box,border-box;background-color:#111;background-color:var(--background);background-image:linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,0)),linear-gradient(101deg,#ff3998,#ff8139);background-image:linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,0)),linear-gradient(101deg,var(--pink),var(--orange));background-origin:border-box;border:3px solid transparent;border-radius:2rem;box-shadow:0 0 6px 0 rgba(157,96,212,.5);box-shadow:inset 2px 1000px 1px #111;box-shadow:2px 1000px 1px var(--background) inset;color:#fff;color:var(--accent-color1);cursor:pointer;font-weight:700;padding:1rem 3rem;transition:.5s ease-in-out}.home .container .content button:hover{box-shadow:none}.home .container .image-container{position:relative;text-align:center;z-index:10}.home .container .image-container .ellipse-container .ellipse{-webkit-filter:blur(100px);filter:blur(100px);height:15rem;position:absolute;width:15rem;z-index:-1}.home .container .image-container .ellipse-container .pink{background-color:#ff3998;background-color:var(--pink);right:40%;top:40%}.home .container .image-container .ellipse-container .orange{background-color:#ff8139;background-color:var(--orange);bottom:40%;left:40%}@media screen and (min-width:280px)and (max-width:1080px){.home{margin-top:1rem;overflow-x:hidden;padding:1rem;position:relative}.home .container{font-size:16px;grid-template-columns:.7fr}.home .container .image-container{position:absolute;right:-10%;top:30%}.home .container .image-container .image img{height:10rem}.home .container .image-container .ellipse-container .ellipse{-webkit-filter:blur(30px);filter:blur(30px);height:6rem;width:6rem}.home .container .image-container .ellipse-container .pink{right:10%}.home .container .image-container .ellipse-container .orange{left:-5%}}.free{margin:5rem 0;position:relative}.free .container{background-color:#ff8139;background-color:var(--orange);border-radius:1rem;display:flex;height:25rem;overflow:hidden;position:relative;z-index:1}.free .container .background{z-index:-1}.free .container .background .ellipse{border-radius:100%;-webkit-filter:blur(100px);filter:blur(100px);height:100%;position:absolute;width:28rem}.free .container .background .pink{background-color:#ff3998;background-color:var(--pink);left:-15%;top:-10%}.free .container .background .green{background-color:#39ffa0;background-color:var(--green);right:-15%;top:-10%}.free .container .content{display:flex;flex-direction:column;font-size:1.3rem;gap:1.5rem;padding-left:5rem;padding-top:3rem;z-index:1}.free .container .content .title{font-size:2rem}.free .cards{display:flex;position:absolute;right:40%;top:-2rem}.free .cards .card1{font-size:.6rem;position:absolute;top:0;-webkit-transform:rotate(-10deg);transform:rotate(-10deg);z-index:3}.free .cards .card1 .card-image img{height:10rem;width:12rem}.free .cards .card2{font-size:.7rem;left:10rem;position:absolute;top:0;-webkit-transform:rotate(5deg);transform:rotate(5deg);z-index:2}.free .cards .card2 .card-image img{height:10rem}@media screen and (min-width:280px)and (max-width:1080px){.free{margin:0}.free .container{border-radius:0;height:40vh;padding:1rem 2rem}.free .container .background .pink{left:-70%}.free .container .background .green{right:-100%}.free .container .content{font-size:16px;gap:1rem;padding:0}.free .container .content .title{font-size:22px}.free .cards .card1,.free .cards .card2{zoom:.3}}.clients{padding:6rem 0}.clients .container .clients-container{display:grid;grid-template-columns:repeat(5,1fr);text-align:center}@media screen and (min-width:280px)and (max-width:1080px){.clients{padding:1rem 2rem}.clients .container .clients-container{gap:1rem;grid-template-columns:repeat(2,1fr);text-align:left}.clients .container .clients-container .client:nth-of-type(5){display:none}.clients .container .clients-container .client img{height:1.5rem}}.super-rare{display:flex;flex-direction:column;gap:2rem}.super-rare .title-container{display:flex;flex-direction:column;gap:1rem}.super-rare .title-container .title{color:#fff;color:var(--accent-color1);font-size:2.4rem}.super-rare .title-container .description{color:#ccc;color:var(--accent-color3)}.super-rare .title-container .description a{color:#ccc;color:var(--accent-color3);font-weight:700}.super-rare .cards{display:flex;gap:5rem;justify-content:space-evenly}@media screen and (min-width:280px)and (max-width:1080px){.super-rare{padding:1rem 2rem;width:100vw}.super-rare .cards{gap:2rem;justify-content:flex-start;overflow:auto;padding-left:1.5rem}.super-rare .cards::-webkit-scrollbar{display:none}.super-rare .cards .card{zoom:.7}}.releases{display:flex;flex-direction:column;gap:5rem;margin:5rem 0}.releases .release{border-radius:.5rem;display:grid;grid-template-columns:1fr 1fr}.releases .release .content{display:flex;flex-direction:column;gap:2rem;padding:5rem 8rem}.releases .release .content .title{font-size:2rem}.releases .release .content .description{font-size:1.3rem}.releases .release .content .description a{color:#000;font-weight:700}.releases .release .content .link{color:#000;display:flex;font-weight:700;gap:1rem;text-decoration:none}.releases .release .content .link svg{font-size:1.2rem}.releases .release .image{align-items:flex-end;display:flex;justify-content:center;overflow:hidden;position:relative;text-align:center;z-index:1}.releases .release .image img{height:24rem}.releases .release .image .ellipse{bottom:-40%;-webkit-filter:blur(100px);filter:blur(100px);height:20rem;position:absolute;right:0;width:20rem;z-index:-1}.releases .release .image .pink{background-color:#ff3998;background-color:var(--pink)}.releases .release .card-container{align-items:center;display:flex;justify-content:center;overflow:hidden;position:relative;z-index:1}.releases .release .card-container .card-image img{height:14rem}.releases .release .card-container .ellipse{bottom:-45%;-webkit-filter:blur(100px);filter:blur(100px);height:20rem;left:0;position:absolute;width:20rem;z-index:-1}.releases .orange,.releases .release .card-container .orange{background-color:#ff8139;background-color:var(--orange)}.releases .green{background-color:#39ffa0;background-color:var(--green)}@media screen and (min-width:280px)and (max-width:1080px){.releases{gap:0;margin:0}.releases .release{border-radius:0;gap:2rem;grid-template-columns:1fr;padding:1rem 2rem}.releases .release:first-of-type .image{grid-row:1}.releases .release .content{padding:0}.releases .release .card-container,.releases .release .image{zoom:.5}.releases .release .ellipse{display:none!important}}.signup{border-bottom:.1rem solid #fff;border-top:.1rem solid #fff;overflow-y:hidden;padding-top:4rem}.signup .container{display:grid;font-size:18px;grid-template-columns:1fr 1fr}.signup .container .content{align-items:flex-start;display:flex;flex-direction:column;gap:2rem;margin-top:3rem}.signup .container .content .sub-title{color:#ff3998;color:var(--pink);letter-spacing:.1rem;text-transform:uppercase}.signup .container .content .title{color:#fff;color:var(--accent-color1)}.signup .container .content .description{color:#ccc;color:var(--accent-color3)}.signup .container .content button{background-clip:content-box,border-box;background-color:#111;background-color:var(--background);background-image:linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,0)),linear-gradient(101deg,#ff3998,#ff8139);background-image:linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,0)),linear-gradient(101deg,var(--pink),var(--orange));background-origin:border-box;border:3px solid transparent;border-radius:2rem;box-shadow:0 0 6px 0 rgba(157,96,212,.5);box-shadow:inset 2px 1000px 1px #111;box-shadow:2px 1000px 1px var(--background) inset;color:#fff;color:var(--accent-color1);cursor:pointer;font-weight:700;padding:1rem 3rem;transition:.5s ease-in-out}.signup .container .content button:hover{box-shadow:none}.signup .container .image-container{position:relative;text-align:center;z-index:10}.signup .container .image-container .ellipse-container .ellipse{-webkit-filter:blur(100px);filter:blur(100px);height:15rem;position:absolute;width:15rem;z-index:-1}.signup .container .image-container .ellipse-container .pink{background-color:#ff3998;background-color:var(--pink);right:40%;top:40%}.signup .container .image-container .ellipse-container .orange{background-color:#ff8139;background-color:var(--orange);bottom:40%;left:40%}@media screen and (min-width:280px)and (max-width:1080px){.signup{margin-top:1rem;overflow-x:hidden;padding:1rem;position:relative}.signup .container{font-size:16px;grid-template-columns:.7fr}.signup .container .image-container{position:absolute;right:-5%;top:30%}.signup .container .image-container .image img{height:10rem}.signup .container .image-container .ellipse-container .ellipse{-webkit-filter:blur(30px);filter:blur(30px);height:6rem;width:6rem}.signup .container .image-container .ellipse-container .pink{right:10%}.signup .container .image-container .ellipse-container .orange{left:-5%}}.like{margin:5rem 0}.like .container{grid-gap:4rem;display:grid;gap:4rem;grid-template-columns:1fr 1fr}.like .container .content{background-color:#555;background-color:var(--accent-color2);border-radius:2rem;display:flex;flex-direction:column;gap:2rem;padding:3rem}.like .container .content .title{color:#fff;color:var(--accent-color1)}.like .container .content .description{color:#ccc;color:var(--accent-color3);letter-spacing:.1rem;line-height:1.5rem}@media screen and (min-width:280px)and (max-width:1080px){.like{margin:0}.like .container{gap:0;grid-template-columns:1fr}.like .container .content{border-radius:0;padding:1rem 2rem}.like .container .content:nth-of-type(2){background-color:#111;background-color:var(--background)}} 2 | /*# sourceMappingURL=main.e5ae9a6c.css.map*/ -------------------------------------------------------------------------------- /build/static/css/main.e5ae9a6c.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/css/main.e5ae9a6c.css","mappings":"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","sources":["sass/base/_base.scss","sass/components/_scrollToTop.scss","sass/components/_navbar.scss","sass/components/_footer.scss","sass/components/_card.scss","sass/sections/_home.scss","sass/sections/_free.scss","sass/sections/_clients.scss","sass/sections/_superRare.scss","sass/sections/_release.scss","sass/sections/_signup.scss","sass/sections/_like.scss"],"sourcesContent":["@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\");\n:root {\n --orange: #ff8139;\n --pink: #ff3998;\n --green: #39ffa0;\n --red: #ff3939;\n --light-green: #edfff6;\n --light-orange: #fff0e8;\n --accent-color1: #ffffff;\n --accent-color2: #555555;\n --accent-color3: #cccccc;\n --card-color: #000000;\n --background: #111111;\n --font-family: \"Inter\", sans-serif;\n}\n\n[data-theme=\"light\"] {\n --background: #ffffff;\n --accent-color1: #000000;\n --accent-color2: #eeeeee;\n --accent-color3: #777777;\n --card-color: #eeeeee;\n}\n\n* {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n.app-container {\n background-color: var(--background);\n font-family: var(--font-family);\n overflow-x: hidden;\n transition: 0.5s ease-in-out;\n padding: 2rem 4rem;\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n padding: 0;\n }\n}\n\n::-webkit-scrollbar {\n background-color: #111111;\n width: 0.2rem;\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--orange);\n}\n",".scrollToTop {\n visibility: hidden;\n opacity: 0;\n transition: 0.5s ease-in-out;\n z-index: 100;\n position: fixed;\n bottom: 5%;\n right: 5%;\n border-radius: 5rem;\n background-color: red;\n height: 4rem;\n width: 4rem;\n border: solid 3px transparent;\n background-image: linear-gradient(\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0)\n ),\n linear-gradient(101deg, var(--pink), var(--orange));\n background-origin: border-box;\n background-clip: content-box, border-box;\n box-shadow: 2px 1000px 1px var(--background) inset;\n transition: 0.5s ease-in-out;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n &:hover {\n box-shadow: none;\n }\n a {\n svg {\n font-size: 2rem;\n color: var(--accent-color1);\n }\n }\n}\n\n.visible {\n visibility: visible;\n opacity: 1;\n}\n","nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .brand-container {\n .brand {\n img {\n height: 100%;\n }\n }\n .toggle-container {\n display: none;\n .toggle {\n }\n .mode {\n }\n }\n }\n .links-container {\n .links {\n list-style-type: none;\n display: flex;\n gap: 4rem;\n li {\n .dark {\n color: black;\n }\n .light {\n color: yellow;\n }\n a {\n color: var(--accent-color3);\n text-decoration: none;\n }\n &:last-of-type {\n a {\n color: var(--pink);\n }\n }\n }\n }\n }\n}\n\n[data-theme=\"light\"] {\n nav {\n .brand-container {\n .brand {\n img {\n filter: brightness(0);\n }\n }\n }\n }\n}\n\n@media screen and (min-width: 280px) and (max-width: 1080px) {\n nav {\n position: relative;\n padding: 1rem 2rem;\n .brand-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n .brand {\n img {\n height: 1.5rem;\n }\n }\n .toggle-container {\n display: block;\n color: var(--accent-color1);\n display: flex;\n flex-direction: row-reverse;\n gap: 1rem;\n z-index: 40;\n .toggle {\n z-index: 40;\n display: block;\n }\n }\n }\n .links-container {\n z-index: 30;\n background-image: linear-gradient(101deg, var(--pink), var(--orange));\n height: 100vh;\n position: absolute;\n top: 0;\n right: 0;\n opacity: 0;\n width: 0;\n visibility: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.5s ease-in-out;\n .links {\n flex-direction: column;\n li {\n a {\n color: var(--background);\n }\n &:last-of-type {\n display: none;\n }\n }\n }\n }\n .nav-visible {\n width: 60vw;\n visibility: visible;\n opacity: 1;\n }\n }\n}\n","footer {\n margin: 6rem 0;\n display: flex;\n flex-direction: column;\n gap: 5rem;\n .upper {\n display: flex;\n justify-content: space-between;\n color: var(--accent-color3);\n .brand-container {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n .brand {\n img {\n }\n }\n p {\n }\n ul {\n list-style-type: none;\n display: flex;\n gap: 1rem;\n li {\n }\n }\n }\n .links {\n display: flex;\n gap: 8rem;\n .link {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n h4 {\n color: var(--accent-color1);\n text-transform: uppercase;\n }\n ul {\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n li {\n }\n }\n }\n }\n }\n .lower {\n display: flex;\n justify-content: space-between;\n span {\n color: var(--accent-color3);\n }\n }\n}\n\n[data-theme=\"light\"] {\n footer {\n .brand-container {\n .brand {\n img {\n filter: brightness(0);\n }\n }\n }\n }\n}\n\n@media screen and (min-width: 280px) and (max-width: 1080px) {\n footer {\n margin: 0;\n gap: 2rem;\n padding: 1rem 2rem;\n .upper {\n flex-direction: column;\n gap: 2rem;\n .links {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n .link {\n gap: 1rem;\n }\n }\n }\n .lower {\n flex-direction: column;\n gap: 1rem;\n }\n }\n}\n",".card {\n background-color: var(--card-color);\n width: max-content;\n border-radius: 1rem;\n &-image {\n img {\n }\n }\n &-content {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 1rem;\n .card-heading {\n display: flex;\n justify-content: space-between;\n .card-series {\n color: var(--orange);\n text-transform: uppercase;\n font-size: 0.7rem;\n }\n .card-top {\n color: var(--accent-color3);\n text-transform: uppercase;\n font-size: 0.7rem;\n }\n }\n .card-details {\n display: flex;\n justify-content: space-between;\n color: var(--accent-color1);\n .card-title {\n }\n .card-price {\n display: flex;\n gap: 1rem;\n img {\n }\n h4 {\n }\n }\n }\n .card-sub-details {\n display: flex;\n justify-content: space-between;\n span {\n color: var(--accent-color3);\n font-size: 0.9rem;\n }\n }\n }\n}\n",".home {\n margin-top: 6rem;\n .container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n font-size: 32px;\n .content {\n margin-top: 3rem;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n align-items: flex-start;\n .sub-title {\n color: var(--pink);\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n }\n .title {\n color: var(--accent-color1);\n }\n .description {\n color: var(--accent-color3);\n }\n button {\n color: var(--accent-color1);\n background-color: var(--background);\n font-weight: bold;\n padding: 1rem 3rem;\n border-radius: 2rem;\n box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);\n border: solid 3px transparent;\n background-image: linear-gradient(\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0)\n ),\n linear-gradient(101deg, var(--pink), var(--orange));\n background-origin: border-box;\n background-clip: content-box, border-box;\n box-shadow: 2px 1000px 1px var(--background) inset;\n transition: 0.5s ease-in-out;\n cursor: pointer;\n &:hover {\n box-shadow: none;\n }\n }\n }\n .image-container {\n text-align: center;\n position: relative;\n z-index: 10;\n .image {\n img {\n }\n }\n .ellipse-container {\n .ellipse {\n z-index: -1;\n position: absolute;\n height: 15rem;\n width: 15rem;\n filter: blur(100px);\n }\n .pink {\n top: 40%;\n right: 40%;\n background-color: var(--pink);\n }\n .orange {\n bottom: 40%;\n left: 40%;\n background-color: var(--orange);\n }\n }\n }\n }\n}\n\n@media screen and (min-width: 280px) and (max-width: 1080px) {\n .home {\n padding: 1rem;\n position: relative;\n overflow-x: hidden;\n margin-top: 1rem;\n .container {\n font-size: 16px;\n grid-template-columns: 0.7fr;\n .image-container {\n position: absolute;\n right: -10%;\n top: 30%;\n .image {\n img {\n height: 10rem;\n }\n }\n .ellipse-container {\n .ellipse {\n height: 6rem;\n width: 6rem;\n filter: blur(30px);\n }\n .pink {\n right: 10%;\n }\n .orange {\n left: -5%;\n }\n }\n }\n }\n }\n}\n",".free {\n position: relative;\n margin: 5rem 0;\n .container {\n display: flex;\n background-color: var(--orange);\n position: relative;\n height: 25rem;\n border-radius: 1rem;\n overflow: hidden;\n z-index: 1;\n .background {\n z-index: -1;\n .ellipse {\n position: absolute;\n height: 100%;\n width: 28rem;\n border-radius: 100%;\n filter: blur(100px);\n }\n .pink {\n top: -10%;\n left: -15%;\n background-color: var(--pink);\n }\n .green {\n top: -10%;\n right: -15%;\n background-color: var(--green);\n }\n }\n .content {\n z-index: 1;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding-top: 3rem;\n padding-left: 5rem;\n font-size: 1.3rem;\n .image {\n img {\n }\n }\n .title {\n font-size: 2rem;\n }\n .description {\n }\n }\n }\n .cards {\n display: flex;\n position: absolute;\n top: -2rem;\n right: 40%;\n .card1 {\n top: 0;\n position: absolute;\n transform: rotate(-10deg);\n z-index: 3;\n font-size: 0.6rem;\n .card-image {\n img {\n height: 10rem;\n width: 12rem;\n }\n }\n }\n .card2 {\n top: 0;\n z-index: 2;\n position: absolute;\n left: 10rem;\n transform: rotate(5deg);\n font-size: 0.7rem;\n .card-image {\n img {\n height: 10rem;\n }\n }\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n margin: 0;\n .container {\n padding: 1rem 2rem;\n height: 40vh;\n border-radius: 0;\n .background {\n .pink {\n left: -70%;\n }\n .green {\n right: -100%;\n }\n }\n .content {\n padding: 0;\n font-size: 16px;\n gap: 1rem;\n .title {\n font-size: 22px;\n }\n }\n }\n .cards {\n .card1,\n .card2 {\n zoom: 0.3;\n }\n }\n }\n}\n",".clients {\n padding: 6rem 0;\n .container {\n .clients-container {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n text-align: center;\n .client {\n img {\n }\n }\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n padding: 1rem 2rem;\n .container {\n .clients-container {\n grid-template-columns: repeat(2, 1fr);\n text-align: left;\n gap: 1rem;\n\n .client {\n &:nth-of-type(5) {\n display: none;\n }\n img {\n height: 1.5rem;\n }\n }\n }\n }\n }\n}\n",".super-rare {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n .title-container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n .title {\n color: var(--accent-color1);\n font-size: 2.4rem;\n }\n .description {\n color: var(--accent-color3);\n a {\n color: var(--accent-color3);\n font-weight: bold;\n }\n }\n }\n .cards {\n display: flex;\n justify-content: space-evenly;\n gap: 5rem;\n }\n}\n\n@media screen and (min-width: 280px) and (max-width: 1080px) {\n .super-rare {\n padding: 1rem 2rem;\n width: 100vw;\n .cards {\n overflow: auto;\n justify-content: flex-start;\n gap: 2rem;\n padding-left: 1.5rem;\n &::-webkit-scrollbar {\n display: none;\n }\n .card {\n zoom: 0.7;\n }\n }\n }\n}\n",".releases {\n margin: 5rem 0;\n display: flex;\n flex-direction: column;\n gap: 5rem;\n .release {\n display: grid;\n grid-template-columns: 1fr 1fr;\n border-radius: 0.5rem;\n .content {\n padding: 5rem 8rem;\n\n display: flex;\n flex-direction: column;\n gap: 2rem;\n .title {\n font-size: 2rem;\n }\n .description {\n font-size: 1.3rem;\n a {\n color: black;\n font-weight: bold;\n }\n }\n .link {\n color: black;\n font-weight: bold;\n text-decoration: none;\n display: flex;\n gap: 1rem;\n svg {\n font-size: 1.2rem;\n }\n }\n }\n .image {\n position: relative;\n overflow: hidden;\n text-align: center;\n z-index: 1;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n img {\n height: 24rem;\n }\n .ellipse {\n z-index: -1;\n position: absolute;\n bottom: -40%;\n right: 0;\n height: 20rem;\n width: 20rem;\n filter: blur(100px);\n }\n .pink {\n background-color: var(--pink);\n }\n }\n .card-container {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n z-index: 1;\n overflow: hidden;\n .card-image {\n img {\n height: 14rem;\n }\n }\n .ellipse {\n z-index: -1;\n position: absolute;\n bottom: -45%;\n left: 0;\n height: 20rem;\n width: 20rem;\n filter: blur(100px);\n }\n .orange {\n background-color: var(--orange);\n }\n }\n }\n .orange {\n background-color: var(--orange);\n }\n .green {\n background-color: var(--green);\n }\n}\n\n@media screen and (min-width: 280px) and (max-width: 1080px) {\n .releases {\n margin: 0;\n gap: 0;\n .release {\n border-radius: 0;\n grid-template-columns: 1fr;\n padding: 1rem 2rem;\n gap: 2rem;\n &:nth-of-type(1) {\n .image {\n grid-row: 1;\n }\n }\n .content {\n padding: 0;\n }\n .image {\n zoom: 0.5;\n }\n .card-container {\n zoom: 0.5;\n }\n .ellipse {\n display: none !important;\n }\n }\n }\n}\n",".signup {\n border-top: 0.1rem solid white;\n border-bottom: 0.1rem solid white;\n padding-top: 4rem;\n overflow-y: hidden;\n .container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n font-size: 18px;\n .content {\n margin-top: 3rem;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n align-items: flex-start;\n .sub-title {\n color: var(--pink);\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n }\n .title {\n color: var(--accent-color1);\n }\n .description {\n color: var(--accent-color3);\n }\n button {\n color: var(--accent-color1);\n background-color: var(--background);\n font-weight: bold;\n padding: 1rem 3rem;\n border-radius: 2rem;\n box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);\n border: solid 3px transparent;\n background-image: linear-gradient(\n rgba(255, 255, 255, 0),\n rgba(255, 255, 255, 0)\n ),\n linear-gradient(101deg, var(--pink), var(--orange));\n background-origin: border-box;\n background-clip: content-box, border-box;\n box-shadow: 2px 1000px 1px var(--background) inset;\n transition: 0.5s ease-in-out;\n cursor: pointer;\n &:hover {\n box-shadow: none;\n }\n }\n }\n .image-container {\n text-align: center;\n position: relative;\n z-index: 10;\n .image {\n img {\n }\n }\n .ellipse-container {\n .ellipse {\n z-index: -1;\n position: absolute;\n height: 15rem;\n width: 15rem;\n filter: blur(100px);\n }\n .pink {\n top: 40%;\n right: 40%;\n background-color: var(--pink);\n }\n .orange {\n bottom: 40%;\n left: 40%;\n background-color: var(--orange);\n }\n }\n }\n }\n}\n\n@media screen and (min-width: 280px) and (max-width: 1080px) {\n .signup {\n padding: 1rem;\n position: relative;\n overflow-x: hidden;\n margin-top: 1rem;\n .container {\n font-size: 16px;\n grid-template-columns: 0.7fr;\n .image-container {\n position: absolute;\n right: -5%;\n top: 30%;\n .image {\n img {\n height: 10rem;\n }\n }\n .ellipse-container {\n .ellipse {\n height: 6rem;\n width: 6rem;\n filter: blur(30px);\n }\n .pink {\n right: 10%;\n }\n .orange {\n left: -5%;\n }\n }\n }\n }\n }\n}\n",".like {\n margin: 5rem 0;\n .container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n .content {\n background-color: var(--accent-color2);\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 3rem;\n border-radius: 2rem;\n .image {\n img {\n }\n }\n .title {\n color: var(--accent-color1);\n }\n .description {\n color: var(--accent-color3);\n letter-spacing: 0.1rem;\n line-height: 1.5rem;\n }\n }\n }\n}\n\n@media screen and (min-width: 280px) and (max-width: 1080px) {\n .like {\n margin: 0;\n .container {\n grid-template-columns: 1fr;\n gap: 0;\n .content {\n padding: 1rem 2rem;\n border-radius: 0;\n &:nth-of-type(2) {\n background-color: var(--background);\n }\n }\n }\n }\n}\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /build/static/js/main.b44e377c.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! @license Rematrix v0.3.0 8 | 9 | Copyright 2018 Julian Lloyd. 10 | 11 | Permission is hereby granted, free of charge, to any person obtaining a copy 12 | of this software and associated documentation files (the "Software"), to deal 13 | in the Software without restriction, including without limitation the rights 14 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 15 | copies of the Software, and to permit persons to whom the Software is 16 | furnished to do so, subject to the following conditions: 17 | 18 | The above copyright notice and this permission notice shall be included in 19 | all copies or substantial portions of the Software. 20 | 21 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 22 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 23 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 24 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 25 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 26 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 27 | THE SOFTWARE. 28 | */ 29 | 30 | /*! @license Tealight v0.3.6 31 | 32 | Copyright 2018 Fisssion LLC. 33 | 34 | Permission is hereby granted, free of charge, to any person obtaining a copy 35 | of this software and associated documentation files (the "Software"), to deal 36 | in the Software without restriction, including without limitation the rights 37 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 38 | copies of the Software, and to permit persons to whom the Software is 39 | furnished to do so, subject to the following conditions: 40 | 41 | The above copyright notice and this permission notice shall be included in all 42 | copies or substantial portions of the Software. 43 | 44 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 45 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 46 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 47 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 48 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 49 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 50 | SOFTWARE. 51 | 52 | */ 53 | 54 | /*! @license is-dom-node v1.0.4 55 | 56 | Copyright 2018 Fisssion LLC. 57 | 58 | Permission is hereby granted, free of charge, to any person obtaining a copy 59 | of this software and associated documentation files (the "Software"), to deal 60 | in the Software without restriction, including without limitation the rights 61 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 62 | copies of the Software, and to permit persons to whom the Software is 63 | furnished to do so, subject to the following conditions: 64 | 65 | The above copyright notice and this permission notice shall be included in all 66 | copies or substantial portions of the Software. 67 | 68 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 69 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 70 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 71 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 72 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 73 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 74 | SOFTWARE. 75 | 76 | */ 77 | 78 | /*! @license is-dom-node-list v1.2.1 79 | 80 | Copyright 2018 Fisssion LLC. 81 | 82 | Permission is hereby granted, free of charge, to any person obtaining a copy 83 | of this software and associated documentation files (the "Software"), to deal 84 | in the Software without restriction, including without limitation the rights 85 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 86 | copies of the Software, and to permit persons to whom the Software is 87 | furnished to do so, subject to the following conditions: 88 | 89 | The above copyright notice and this permission notice shall be included in all 90 | copies or substantial portions of the Software. 91 | 92 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 93 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 94 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 95 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 96 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 97 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 98 | SOFTWARE. 99 | 100 | */ 101 | 102 | /*! @license miniraf v1.0.0 103 | 104 | Copyright 2018 Fisssion LLC. 105 | 106 | Permission is hereby granted, free of charge, to any person obtaining a copy 107 | of this software and associated documentation files (the "Software"), to deal 108 | in the Software without restriction, including without limitation the rights 109 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 110 | copies of the Software, and to permit persons to whom the Software is 111 | furnished to do so, subject to the following conditions: 112 | 113 | The above copyright notice and this permission notice shall be included in all 114 | copies or substantial portions of the Software. 115 | 116 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 117 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 118 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 119 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 120 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 121 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 122 | SOFTWARE. 123 | 124 | */ 125 | 126 | /** @license React v0.20.2 127 | * scheduler.production.min.js 128 | * 129 | * Copyright (c) Facebook, Inc. and its affiliates. 130 | * 131 | * This source code is licensed under the MIT license found in the 132 | * LICENSE file in the root directory of this source tree. 133 | */ 134 | 135 | /** @license React v17.0.2 136 | * react-dom.production.min.js 137 | * 138 | * Copyright (c) Facebook, Inc. and its affiliates. 139 | * 140 | * This source code is licensed under the MIT license found in the 141 | * LICENSE file in the root directory of this source tree. 142 | */ 143 | 144 | /** @license React v17.0.2 145 | * react-jsx-runtime.production.min.js 146 | * 147 | * Copyright (c) Facebook, Inc. and its affiliates. 148 | * 149 | * This source code is licensed under the MIT license found in the 150 | * LICENSE file in the root directory of this source tree. 151 | */ 152 | 153 | /** @license React v17.0.2 154 | * react.production.min.js 155 | * 156 | * Copyright (c) Facebook, Inc. and its affiliates. 157 | * 158 | * This source code is licensed under the MIT license found in the 159 | * LICENSE file in the root directory of this source tree. 160 | */ 161 | -------------------------------------------------------------------------------- /build/static/media/home.7fc4253ec840bd813401.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/static/media/home.7fc4253ec840bd813401.png -------------------------------------------------------------------------------- /build/static/media/release1.0c482aba7d6da2c3e9bb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/static/media/release1.0c482aba7d6da2c3e9bb.png -------------------------------------------------------------------------------- /build/static/media/release2.d54e21ff9ecf711580c1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/static/media/release2.d54e21ff9ecf711580c1.png -------------------------------------------------------------------------------- /build/static/media/signup.12cb0fcd7fcce38eca10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/static/media/signup.12cb0fcd7fcce38eca10.png -------------------------------------------------------------------------------- /build/static/media/super1.1fbdfb3ac7255099ffbb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/static/media/super1.1fbdfb3ac7255099ffbb.png -------------------------------------------------------------------------------- /build/static/media/super2.3dd3ef03cdf3bdd7f265.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/static/media/super2.3dd3ef03cdf3bdd7f265.png -------------------------------------------------------------------------------- /build/static/media/super3.190d195b791351c19c67.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/static/media/super3.190d195b791351c19c67.png -------------------------------------------------------------------------------- /build/static/media/super4.cb4b74964859a8dd6ecb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/build/static/media/super4.cb4b74964859a8dd6ecb.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nft-website", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": ".", 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.2", 8 | "@testing-library/react": "^12.1.2", 9 | "@testing-library/user-event": "^13.5.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-icons": "^4.3.1", 13 | "react-scripts": "5.0.0", 14 | "sass": "^1.49.7", 15 | "scrollreveal": "^4.0.9", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import Clients from "./components/Clients"; 3 | import Footer from "./components/Footer"; 4 | import Free from "./components/Free"; 5 | import Home from "./components/Home"; 6 | import Like from "./components/Like"; 7 | import Navbar from "./components/Navbar"; 8 | import Release from "./components/Release"; 9 | import ScrollToTop from "./components/ScrollToTop"; 10 | import Signup from "./components/Signup"; 11 | import SuperRare from "./components/SuperRare"; 12 | import scrollreveal from "scrollreveal"; 13 | import "./sass/index.scss"; 14 | function App() { 15 | const [theme, setTheme] = useState("dark"); 16 | const changeTheme = () => { 17 | theme === "dark" ? setTheme("light") : setTheme("dark"); 18 | }; 19 | useEffect(() => { 20 | const registerAnimations = () => { 21 | const sr = scrollreveal({ 22 | origin: "bottom", 23 | distance: "80px", 24 | duration: 2000, 25 | reset: false, 26 | }); 27 | sr.reveal( 28 | ` 29 | nav, 30 | .home, 31 | .free, 32 | .clients, 33 | .super-rare, 34 | .releases, 35 | .like, 36 | .signup, 37 | footer 38 | `, 39 | { 40 | interval: 500, 41 | } 42 | ); 43 | }; 44 | registerAnimations(); 45 | }, []); 46 | window.setTimeout(() => { 47 | const home = document.getElementsByClassName("home"); 48 | home[0].style.transform = "none"; 49 | const nav = document.getElementsByTagName("nav"); 50 | nav[0].style.transform = "none"; 51 | }, 1500); 52 | return ( 53 |
54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
65 | ); 66 | } 67 | 68 | export default App; 69 | -------------------------------------------------------------------------------- /src/assets/clients1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/clients1.png -------------------------------------------------------------------------------- /src/assets/clients2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/clients2.png -------------------------------------------------------------------------------- /src/assets/clients3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/clients3.png -------------------------------------------------------------------------------- /src/assets/clients4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/clients4.png -------------------------------------------------------------------------------- /src/assets/clients5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/clients5.png -------------------------------------------------------------------------------- /src/assets/eth1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/eth1.png -------------------------------------------------------------------------------- /src/assets/eth2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/eth2.png -------------------------------------------------------------------------------- /src/assets/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/home.png -------------------------------------------------------------------------------- /src/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/icon.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/release1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/release1.png -------------------------------------------------------------------------------- /src/assets/release2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/release2.png -------------------------------------------------------------------------------- /src/assets/signup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/signup.png -------------------------------------------------------------------------------- /src/assets/super1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/super1.png -------------------------------------------------------------------------------- /src/assets/super2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/super2.png -------------------------------------------------------------------------------- /src/assets/super3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/super3.png -------------------------------------------------------------------------------- /src/assets/super4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/super4.png -------------------------------------------------------------------------------- /src/assets/supereth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-nft-landing/b406ac601a695bbf77eb8c371cc07bad1111f9d0/src/assets/supereth.png -------------------------------------------------------------------------------- /src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import superEth from "../assets/supereth.png"; 3 | export default function Card({ image, series, title, price, tag, time }) { 4 | return ( 5 |
6 |
7 | super1 8 |
9 |
10 |
11 | {series} 12 | Top bid 13 |
14 |
15 |

{title}

16 |
17 | super eth 18 |

{price} ETH

19 |
20 |
21 |
22 | #{tag} 23 | {time} day left 24 |
25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/components/Clients.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import clients1 from "../assets/clients1.png"; 3 | import clients2 from "../assets/clients2.png"; 4 | import clients3 from "../assets/clients3.png"; 5 | import clients4 from "../assets/clients4.png"; 6 | import clients5 from "../assets/clients5.png"; 7 | 8 | export default function Clients() { 9 | const data = [clients1, clients2, clients3, clients4, clients5]; 10 | return ( 11 |
12 |
13 |
14 | {data.map((client, index) => ( 15 |
16 | client 17 |
18 | ))} 19 |
20 |
21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "../assets/logo.png"; 3 | import { BsFacebook, BsTwitter, BsInstagram } from "react-icons/bs"; 4 | import { FaTiktok } from "react-icons/fa"; 5 | export default function Footer() { 6 | const links = [ 7 | { 8 | title: "About", 9 | data: ["About", "Terms", "Legal"], 10 | }, 11 | { 12 | title: "NFT", 13 | data: ["OpenSea", "Maker", "Learn"], 14 | }, 15 | { 16 | title: "Contact", 17 | data: ["Press", "Support"], 18 | }, 19 | { 20 | title: "Social", 21 | data: ["Twiiter", "Instagram"], 22 | }, 23 | ]; 24 | const socialLink = [ 25 | , 26 | , 27 | , 28 | , 29 | ]; 30 | return ( 31 |
32 |
33 |
34 |
35 | logo 36 |
37 |

Exclusive NFT Collection

38 |
    39 | {socialLink.map((link, index) => ( 40 |
  • {link}
    • 41 | ))} 42 |
43 |
44 |
45 | {links.map(({ title, data }, index) => { 46 | return ( 47 |
48 |

{title}

49 |
    50 | {data.map((link, index2) => ( 51 |
  • {link}
    • 52 | ))} 53 |
54 |
55 | ); 56 | })} 57 |
58 |
59 |
60 | © Copyright 2022 NFT 61 | Launching August 2022 62 |
63 |
64 | ); 65 | } 66 | -------------------------------------------------------------------------------- /src/components/Free.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "./Card"; 3 | import icon from "../assets/icon.png"; 4 | import super1 from "../assets/super1.png"; 5 | import release2 from "../assets/release2.png"; 6 | 7 | export default function Free() { 8 | return ( 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | icon 18 |
19 |

Free NFT for early birds

20 |

21 | Sign up today and you'll get a free NFT when we launch 22 |

23 |
24 |
25 |
26 |
27 | 35 |
36 |
37 | 45 |
46 |
47 |
48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /src/components/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import home from "../assets/home.png"; 3 | export default function Home() { 4 | return ( 5 |
6 |
7 |
8 |

Launching Soon

9 |

An NFT like no other

10 |

11 | Don't miss out on the release of our new NFT. Sign up below to 12 | recieve updates when we go live. 13 |

14 | 15 |
16 |
17 |
18 | home image 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/components/Like.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import eth1 from "../assets/eth1.png"; 3 | import eth2 from "../assets/eth2.png"; 4 | 5 | export default function Like() { 6 | return ( 7 |
8 |
9 |
10 |
11 | eth1 12 |
13 |

An NFT like no other

14 |

15 | Don't miss out on the release of our new NFT. Sign up below to 16 | recieve updates when we go live on 11/22. 17 |

18 |

19 | Don't miss out on the release of our new NFT. Sign up below to 20 | recieve updates when we go live on 11/22. Don't miss out on the 21 | release of our new NFT. 22 |

23 |
24 |
25 |
26 | eth2 27 |
28 |

An NFT like no other

29 |

30 | Don't miss out on the release of our new NFT. Sign up below to 31 | recieve updates when we go live on 11/22. 32 |

33 |

34 | Don't miss out on the release of our new NFT. Sign up below to 35 | recieve updates when we go live on 11/22. Don't miss out on the 36 | release of our new NFT. 37 |

38 |
39 |
40 |
41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { GiHamburgerMenu } from "react-icons/gi"; 3 | import { MdClose } from "react-icons/md"; 4 | import { ImSun } from "react-icons/im"; 5 | import { BsFillMoonFill } from "react-icons/bs"; 6 | import logo from "../assets/logo.png"; 7 | export default function Navbar({ changeTheme, currentTheme }) { 8 | const [navState, setNavState] = useState(false); 9 | return ( 10 | 56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /src/components/Release.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BsArrowRight } from "react-icons/bs"; 3 | import release1 from "../assets/release1.png"; 4 | import release2 from "../assets/release2.png"; 5 | import Card from "./Card"; 6 | 7 | export default function Release() { 8 | return ( 9 |
10 |
11 |
12 |

Initial Release 4/11

13 |

14 | We have released four limited edition NFTs early which can be bid on 15 | via OpenSea 16 |

17 |

18 | There will be the only four of these NFTs we ever make, so be sure 19 | not to miss out! 20 |

21 |

50% of proceeds go to charity.

22 | 23 | Check them out 24 | 25 |
26 |
27 | release 28 |
29 |
30 |
31 |
32 |
33 | 41 |
42 |
43 |
44 |

Initial Release 4/11

45 |

46 | We have released four limited edition NFTs early which can be bid on 47 | via OpenSea 48 |

49 |

50 | There will be the only four of these NFTs we ever make, so be sure 51 | not to miss out! 52 |

53 |

50% of proceeds go to charity.

54 | 55 | Check them out 56 | 57 |
58 |
59 |
60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /src/components/ScrollToTop.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { BsChevronUp } from "react-icons/bs"; 3 | export default function ScrollToTop() { 4 | const [visible, setVisible] = useState(false); 5 | window.addEventListener("scroll", () => { 6 | window.pageYOffset > 100 ? setVisible(true) : setVisible(false); 7 | }); 8 | return ( 9 |
10 | 11 | 12 | 13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /src/components/Signup.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import signup from "../assets/signup.png"; 3 | export default function Signup() { 4 | return ( 5 |
6 |
7 |
8 |

Launching Soon

9 |

An NFT like no other

10 |

11 | Don't miss out on the release of our new NFT. Sign up below to 12 | recieve updates when we go live. 13 |

14 | 15 |
16 |
17 |
18 | home image 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/components/SuperRare.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "./Card"; 3 | import super1 from "../assets/super1.png"; 4 | import super2 from "../assets/super2.png"; 5 | import super3 from "../assets/super3.png"; 6 | import super4 from "../assets/super4.png"; 7 | 8 | export default function SuperRare() { 9 | const data = [ 10 | { 11 | image: super1, 12 | series: "Gloop Series", 13 | title: "Purple Man", 14 | price: 2.99, 15 | tag: 12983, 16 | time: 1, 17 | }, 18 | { 19 | image: super2, 20 | series: "Gloop Series", 21 | title: "Beige", 22 | price: 2.99, 23 | tag: 12983, 24 | time: 1, 25 | }, 26 | { 27 | image: super3, 28 | series: "Gloop Series", 29 | title: "Red Man", 30 | price: 2.99, 31 | tag: 12983, 32 | time: 1, 33 | }, 34 | { 35 | image: super4, 36 | series: "Gloop Series", 37 | title: "Green", 38 | price: 2.99, 39 | tag: 12983, 40 | time: 1, 41 | }, 42 | ]; 43 | return ( 44 |
45 |
46 |

LE Super Rare Auction

47 |

48 | We have released four limited edition NFT's early which which can be 49 | bid on via OpenSea. 50 |

51 |
52 |
53 | {data.map(({ image, series, title, price, tag, time }, index) => ( 54 | 63 | ))} 64 |
65 |
66 | ); 67 | } 68 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById("root") 10 | ); 11 | -------------------------------------------------------------------------------- /src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); 2 | :root { 3 | --orange: #ff8139; 4 | --pink: #ff3998; 5 | --green: #39ffa0; 6 | --red: #ff3939; 7 | --light-green: #edfff6; 8 | --light-orange: #fff0e8; 9 | --accent-color1: #ffffff; 10 | --accent-color2: #555555; 11 | --accent-color3: #cccccc; 12 | --card-color: #000000; 13 | --background: #111111; 14 | --font-family: "Inter", sans-serif; 15 | } 16 | 17 | [data-theme="light"] { 18 | --background: #ffffff; 19 | --accent-color1: #000000; 20 | --accent-color2: #eeeeee; 21 | --accent-color3: #777777; 22 | --card-color: #eeeeee; 23 | } 24 | 25 | * { 26 | padding: 0; 27 | margin: 0; 28 | box-sizing: border-box; 29 | } 30 | 31 | html { 32 | scroll-behavior: smooth; 33 | } 34 | 35 | .app-container { 36 | background-color: var(--background); 37 | font-family: var(--font-family); 38 | overflow-x: hidden; 39 | transition: 0.5s ease-in-out; 40 | padding: 2rem 4rem; 41 | @media screen and (min-width: 280px) and (max-width: 1080px) { 42 | padding: 0; 43 | } 44 | } 45 | 46 | @media only screen and (min-device-width: 280px) and (max-device-width: 1080px) { 47 | .app-container::-webkit-scrollbar { 48 | display: none; 49 | } 50 | } 51 | 52 | ::-webkit-scrollbar { 53 | background-color: #111111; 54 | width: 0.2rem; 55 | } 56 | 57 | ::-webkit-scrollbar-thumb { 58 | background-color: var(--orange); 59 | } 60 | -------------------------------------------------------------------------------- /src/sass/components/_card.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | background-color: var(--card-color); 3 | width: max-content; 4 | border-radius: 1rem; 5 | &-image { 6 | img { 7 | } 8 | } 9 | &-content { 10 | display: flex; 11 | flex-direction: column; 12 | gap: 0.5rem; 13 | padding: 1rem; 14 | .card-heading { 15 | display: flex; 16 | justify-content: space-between; 17 | .card-series { 18 | color: var(--orange); 19 | text-transform: uppercase; 20 | font-size: 0.7rem; 21 | } 22 | .card-top { 23 | color: var(--accent-color3); 24 | text-transform: uppercase; 25 | font-size: 0.7rem; 26 | } 27 | } 28 | .card-details { 29 | display: flex; 30 | justify-content: space-between; 31 | color: var(--accent-color1); 32 | .card-title { 33 | } 34 | .card-price { 35 | display: flex; 36 | gap: 1rem; 37 | img { 38 | } 39 | h4 { 40 | } 41 | } 42 | } 43 | .card-sub-details { 44 | display: flex; 45 | justify-content: space-between; 46 | span { 47 | color: var(--accent-color3); 48 | font-size: 0.9rem; 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/sass/components/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | margin: 6rem 0; 3 | display: flex; 4 | flex-direction: column; 5 | gap: 5rem; 6 | .upper { 7 | display: flex; 8 | justify-content: space-between; 9 | color: var(--accent-color3); 10 | .brand-container { 11 | display: flex; 12 | flex-direction: column; 13 | gap: 1.5rem; 14 | .brand { 15 | img { 16 | } 17 | } 18 | p { 19 | } 20 | ul { 21 | list-style-type: none; 22 | display: flex; 23 | gap: 1rem; 24 | li { 25 | } 26 | } 27 | } 28 | .links { 29 | display: flex; 30 | gap: 8rem; 31 | .link { 32 | display: flex; 33 | flex-direction: column; 34 | gap: 2rem; 35 | h4 { 36 | color: var(--accent-color1); 37 | text-transform: uppercase; 38 | } 39 | ul { 40 | list-style-type: none; 41 | display: flex; 42 | flex-direction: column; 43 | gap: 1rem; 44 | li { 45 | } 46 | } 47 | } 48 | } 49 | } 50 | .lower { 51 | display: flex; 52 | justify-content: space-between; 53 | span { 54 | color: var(--accent-color3); 55 | } 56 | } 57 | } 58 | 59 | [data-theme="light"] { 60 | footer { 61 | .brand-container { 62 | .brand { 63 | img { 64 | filter: brightness(0); 65 | } 66 | } 67 | } 68 | } 69 | } 70 | 71 | @media screen and (min-width: 280px) and (max-width: 1080px) { 72 | footer { 73 | margin: 0; 74 | gap: 2rem; 75 | padding: 1rem 2rem; 76 | .upper { 77 | flex-direction: column; 78 | gap: 2rem; 79 | .links { 80 | display: grid; 81 | grid-template-columns: 1fr 1fr; 82 | gap: 2rem; 83 | .link { 84 | gap: 1rem; 85 | } 86 | } 87 | } 88 | .lower { 89 | flex-direction: column; 90 | gap: 1rem; 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/sass/components/_navbar.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | .brand-container { 6 | .brand { 7 | img { 8 | height: 100%; 9 | } 10 | } 11 | .toggle-container { 12 | display: none; 13 | .toggle { 14 | } 15 | .mode { 16 | } 17 | } 18 | } 19 | .links-container { 20 | .links { 21 | list-style-type: none; 22 | display: flex; 23 | gap: 4rem; 24 | li { 25 | .dark { 26 | color: black; 27 | } 28 | .light { 29 | color: yellow; 30 | } 31 | a { 32 | color: var(--accent-color3); 33 | text-decoration: none; 34 | } 35 | &:last-of-type { 36 | a { 37 | color: var(--pink); 38 | } 39 | } 40 | } 41 | } 42 | } 43 | } 44 | 45 | [data-theme="light"] { 46 | nav { 47 | .brand-container { 48 | .brand { 49 | img { 50 | filter: brightness(0); 51 | } 52 | } 53 | } 54 | } 55 | } 56 | 57 | @media screen and (min-width: 280px) and (max-width: 1080px) { 58 | nav { 59 | position: relative; 60 | padding: 1rem 2rem; 61 | .brand-container { 62 | display: flex; 63 | justify-content: space-between; 64 | align-items: center; 65 | width: 100%; 66 | .brand { 67 | img { 68 | height: 1.5rem; 69 | } 70 | } 71 | .toggle-container { 72 | display: block; 73 | color: var(--accent-color1); 74 | display: flex; 75 | flex-direction: row-reverse; 76 | gap: 1rem; 77 | z-index: 40; 78 | .toggle { 79 | z-index: 40; 80 | display: block; 81 | } 82 | } 83 | } 84 | .links-container { 85 | z-index: 30; 86 | background-image: linear-gradient(101deg, var(--pink), var(--orange)); 87 | height: 100vh; 88 | position: absolute; 89 | top: 0; 90 | right: 0; 91 | opacity: 0; 92 | width: 0; 93 | visibility: hidden; 94 | display: flex; 95 | justify-content: center; 96 | align-items: center; 97 | transition: 0.5s ease-in-out; 98 | .links { 99 | flex-direction: column; 100 | li { 101 | a { 102 | color: var(--background); 103 | } 104 | &:last-of-type { 105 | display: none; 106 | } 107 | } 108 | } 109 | } 110 | .nav-visible { 111 | width: 60vw; 112 | visibility: visible; 113 | opacity: 1; 114 | } 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/sass/components/_scrollToTop.scss: -------------------------------------------------------------------------------- 1 | .scrollToTop { 2 | visibility: hidden; 3 | opacity: 0; 4 | transition: 0.5s ease-in-out; 5 | z-index: 100; 6 | position: fixed; 7 | bottom: 5%; 8 | right: 5%; 9 | border-radius: 5rem; 10 | background-color: red; 11 | height: 4rem; 12 | width: 4rem; 13 | border: solid 3px transparent; 14 | background-image: linear-gradient( 15 | rgba(255, 255, 255, 0), 16 | rgba(255, 255, 255, 0) 17 | ), 18 | linear-gradient(101deg, var(--pink), var(--orange)); 19 | background-origin: border-box; 20 | background-clip: content-box, border-box; 21 | box-shadow: 2px 1000px 1px var(--background) inset; 22 | transition: 0.5s ease-in-out; 23 | cursor: pointer; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | &:hover { 28 | box-shadow: none; 29 | } 30 | a { 31 | svg { 32 | font-size: 2rem; 33 | color: var(--accent-color1); 34 | } 35 | } 36 | } 37 | 38 | .visible { 39 | visibility: visible; 40 | opacity: 1; 41 | } 42 | -------------------------------------------------------------------------------- /src/sass/index.scss: -------------------------------------------------------------------------------- 1 | @import "base/base"; 2 | 3 | @import "components/scrollToTop"; 4 | @import "components/navbar"; 5 | @import "components/footer"; 6 | @import "components/card"; 7 | 8 | @import "sections/home"; 9 | @import "sections/free"; 10 | @import "sections/clients"; 11 | @import "sections/superRare"; 12 | @import "sections/release"; 13 | @import "sections/signup"; 14 | @import "sections/like"; 15 | -------------------------------------------------------------------------------- /src/sass/sections/_clients.scss: -------------------------------------------------------------------------------- 1 | .clients { 2 | padding: 6rem 0; 3 | .container { 4 | .clients-container { 5 | display: grid; 6 | grid-template-columns: repeat(5, 1fr); 7 | text-align: center; 8 | .client { 9 | img { 10 | } 11 | } 12 | } 13 | } 14 | @media screen and (min-width: 280px) and (max-width: 1080px) { 15 | padding: 1rem 2rem; 16 | .container { 17 | .clients-container { 18 | grid-template-columns: repeat(2, 1fr); 19 | text-align: left; 20 | gap: 1rem; 21 | 22 | .client { 23 | &:nth-of-type(5) { 24 | display: none; 25 | } 26 | img { 27 | height: 1.5rem; 28 | } 29 | } 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/sass/sections/_free.scss: -------------------------------------------------------------------------------- 1 | .free { 2 | position: relative; 3 | margin: 5rem 0; 4 | .container { 5 | display: flex; 6 | background-color: var(--orange); 7 | position: relative; 8 | height: 25rem; 9 | border-radius: 1rem; 10 | overflow: hidden; 11 | z-index: 1; 12 | .background { 13 | z-index: -1; 14 | .ellipse { 15 | position: absolute; 16 | height: 100%; 17 | width: 28rem; 18 | border-radius: 100%; 19 | filter: blur(100px); 20 | } 21 | .pink { 22 | top: -10%; 23 | left: -15%; 24 | background-color: var(--pink); 25 | } 26 | .green { 27 | top: -10%; 28 | right: -15%; 29 | background-color: var(--green); 30 | } 31 | } 32 | .content { 33 | z-index: 1; 34 | display: flex; 35 | flex-direction: column; 36 | gap: 1.5rem; 37 | padding-top: 3rem; 38 | padding-left: 5rem; 39 | font-size: 1.3rem; 40 | .image { 41 | img { 42 | } 43 | } 44 | .title { 45 | font-size: 2rem; 46 | } 47 | .description { 48 | } 49 | } 50 | } 51 | .cards { 52 | display: flex; 53 | position: absolute; 54 | top: -2rem; 55 | right: 40%; 56 | .card1 { 57 | top: 0; 58 | position: absolute; 59 | transform: rotate(-10deg); 60 | z-index: 3; 61 | font-size: 0.6rem; 62 | .card-image { 63 | img { 64 | height: 10rem; 65 | width: 12rem; 66 | } 67 | } 68 | } 69 | .card2 { 70 | top: 0; 71 | z-index: 2; 72 | position: absolute; 73 | left: 10rem; 74 | transform: rotate(5deg); 75 | font-size: 0.7rem; 76 | .card-image { 77 | img { 78 | height: 10rem; 79 | } 80 | } 81 | } 82 | } 83 | @media screen and (min-width: 280px) and (max-width: 1080px) { 84 | margin: 0; 85 | .container { 86 | padding: 1rem 2rem; 87 | height: 40vh; 88 | border-radius: 0; 89 | .background { 90 | .pink { 91 | left: -70%; 92 | } 93 | .green { 94 | right: -100%; 95 | } 96 | } 97 | .content { 98 | padding: 0; 99 | font-size: 16px; 100 | gap: 1rem; 101 | .title { 102 | font-size: 22px; 103 | } 104 | } 105 | } 106 | .cards { 107 | .card1, 108 | .card2 { 109 | zoom: 0.3; 110 | } 111 | } 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /src/sass/sections/_home.scss: -------------------------------------------------------------------------------- 1 | .home { 2 | margin-top: 6rem; 3 | .container { 4 | display: grid; 5 | grid-template-columns: 1fr 1fr; 6 | font-size: 32px; 7 | .content { 8 | margin-top: 3rem; 9 | display: flex; 10 | flex-direction: column; 11 | gap: 2rem; 12 | align-items: flex-start; 13 | .sub-title { 14 | color: var(--pink); 15 | text-transform: uppercase; 16 | letter-spacing: 0.1rem; 17 | } 18 | .title { 19 | color: var(--accent-color1); 20 | } 21 | .description { 22 | color: var(--accent-color3); 23 | } 24 | button { 25 | color: var(--accent-color1); 26 | background-color: var(--background); 27 | font-weight: bold; 28 | padding: 1rem 3rem; 29 | border-radius: 2rem; 30 | box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5); 31 | border: solid 3px transparent; 32 | background-image: linear-gradient( 33 | rgba(255, 255, 255, 0), 34 | rgba(255, 255, 255, 0) 35 | ), 36 | linear-gradient(101deg, var(--pink), var(--orange)); 37 | background-origin: border-box; 38 | background-clip: content-box, border-box; 39 | box-shadow: 2px 1000px 1px var(--background) inset; 40 | transition: 0.5s ease-in-out; 41 | cursor: pointer; 42 | &:hover { 43 | box-shadow: none; 44 | } 45 | } 46 | } 47 | .image-container { 48 | text-align: center; 49 | position: relative; 50 | z-index: 10; 51 | .image { 52 | img { 53 | } 54 | } 55 | .ellipse-container { 56 | .ellipse { 57 | z-index: -1; 58 | position: absolute; 59 | height: 15rem; 60 | width: 15rem; 61 | filter: blur(100px); 62 | } 63 | .pink { 64 | top: 40%; 65 | right: 40%; 66 | background-color: var(--pink); 67 | } 68 | .orange { 69 | bottom: 40%; 70 | left: 40%; 71 | background-color: var(--orange); 72 | } 73 | } 74 | } 75 | } 76 | } 77 | 78 | @media screen and (min-width: 280px) and (max-width: 1080px) { 79 | .home { 80 | padding: 1rem; 81 | position: relative; 82 | overflow-x: hidden; 83 | margin-top: 1rem; 84 | .container { 85 | font-size: 16px; 86 | grid-template-columns: 0.7fr; 87 | .image-container { 88 | position: absolute; 89 | right: -10%; 90 | top: 30%; 91 | .image { 92 | img { 93 | height: 10rem; 94 | } 95 | } 96 | .ellipse-container { 97 | .ellipse { 98 | height: 6rem; 99 | width: 6rem; 100 | filter: blur(30px); 101 | } 102 | .pink { 103 | right: 10%; 104 | } 105 | .orange { 106 | left: -5%; 107 | } 108 | } 109 | } 110 | } 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/sass/sections/_like.scss: -------------------------------------------------------------------------------- 1 | .like { 2 | margin: 5rem 0; 3 | .container { 4 | display: grid; 5 | grid-template-columns: 1fr 1fr; 6 | gap: 4rem; 7 | .content { 8 | background-color: var(--accent-color2); 9 | display: flex; 10 | flex-direction: column; 11 | gap: 2rem; 12 | padding: 3rem; 13 | border-radius: 2rem; 14 | .image { 15 | img { 16 | } 17 | } 18 | .title { 19 | color: var(--accent-color1); 20 | } 21 | .description { 22 | color: var(--accent-color3); 23 | letter-spacing: 0.1rem; 24 | line-height: 1.5rem; 25 | } 26 | } 27 | } 28 | } 29 | 30 | @media screen and (min-width: 280px) and (max-width: 1080px) { 31 | .like { 32 | margin: 0; 33 | .container { 34 | grid-template-columns: 1fr; 35 | gap: 0; 36 | .content { 37 | padding: 1rem 2rem; 38 | border-radius: 0; 39 | &:nth-of-type(2) { 40 | background-color: var(--background); 41 | } 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/sass/sections/_release.scss: -------------------------------------------------------------------------------- 1 | .releases { 2 | margin: 5rem 0; 3 | display: flex; 4 | flex-direction: column; 5 | gap: 5rem; 6 | .release { 7 | display: grid; 8 | grid-template-columns: 1fr 1fr; 9 | border-radius: 0.5rem; 10 | .content { 11 | padding: 5rem 8rem; 12 | 13 | display: flex; 14 | flex-direction: column; 15 | gap: 2rem; 16 | .title { 17 | font-size: 2rem; 18 | } 19 | .description { 20 | font-size: 1.3rem; 21 | a { 22 | color: black; 23 | font-weight: bold; 24 | } 25 | } 26 | .link { 27 | color: black; 28 | font-weight: bold; 29 | text-decoration: none; 30 | display: flex; 31 | gap: 1rem; 32 | svg { 33 | font-size: 1.2rem; 34 | } 35 | } 36 | } 37 | .image { 38 | position: relative; 39 | overflow: hidden; 40 | text-align: center; 41 | z-index: 1; 42 | display: flex; 43 | justify-content: center; 44 | align-items: flex-end; 45 | img { 46 | height: 24rem; 47 | } 48 | .ellipse { 49 | z-index: -1; 50 | position: absolute; 51 | bottom: -40%; 52 | right: 0; 53 | height: 20rem; 54 | width: 20rem; 55 | filter: blur(100px); 56 | } 57 | .pink { 58 | background-color: var(--pink); 59 | } 60 | } 61 | .card-container { 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | position: relative; 66 | z-index: 1; 67 | overflow: hidden; 68 | .card-image { 69 | img { 70 | height: 14rem; 71 | } 72 | } 73 | .ellipse { 74 | z-index: -1; 75 | position: absolute; 76 | bottom: -45%; 77 | left: 0; 78 | height: 20rem; 79 | width: 20rem; 80 | filter: blur(100px); 81 | } 82 | .orange { 83 | background-color: var(--orange); 84 | } 85 | } 86 | } 87 | .orange { 88 | background-color: var(--orange); 89 | } 90 | .green { 91 | background-color: var(--green); 92 | } 93 | } 94 | 95 | @media screen and (min-width: 280px) and (max-width: 1080px) { 96 | .releases { 97 | margin: 0; 98 | gap: 0; 99 | .release { 100 | border-radius: 0; 101 | grid-template-columns: 1fr; 102 | padding: 1rem 2rem; 103 | gap: 2rem; 104 | &:nth-of-type(1) { 105 | .image { 106 | grid-row: 1; 107 | } 108 | } 109 | .content { 110 | padding: 0; 111 | } 112 | .image { 113 | zoom: 0.5; 114 | } 115 | .card-container { 116 | zoom: 0.5; 117 | } 118 | .ellipse { 119 | display: none !important; 120 | } 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/sass/sections/_signup.scss: -------------------------------------------------------------------------------- 1 | .signup { 2 | border-top: 0.1rem solid white; 3 | border-bottom: 0.1rem solid white; 4 | padding-top: 4rem; 5 | overflow-y: hidden; 6 | .container { 7 | display: grid; 8 | grid-template-columns: 1fr 1fr; 9 | font-size: 18px; 10 | .content { 11 | margin-top: 3rem; 12 | display: flex; 13 | flex-direction: column; 14 | gap: 2rem; 15 | align-items: flex-start; 16 | .sub-title { 17 | color: var(--pink); 18 | text-transform: uppercase; 19 | letter-spacing: 0.1rem; 20 | } 21 | .title { 22 | color: var(--accent-color1); 23 | } 24 | .description { 25 | color: var(--accent-color3); 26 | } 27 | button { 28 | color: var(--accent-color1); 29 | background-color: var(--background); 30 | font-weight: bold; 31 | padding: 1rem 3rem; 32 | border-radius: 2rem; 33 | box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5); 34 | border: solid 3px transparent; 35 | background-image: linear-gradient( 36 | rgba(255, 255, 255, 0), 37 | rgba(255, 255, 255, 0) 38 | ), 39 | linear-gradient(101deg, var(--pink), var(--orange)); 40 | background-origin: border-box; 41 | background-clip: content-box, border-box; 42 | box-shadow: 2px 1000px 1px var(--background) inset; 43 | transition: 0.5s ease-in-out; 44 | cursor: pointer; 45 | &:hover { 46 | box-shadow: none; 47 | } 48 | } 49 | } 50 | .image-container { 51 | text-align: center; 52 | position: relative; 53 | z-index: 10; 54 | .image { 55 | img { 56 | } 57 | } 58 | .ellipse-container { 59 | .ellipse { 60 | z-index: -1; 61 | position: absolute; 62 | height: 15rem; 63 | width: 15rem; 64 | filter: blur(100px); 65 | } 66 | .pink { 67 | top: 40%; 68 | right: 40%; 69 | background-color: var(--pink); 70 | } 71 | .orange { 72 | bottom: 40%; 73 | left: 40%; 74 | background-color: var(--orange); 75 | } 76 | } 77 | } 78 | } 79 | } 80 | 81 | @media screen and (min-width: 280px) and (max-width: 1080px) { 82 | .signup { 83 | padding: 1rem; 84 | position: relative; 85 | overflow-x: hidden; 86 | margin-top: 1rem; 87 | .container { 88 | font-size: 16px; 89 | grid-template-columns: 0.7fr; 90 | .image-container { 91 | position: absolute; 92 | right: -5%; 93 | top: 30%; 94 | .image { 95 | img { 96 | height: 10rem; 97 | } 98 | } 99 | .ellipse-container { 100 | .ellipse { 101 | height: 6rem; 102 | width: 6rem; 103 | filter: blur(30px); 104 | } 105 | .pink { 106 | right: 10%; 107 | } 108 | .orange { 109 | left: -5%; 110 | } 111 | } 112 | } 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/sass/sections/_superRare.scss: -------------------------------------------------------------------------------- 1 | .super-rare { 2 | display: flex; 3 | flex-direction: column; 4 | gap: 2rem; 5 | .title-container { 6 | display: flex; 7 | flex-direction: column; 8 | gap: 1rem; 9 | .title { 10 | color: var(--accent-color1); 11 | font-size: 2.4rem; 12 | } 13 | .description { 14 | color: var(--accent-color3); 15 | a { 16 | color: var(--accent-color3); 17 | font-weight: bold; 18 | } 19 | } 20 | } 21 | .cards { 22 | display: flex; 23 | justify-content: space-evenly; 24 | gap: 5rem; 25 | } 26 | } 27 | 28 | @media screen and (min-width: 280px) and (max-width: 1080px) { 29 | .super-rare { 30 | padding: 1rem 2rem; 31 | width: 100vw; 32 | .cards { 33 | overflow: auto; 34 | justify-content: flex-start; 35 | gap: 2rem; 36 | padding-left: 1.5rem; 37 | &::-webkit-scrollbar { 38 | display: none; 39 | } 40 | .card { 41 | zoom: 0.7; 42 | } 43 | } 44 | } 45 | } 46 | --------------------------------------------------------------------------------