├── screenshot.png ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json └── index.html ├── src ├── components │ ├── variables.scss │ ├── Home │ │ ├── img │ │ │ └── background.webp │ │ ├── .sass-cache │ │ │ └── 402a7c0c113577705adafde158ffa4499b531681 │ │ │ │ └── Home.scssc │ │ ├── Main │ │ │ ├── .sass-cache │ │ │ │ ├── 70f7b0758b7ca8b8a7f476e8a1ac0cc651fc86c5 │ │ │ │ │ └── Main.scssc │ │ │ │ └── 08d09ca294659e085ad185b58a30a8bcea4652e1 │ │ │ │ │ ├── mixins.scssc │ │ │ │ │ └── variables.scssc │ │ │ ├── Main.jsx │ │ │ ├── Main.css.map │ │ │ ├── Main.scss │ │ │ └── Main.css │ │ ├── Footer │ │ │ ├── .sass-cache │ │ │ │ ├── 08d09ca294659e085ad185b58a30a8bcea4652e1 │ │ │ │ │ ├── mixins.scssc │ │ │ │ │ └── variables.scssc │ │ │ │ └── f3bc41fcb5cf21fc1d483274f336ec1c0d793155 │ │ │ │ │ └── Footer.scssc │ │ │ ├── Footer.css.map │ │ │ ├── Footer.scss │ │ │ ├── Footer.css │ │ │ └── Footer.jsx │ │ ├── Header │ │ │ ├── .sass-cache │ │ │ │ ├── 08d09ca294659e085ad185b58a30a8bcea4652e1 │ │ │ │ │ ├── mixins.scssc │ │ │ │ │ └── variables.scssc │ │ │ │ └── ba25c25cb903414ecf79728c3f587fc79b451256 │ │ │ │ │ └── Header.scssc │ │ │ ├── Header.css.map │ │ │ ├── Header.jsx │ │ │ ├── Header.css │ │ │ └── Header.scss │ │ ├── Home.scss │ │ ├── Home.css.map │ │ ├── Home.css │ │ └── Home.jsx │ ├── List │ │ ├── .sass-cache │ │ │ ├── fa38d88e2cf05a5f0c34d6f4cb049cbf5f416d9c │ │ │ │ └── List.scssc │ │ │ └── 08d09ca294659e085ad185b58a30a8bcea4652e1 │ │ │ │ ├── mixins.scssc │ │ │ │ └── variables.scssc │ │ ├── Todo │ │ │ └── Todo.jsx │ │ ├── List.css.map │ │ ├── List.scss │ │ ├── List.jsx │ │ └── List.css │ ├── Episodes │ │ ├── .sass-cache │ │ │ ├── 08d09ca294659e085ad185b58a30a8bcea4652e1 │ │ │ │ ├── mixins.scssc │ │ │ │ └── variables.scssc │ │ │ └── 3a3bee0c2416eb6a75529ebc18e36038d6d5de18 │ │ │ │ └── Episodes.scssc │ │ ├── Episodes.css.map │ │ ├── Episodes.jsx │ │ ├── Episodes.scss │ │ └── Episodes.css │ ├── Locations │ │ ├── .sass-cache │ │ │ ├── 08d09ca294659e085ad185b58a30a8bcea4652e1 │ │ │ │ ├── mixins.scssc │ │ │ │ └── variables.scssc │ │ │ └── 559d044845fc433e42f237c8abb08a42e5b9ab3b │ │ │ │ └── Locations.scssc │ │ ├── Locations.css.map │ │ ├── Locations.jsx │ │ ├── Filter │ │ │ └── Filter.jsx │ │ ├── Locations.scss │ │ └── Locations.css │ ├── Characters │ │ ├── .sass-cache │ │ │ ├── 08d09ca294659e085ad185b58a30a8bcea4652e1 │ │ │ │ ├── mixins.scssc │ │ │ │ └── variables.scssc │ │ │ └── 92e7941391a448743ed8abea7c38abe279abd59f │ │ │ │ └── Characters.scssc │ │ ├── Popup │ │ │ └── Popup.jsx │ │ ├── Filter │ │ │ └── Filter.jsx │ │ ├── Characters.css.map │ │ ├── Characters.jsx │ │ ├── Characters.scss │ │ └── Characters.css │ └── mixins.scss ├── assets │ └── fonts │ │ └── stoney-billy │ │ ├── STONB___.TTF │ │ └── read_me.pdf ├── index.jsx ├── App.jsx └── App.scss ├── .gitignore ├── README.md └── package.json /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/screenshot.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/variables.scss: -------------------------------------------------------------------------------- 1 | $yellow: rgb(218, 218, 77); 2 | $transition: all .4s; 3 | $background: rgb(12, 18, 21); -------------------------------------------------------------------------------- /src/components/Home/img/background.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/img/background.webp -------------------------------------------------------------------------------- /src/assets/fonts/stoney-billy/STONB___.TTF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/assets/fonts/stoney-billy/STONB___.TTF -------------------------------------------------------------------------------- /src/assets/fonts/stoney-billy/read_me.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/assets/fonts/stoney-billy/read_me.pdf -------------------------------------------------------------------------------- /src/components/Home/.sass-cache/402a7c0c113577705adafde158ffa4499b531681/Home.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/.sass-cache/402a7c0c113577705adafde158ffa4499b531681/Home.scssc -------------------------------------------------------------------------------- /src/components/List/.sass-cache/fa38d88e2cf05a5f0c34d6f4cb049cbf5f416d9c/List.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/List/.sass-cache/fa38d88e2cf05a5f0c34d6f4cb049cbf5f416d9c/List.scssc -------------------------------------------------------------------------------- /src/components/List/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/List/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc -------------------------------------------------------------------------------- /src/components/Home/Main/.sass-cache/70f7b0758b7ca8b8a7f476e8a1ac0cc651fc86c5/Main.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/Main/.sass-cache/70f7b0758b7ca8b8a7f476e8a1ac0cc651fc86c5/Main.scssc -------------------------------------------------------------------------------- /src/components/List/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/List/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc -------------------------------------------------------------------------------- /src/components/Episodes/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Episodes/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc -------------------------------------------------------------------------------- /src/components/Home/Main/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/Main/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc -------------------------------------------------------------------------------- /src/components/Locations/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Locations/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc -------------------------------------------------------------------------------- /src/components/Characters/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Characters/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc -------------------------------------------------------------------------------- /src/components/Episodes/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Episodes/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc -------------------------------------------------------------------------------- /src/components/Episodes/.sass-cache/3a3bee0c2416eb6a75529ebc18e36038d6d5de18/Episodes.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Episodes/.sass-cache/3a3bee0c2416eb6a75529ebc18e36038d6d5de18/Episodes.scssc -------------------------------------------------------------------------------- /src/components/Home/Footer/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/Footer/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc -------------------------------------------------------------------------------- /src/components/Home/Footer/.sass-cache/f3bc41fcb5cf21fc1d483274f336ec1c0d793155/Footer.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/Footer/.sass-cache/f3bc41fcb5cf21fc1d483274f336ec1c0d793155/Footer.scssc -------------------------------------------------------------------------------- /src/components/Home/Header/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/Header/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/mixins.scssc -------------------------------------------------------------------------------- /src/components/Home/Header/.sass-cache/ba25c25cb903414ecf79728c3f587fc79b451256/Header.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/Header/.sass-cache/ba25c25cb903414ecf79728c3f587fc79b451256/Header.scssc -------------------------------------------------------------------------------- /src/components/Home/Main/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/Main/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc -------------------------------------------------------------------------------- /src/components/Locations/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Locations/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc -------------------------------------------------------------------------------- /src/components/Locations/.sass-cache/559d044845fc433e42f237c8abb08a42e5b9ab3b/Locations.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Locations/.sass-cache/559d044845fc433e42f237c8abb08a42e5b9ab3b/Locations.scssc -------------------------------------------------------------------------------- /src/components/Characters/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Characters/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc -------------------------------------------------------------------------------- /src/components/Characters/.sass-cache/92e7941391a448743ed8abea7c38abe279abd59f/Characters.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Characters/.sass-cache/92e7941391a448743ed8abea7c38abe279abd59f/Characters.scssc -------------------------------------------------------------------------------- /src/components/Home/Footer/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/Footer/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc -------------------------------------------------------------------------------- /src/components/Home/Header/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuriy-kulakovskyi/cartoons/HEAD/src/components/Home/Header/.sass-cache/08d09ca294659e085ad185b58a30a8bcea4652e1/variables.scssc -------------------------------------------------------------------------------- /src/components/Home/Home.scss: -------------------------------------------------------------------------------- 1 | .home { 2 | width: 100%; min-height: 100vh; 3 | background-image: url('./img/background.webp'); 4 | background-size: cover; 5 | background-position: center; 6 | 7 | &__container { 8 | z-index: 1; 9 | } 10 | } -------------------------------------------------------------------------------- /src/components/Home/Home.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,KAAM;EACJ,KAAK,EAAE,IAAI;EAAE,UAAU,EAAE,KAAK;EAC9B,gBAAgB,EAAE,4BAA4B;EAC9C,eAAe,EAAE,KAAK;EACtB,mBAAmB,EAAE,MAAM;EAE3B,gBAAa;IACX,OAAO,EAAE,CAAC", 4 | "sources": ["Home.scss"], 5 | "names": [], 6 | "file": "Home.css" 7 | } -------------------------------------------------------------------------------- /src/components/Home/Home.css: -------------------------------------------------------------------------------- 1 | .home { 2 | width: 100%; 3 | min-height: 100vh; 4 | background-image: url("./img/background.webp"); 5 | background-size: cover; 6 | background-position: center; } 7 | .home__container { 8 | z-index: 1; } 9 | 10 | /*# sourceMappingURL=Home.css.map */ 11 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot( 6 | document.getElementById('root') 7 | ); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/components/Home/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Footer from './Footer/Footer'; 3 | import Header from './Header/Header'; 4 | import './Home.css'; 5 | import Main from './Main/Main'; 6 | 7 | const Home = () => { 8 | return ( 9 | // Home section 10 |
11 | {/* Header */} 12 |
13 | 14 | {/* Main */} 15 |
16 | 17 | {/* Footer */} 18 |
20 | ); 21 | } 22 | 23 | export default Home; -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flexSpaceBetween { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | } 6 | 7 | @mixin flexCenter { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | 13 | @mixin flexCenterStart { 14 | display: flex; 15 | justify-content: center; 16 | align-items: flex-start; 17 | } 18 | 19 | @mixin flexEnd { 20 | display: flex; 21 | justify-content: flex-end; 22 | align-items: center; 23 | } 24 | 25 | @mixin flexJustifyCenterStart { 26 | display: flex; 27 | justify-content: flex-start; 28 | align-items: center; 29 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | Rick and Morty 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.scss'; 2 | import React from 'react'; 3 | import Home from './components/Home/Home'; 4 | import Characters from './components/Characters/Characters'; 5 | import Episodes from './components/Episodes/Episodes'; 6 | import Locations from './components/Locations/Locations'; 7 | import List from './components/List/List'; 8 | 9 | function App() { 10 | return ( 11 |
12 | {/* Home section */} 13 | 14 | 15 | {/* Characters section */} 16 | 17 | 18 | {/* Episodes section */} 19 | 20 | 21 | {/* Locations section */} 22 | 23 | 24 | {/* My Watch list section */} 25 | 26 |
27 | ); 28 | } 29 | 30 | export default App; 31 | -------------------------------------------------------------------------------- /src/components/Home/Footer/Footer.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAGA,OAAQ;EACN,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,IAAI;EAAE,IAAI,EAAE,CAAC;EAGnB,gCAAgB;IACd,eAAe,EAAE,IAAI;IACrB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,MAAM;ICXlB,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,MAAM;IDYf,4CAAc;MACZ,KAAK,EAAE,OAAO;MACd,UAAU,EEhBL,QAAO;MFkBZ,kDAAQ;QACN,KAAK,EAAE,IAAI;EAMnB,oCAAqC;IAvBvC,OAAQ;MAwBJ,IAAI,EAAE,GAAG;MAAE,MAAM,EAAE,CAAC;MACpB,MAAM,EAAE,IAAI;MAAE,KAAK,EAAE,GAAG;MCrB1B,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,MAAM;MACvB,WAAW,EAAE,MAAM;MDsBjB,kBAAa;QACX,MAAM,EAAE,IAAI;QAAE,KAAK,EAAE,IAAI;QCzB7B,OAAO,EAAE,IAAI;QACb,eAAe,EAAE,MAAM;QACvB,WAAW,EAAE,MAAM;QD0Bf,gCAAgB;UACd,cAAc,EAAE,MAAM;UACtB,MAAM,EAAE,GAAG;UAGT,gDAAI;YACF,KAAK,EAAE,IAAI;YAAE,MAAM,EAAE,IAAI", 4 | "sources": ["Footer.scss","../../mixins.scss","../../variables.scss"], 5 | "names": [], 6 | "file": "Footer.css" 7 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | Logo 4 |
5 | Rick and Morty 6 |
7 |

Rick and Morty page using React.js 8 |

9 | 10 | Screenshot 11 | 12 | > [Portfolio 👨‍💻](https://yuriy-kulakovskyi.github.io/Portfolio/) GitHub logo 13 | -------------------------------------------------------------------------------- /src/components/Home/Main/Main.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import Typed from 'react-typed'; 3 | import './Main.css'; 4 | import aos from 'aos'; 5 | import 'aos/dist/aos.css'; 6 | 7 | const Main = () => { 8 | useEffect(() => { 9 | aos.init(); 10 | }, []); 11 | 12 | return ( 13 |
14 |
15 |

16 | Know more about the 17 |
18 | 25 |

26 | Get started 27 |
28 |
29 | ); 30 | } 31 | 32 | export default Main; -------------------------------------------------------------------------------- /src/components/Home/Main/Main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAGA,KAAM;EACJ,KAAK,EAAE,IAAI;EAAE,UAAU,EAAE,KAAK;ECG9B,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EDFnB,gBAAa;ICAb,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IDAjB,cAAc,EAAE,MAAM;IACtB,GAAG,EAAE,IAAI;IAET,uBAAS;MACP,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE,IAAI;MACX,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAElB,4BAAK;QACH,KAAK,EEnBJ,OAAiB;QFoBlB,WAAW,EAAE,uBAAuB;IAIxC,wBAAU;MACR,gBAAgB,EEzBb,OAAiB;MF0BpB,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,SAAS;MAClB,aAAa,EAAE,IAAI;MACnB,SAAS,EAAE,IAAI;MACf,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE,IAAI;MACX,WAAW,EAAE,GAAG;MAChB,MAAM,EAAE,OAAO;MACf,eAAe,EAAE,IAAI;MACrB,UAAU,EAAE,MAAM;MAClB,UAAU,EAAE,gBAAgB;MAC5B,UAAU,EAAE,mBAAqB;MAEjC,8BAAQ;QACN,gBAAgB,EAAE,WAAW;QAC7B,KAAK,EEzCJ,OAAiB;EF8CxB,oCAAqC;IACnC,gBAAa;MClCf,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,MAAM;MACvB,WAAW,EAAE,UAAU;MDmCnB,uBAAS;QACP,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,IAAI", 4 | "sources": ["Main.scss","../../mixins.scss","../../variables.scss"], 5 | "names": [], 6 | "file": "Main.css" 7 | } -------------------------------------------------------------------------------- /src/components/Home/Footer/Footer.scss: -------------------------------------------------------------------------------- 1 | @import "../../variables.scss"; 2 | @import "../../mixins.scss"; 3 | 4 | .footer { 5 | width: 100%; 6 | position: absolute; 7 | bottom: 2rem; left: 0; 8 | 9 | &__container { 10 | &__social-links { 11 | list-style-type: none; 12 | width: 40%; 13 | margin: 0 auto; 14 | @include flexSpaceBetween(); 15 | 16 | &__item__link { 17 | color: #a5a1a1; 18 | transition: $transition; 19 | 20 | &:hover { 21 | color: #fff; 22 | } 23 | } 24 | } 25 | } 26 | 27 | @media screen and (min-width: 768px) { 28 | left: 85%; bottom: 0; 29 | height: 100%; width: 15%; 30 | @include flexCenter(); 31 | 32 | &__container { 33 | height: 100%; width: 100%; 34 | @include flexCenter(); 35 | 36 | &__social-links { 37 | flex-direction: column; 38 | height: 50%; 39 | 40 | &__item__link { 41 | svg { 42 | width: 35px; height: 35px; 43 | } 44 | } 45 | } 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /src/components/List/Todo/Todo.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Todo = ({idx, name, isChecked, toggleCheckedTodo, deleteTodo}) => { 4 | return ( 5 |
8 |
toggleCheckedTodo(idx)} 10 | className={'item__checkbox item__checked-' + isChecked} 11 | >
12 | 13 | toggleCheckedTodo(idx)} 15 | className="item__name" 16 | > 17 | {name} 18 | 19 | 20 | 26 |
27 | ); 28 | } 29 | 30 | export default Todo; 31 | -------------------------------------------------------------------------------- /src/components/Home/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | width: 100%; 3 | position: absolute; 4 | bottom: 2rem; 5 | left: 0; } 6 | .footer__container__social-links { 7 | list-style-type: none; 8 | width: 40%; 9 | margin: 0 auto; 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: center; } 13 | .footer__container__social-links__item__link { 14 | color: #a5a1a1; 15 | transition: all 0.4s; } 16 | .footer__container__social-links__item__link:hover { 17 | color: #fff; } 18 | @media screen and (min-width: 768px) { 19 | .footer { 20 | left: 85%; 21 | bottom: 0; 22 | height: 100%; 23 | width: 15%; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; } 27 | .footer__container { 28 | height: 100%; 29 | width: 100%; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; } 33 | .footer__container__social-links { 34 | flex-direction: column; 35 | height: 50%; } 36 | .footer__container__social-links__item__link svg { 37 | width: 35px; 38 | height: 35px; } } 39 | 40 | /*# sourceMappingURL=Footer.css.map */ 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cartoons", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.10.5", 7 | "@emotion/styled": "^11.10.5", 8 | "@mui/material": "^5.11.6", 9 | "@mui/styles": "^5.11.2", 10 | "@testing-library/jest-dom": "^5.16.5", 11 | "@testing-library/react": "^13.4.0", 12 | "@testing-library/user-event": "^13.5.0", 13 | "aos": "^3.0.0-beta.6", 14 | "react": "^18.2.0", 15 | "react-bootstrap": "^2.7.0", 16 | "react-dom": "^18.2.0", 17 | "react-draggable": "^4.4.5", 18 | "react-scripts": "5.0.1", 19 | "react-typed": "^1.2.0", 20 | "sass": "^1.57.1", 21 | "web-vitals": "^2.1.4" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/Characters/Popup/Popup.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // Popup button 4 | import Button from 'react-bootstrap/Button'; 5 | 6 | const Popup = ({ isOpen, info, handleClose }) => { 7 | if (isOpen) { 8 | return ( 9 |
10 |
11 | 32 |
33 | 34 |
35 | 38 |
39 |
40 | ); 41 | } 42 | } 43 | 44 | export default Popup; 45 | -------------------------------------------------------------------------------- /src/components/Home/Main/Main.scss: -------------------------------------------------------------------------------- 1 | @import "../../variables.scss"; 2 | @import "../../mixins.scss"; 3 | 4 | .main { 5 | width: 100%; min-height: 100vh; 6 | @include flexCenter(); 7 | 8 | &__container { 9 | @include flexCenter(); 10 | flex-direction: column; 11 | gap: 15px; 12 | 13 | &__title { 14 | font-family: "Montserrat Alternates"; 15 | color: #fff; 16 | font-size: 30px; 17 | text-align: center; 18 | 19 | span { 20 | color: $yellow; 21 | font-family: "Montserrat Alternates"; 22 | } 23 | } 24 | 25 | &__button { 26 | background-color: $yellow; 27 | border: none; 28 | padding: 10px 20px; 29 | border-radius: 15px; 30 | font-size: 25px; 31 | font-family: "Montserrat Alternates"; 32 | color: #fff; 33 | font-weight: 800; 34 | cursor: pointer; 35 | text-decoration: none; 36 | text-align: center; 37 | box-shadow: 0 0 10px $yellow; 38 | transition: $transition!important; 39 | 40 | &:hover { 41 | background-color: transparent; 42 | color: $yellow; 43 | } 44 | } 45 | } 46 | 47 | @media screen and (min-width: 768px) { 48 | &__container { 49 | @include flexCenterStart(); 50 | 51 | &__title { 52 | font-size: 45px; 53 | text-align: left; 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Montserrat+Alternates:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"); 2 | 3 | @import "./components/variables.scss"; 4 | 5 | * { 6 | padding: 0; margin: 0; 7 | box-sizing: border-box; 8 | font-family: sans-serif; 9 | } 10 | 11 | ::selection { 12 | background-color: rgb(218, 218, 77); 13 | color: #fff; 14 | } 15 | 16 | html { 17 | scroll-behavior: smooth; 18 | } 19 | 20 | body { 21 | overflow-x: hidden; 22 | } 23 | 24 | .App .container { 25 | width: 350px; 26 | margin: 0 auto; 27 | } 28 | 29 | .container__navigation { 30 | ul li button { 31 | background-color: $yellow; 32 | font-family: "Montserrat Alternates"; 33 | color: #fff; 34 | 35 | &:hover { 36 | background-color: $yellow!important; 37 | opacity: .8; 38 | } 39 | } 40 | 41 | .css-yuzg60-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected { 42 | background-color: $yellow!important; 43 | opacity: .8; 44 | } 45 | 46 | .css-1v2lvtn-MuiPaginationItem-root { 47 | color: #fff; 48 | } 49 | } 50 | 51 | @media screen and (min-width: 768px) { 52 | .App .container { 53 | width: 768px; 54 | } 55 | } 56 | 57 | @media screen and (min-width: 992px) { 58 | .App .container { 59 | width: 992px; 60 | } 61 | } 62 | 63 | @media screen and (min-width: 1200px) { 64 | .App .container { 65 | width: 1200px; 66 | } 67 | } -------------------------------------------------------------------------------- /src/components/Home/Main/Main.css: -------------------------------------------------------------------------------- 1 | .main { 2 | width: 100%; 3 | min-height: 100vh; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; } 7 | .main__container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | flex-direction: column; 12 | gap: 15px; } 13 | .main__container__title { 14 | font-family: "Montserrat Alternates"; 15 | color: #fff; 16 | font-size: 30px; 17 | text-align: center; } 18 | .main__container__title span { 19 | color: #dada4d; 20 | font-family: "Montserrat Alternates"; } 21 | .main__container__button { 22 | background-color: #dada4d; 23 | border: none; 24 | padding: 10px 20px; 25 | border-radius: 15px; 26 | font-size: 25px; 27 | font-family: "Montserrat Alternates"; 28 | color: #fff; 29 | font-weight: 800; 30 | cursor: pointer; 31 | text-decoration: none; 32 | text-align: center; 33 | box-shadow: 0 0 10px #dada4d; 34 | transition: all 0.4s !important; } 35 | .main__container__button:hover { 36 | background-color: transparent; 37 | color: #dada4d; } 38 | @media screen and (min-width: 768px) { 39 | .main__container { 40 | display: flex; 41 | justify-content: center; 42 | align-items: flex-start; } 43 | .main__container__title { 44 | font-size: 45px; 45 | text-align: left; } } 46 | 47 | /*# sourceMappingURL=Main.css.map */ 48 | -------------------------------------------------------------------------------- /src/components/Home/Header/Header.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAGA,UAGC;EAFC,WAAW,EAAE,MAAM;EACnB,GAAG,EAAE,sDAAsD;AAG7D,OAAQ;EACN,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,gBAAgB;ECLzB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EDKnB,UAAU,EEbC,QAAO;EFelB,YAAO;IACL,KAAK,EAAE,IAAI;IChBb,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,MAAM;IDiBjB,kBAAQ;MACN,WAAW,EAAE,MAAM;MACnB,KAAK,EEtBF,OAAiB;MFuBpB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,SAAS,EAAE,0CAA0C;MACrD,eAAe,EAAE,IAAI;IAGvB,kBAAQ;MACN,OAAO,EAAE,IAAI;MACb,cAAc,EAAE,MAAM;MACtB,UAAU,EAAE,MAAM;MAClB,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,IAAI;MAGnB,8BAAQ;QACN,eAAe,EAAE,IAAI;QACrB,KAAK,EAAE,IAAI;QACX,WAAW,EAAE,MAAM;QACnB,UAAU,EExCP,QAAO;QFyCV,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,aAAa;QAC1B,SAAS,EAAE,yCAAyC;QAEpD,oCAAQ;UACN,KAAK,EE/CR,OAAiB;UFgDd,WAAW,EAAE,gBAAgB;MAKnC,oCAAqC;QAxBvC,kBAAQ;UAyBJ,QAAQ,EAAE,KAAK;UACf,IAAI,EAAE,CAAC;UACP,gBAAgB,EAAE,OAAiB;UACnC,KAAK,EAAE,IAAI;UACX,aAAa,EAAE,MAAM;UACrB,UAAU,EAAE,mBAAqB;MAGnC,oCAAqC;QAjCvC,kBAAQ;UAkCJ,cAAc,EAAE,GAAG;UACnB,UAAU,EAAE,IAAI;IAIpB,mBAAS;MACP,QAAQ,EAAE,QAAQ;MAClB,KAAK,EAAE,MAAM;MACb,MAAM,EAAE,OAAO;MACf,KAAK,EAAE,IAAI;MAAE,MAAM,EAAE,IAAI;MACzB,WAAW,EAAE,IAAI;MACjB,UAAU,EEzEH,QAAO;IF4EhB,oBAAU;MACR,MAAM,EAAE,OAAO;IAGjB,oCAAqC;MACnC,yCAAoB;QAClB,OAAO,EAAE,IAAI;MAGf,kBAAQ;QACN,SAAS,EAAE,IAAI;IAInB,oCAAqC;MACnC,kBAAQ;QACN,SAAS,EAAE,IAAI;MAGjB,8BAAoB;QAClB,SAAS,EAAE,IAAI;IAInB,qCAAsC;MACpC,kBAAQ;QACN,SAAS,EAAE,IAAI;MAGjB,8BAAoB;QAClB,SAAS,EAAE,IAAI;;AAMvB,6BAQC;EAPC,IAAK;IACH,WAAW,EAAE,eAAe;EAG9B,EAAG;IACD,WAAW,EAAE,gBAAgB;AAKjC,4BAQC;EAPC,IAAK;IACH,WAAW,EAAE,YAAY;EAG3B,EAAG;IACD,WAAW,EAAE,aAAa;AAI9B,UAAW;EACT,UAAU,EAAE,OAAiB;EAC7B,OAAO,EAAE,CAAC", 4 | "sources": ["Header.scss","../../mixins.scss","../../variables.scss"], 5 | "names": [], 6 | "file": "Header.css" 7 | } -------------------------------------------------------------------------------- /src/components/Characters/Filter/Filter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Filter = props => { 4 | 5 | const handleSelectChange = e => { 6 | const { name, value } = e.target; 7 | 8 | switch (name) { 9 | case "Species": 10 | props.setSpecies(value); 11 | break; 12 | 13 | case "Status": 14 | props.setStatus(value); 15 | break; 16 | 17 | case "Gender": 18 | props.setGender(value); 19 | break; 20 | 21 | default: 22 | break; 23 | } 24 | }; 25 | 26 | 27 | const handleSelectAll = () => { 28 | props.setSpecies(""); 29 | props.setStatus(""); 30 | props.setGender(""); 31 | } 32 | 33 | return ( 34 |
35 | 43 | 44 | 52 | 53 | 61 | 62 | 63 |
64 | ); 65 | } 66 | 67 | export default Filter; -------------------------------------------------------------------------------- /src/components/Locations/Locations.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["Locations.scss","../variables.scss","../mixins.scss"], 5 | "names": [], 6 | "file": "Locations.css" 7 | } -------------------------------------------------------------------------------- /src/components/List/List.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["List.scss","../variables.scss","../mixins.scss"], 5 | "names": [], 6 | "file": "List.css" 7 | } -------------------------------------------------------------------------------- /src/components/Home/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Footer.css'; 3 | 4 | const Footer = () => { 5 | return ( 6 | 27 | ); 28 | } 29 | 30 | export default Footer; -------------------------------------------------------------------------------- /src/components/Episodes/Episodes.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["Episodes.scss","../variables.scss","../mixins.scss"], 5 | "names": [], 6 | "file": "Episodes.css" 7 | } -------------------------------------------------------------------------------- /src/components/Home/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from 'react'; 2 | import './Header.css'; 3 | import aos from 'aos'; 4 | import 'aos/dist/aos.css'; 5 | 6 | const Header = () => { 7 | const [isVisible, setIsVisible] = useState(false); 8 | const header = useRef(); 9 | 10 | const showMenu = () => { 11 | setIsVisible(true); 12 | } 13 | 14 | const hideMenu = () => { 15 | setIsVisible(false); 16 | } 17 | 18 | useEffect(() => { 19 | aos.init(); 20 | }, []); 21 | 22 | window.onscroll = () => { 23 | window.scrollY >= 50 ? header.current.classList.add('bg-header') 24 | : header.current.classList.remove('bg-header'); 25 | } 26 | 27 | return ( 28 |
29 | {/* Container */} 30 | 67 |
68 | ); 69 | } 70 | 71 | export default Header; -------------------------------------------------------------------------------- /src/components/Characters/Characters.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["Characters.scss","../variables.scss","../mixins.scss"], 5 | "names": [], 6 | "file": "Characters.css" 7 | } -------------------------------------------------------------------------------- /src/components/Home/Header/Header.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: stoney; 3 | src: url("../../../assets/fonts/stoney-billy/STONB___.TTF"); } 4 | .header { 5 | width: 100%; 6 | position: fixed; 7 | width: 100%; 8 | padding: 20px 25px 20px 0; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | transition: all 0.4s; } 13 | .header__nav { 14 | width: 100%; 15 | display: flex; 16 | justify-content: space-between; 17 | align-items: center; } 18 | .header__nav__logo { 19 | font-family: stoney; 20 | color: #dada4d; 21 | font-size: 25px; 22 | text-align: center; 23 | animation: 1s ease-in-out onLoadShadowYellow forwards; 24 | text-decoration: none; } 25 | .header__nav__list { 26 | display: flex; 27 | flex-direction: column; 28 | text-align: center; 29 | row-gap: 2rem; 30 | list-style-type: none; } 31 | .header__nav__list__item__link { 32 | text-decoration: none; 33 | color: #fff; 34 | font-family: stoney; 35 | transition: all 0.4s; 36 | font-size: 15px; 37 | text-shadow: 0 0 10px #fff; 38 | animation: 1s ease-in-out onLoadShadowWhite forwards; } 39 | .header__nav__list__item__link:hover { 40 | color: #dada4d; 41 | text-shadow: 0 0 10px #dada4d; } 42 | @media screen and (max-width: 767px) { 43 | .header__nav__list { 44 | position: fixed; 45 | left: 0; 46 | background-color: #070a0d; 47 | width: 100%; 48 | padding-block: 3.5rem; 49 | transition: all 0.4s !important; } } 50 | @media screen and (min-width: 767px) { 51 | .header__nav__list { 52 | flex-direction: row; 53 | column-gap: 2rem; } } 54 | .header__nav__close { 55 | position: absolute; 56 | right: 1.7rem; 57 | cursor: pointer; 58 | width: 40px; 59 | height: 40px; 60 | padding-top: 25px; 61 | transition: all 0.4s; } 62 | .header__nav__toggle { 63 | cursor: pointer; } 64 | @media screen and (min-width: 768px) { 65 | .header__nav__close, .header__nav__toggle { 66 | display: none; } 67 | .header__nav__logo { 68 | font-size: 15px; } } 69 | @media screen and (min-width: 992px) { 70 | .header__nav__logo { 71 | font-size: 20px; } 72 | .header__nav__list__item__link { 73 | font-size: 18px; } } 74 | @media screen and (min-width: 1000px) { 75 | .header__nav__logo { 76 | font-size: 30px; } 77 | .header__nav__list__item__link { 78 | font-size: 20px; } } 79 | 80 | @keyframes onLoadShadowYellow { 81 | from { 82 | text-shadow: 0 0 0px #dada4d; } 83 | to { 84 | text-shadow: 0 0 10px #dada4d; } } 85 | @keyframes onLoadShadowWhite { 86 | from { 87 | text-shadow: 0 0 0px #fff; } 88 | to { 89 | text-shadow: 0 0 10px #fff; } } 90 | .bg-header { 91 | background: #070a0d; 92 | z-index: 1; } 93 | 94 | /*# sourceMappingURL=Header.css.map */ 95 | -------------------------------------------------------------------------------- /src/components/Locations/Locations.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | 3 | // import component styles 4 | import "./Locations.css"; 5 | 6 | // Pagination import 7 | import Pagination from '@mui/material/Pagination'; 8 | import Filter from './Filter/Filter'; 9 | 10 | // API 11 | const API = "https://rickandmortyapi.com/api/character/"; 12 | 13 | const Locations = () => { 14 | const [pagesCount, setPagesCount] = useState(1); 15 | const [page, setPage] = useState(1); 16 | const [locations, setLocations] = useState([]); 17 | 18 | let [typeOptUpd, setTypeOptUpd] = useState([]); 19 | let [dimensionOptUpd, setDimensionOptUpd] = useState([]); 20 | 21 | const [name, setName] = useState(""); 22 | const [type, setType] = useState(""); 23 | const [dimension, setDimension] = useState(""); 24 | 25 | useEffect(() => { 26 | fetch(API + `?page=${page}&name=${name}&type=${type}&dimension=${dimension}`) 27 | .then(res => res.json()) 28 | .then(data => { 29 | setPagesCount(data.info.pages); 30 | setLocations(data.results); 31 | 32 | const typeOpt = []; 33 | const dimensionOpt = []; 34 | 35 | data.results.map((item) => { 36 | typeOpt.push(item.type); 37 | dimensionOpt.push(item.dimension); 38 | return item; 39 | }); 40 | 41 | setTypeOptUpd([...new Set(typeOpt)]); 42 | setDimensionOptUpd([...new Set(dimensionOpt)]); 43 | }) 44 | }, [dimension, name, type, page]); 45 | 46 | const PaginationChange = (event, page) => setPage(page); 47 | 48 | // HTML 49 | return ( 50 |
51 | 52 | {/* Container */} 53 |
54 | 55 | {/* Title */} 56 |

Locations

57 | 58 | {/* Filters */} 59 | 69 | 70 | {/* Render locations */} 71 |
    72 | {locations.map((item, key) => { 73 | return ( 74 |
  • 75 |

    {item.name}

    76 |

    Type: {item.type}

    77 |

    Dimension: {item.dimension}

    78 |

    Watch the location

    79 |
    • 80 | ); 81 | })} 82 |
83 | 84 | {/* Pagination */} 85 | 91 |
92 |
93 | ); 94 | } 95 | 96 | export default Locations; 97 | -------------------------------------------------------------------------------- /src/components/Home/Header/Header.scss: -------------------------------------------------------------------------------- 1 | @import '../../mixins.scss'; 2 | @import '../../variables.scss'; 3 | 4 | @font-face { 5 | font-family: stoney; 6 | src: url("../../../assets/fonts/stoney-billy/STONB___.TTF"); 7 | } 8 | 9 | .header { 10 | width: 100%; 11 | position: fixed; 12 | width: 100%; 13 | padding: 20px 25px 20px 0; 14 | @include flexCenter(); 15 | transition: $transition; 16 | 17 | &__nav { 18 | width: 100%; 19 | @include flexSpaceBetween(); 20 | 21 | &__logo { 22 | font-family: stoney; 23 | color: $yellow; 24 | font-size: 25px; 25 | text-align: center; 26 | animation: 1s ease-in-out onLoadShadowYellow forwards; 27 | text-decoration: none; 28 | } 29 | 30 | &__list { 31 | display: flex; 32 | flex-direction: column; 33 | text-align: center; 34 | row-gap: 2rem; 35 | list-style-type: none; 36 | 37 | &__item { 38 | &__link { 39 | text-decoration: none; 40 | color: #fff; 41 | font-family: stoney; 42 | transition: $transition; 43 | font-size: 15px; 44 | text-shadow: 0 0 10px #fff; 45 | animation: 1s ease-in-out onLoadShadowWhite forwards; 46 | 47 | &:hover { 48 | color: $yellow; 49 | text-shadow: 0 0 10px $yellow; 50 | } 51 | } 52 | } 53 | 54 | @media screen and (max-width: 767px) { 55 | position: fixed; 56 | left: 0; 57 | background-color: hsl(210, 32%, 4%); 58 | width: 100%; 59 | padding-block: 3.5rem; 60 | transition: $transition!important; 61 | } 62 | 63 | @media screen and (min-width: 767px) { 64 | flex-direction: row; 65 | column-gap: 2rem; 66 | } 67 | } 68 | 69 | &__close { 70 | position: absolute; 71 | right: 1.7rem; 72 | cursor: pointer; 73 | width: 40px; height: 40px; 74 | padding-top: 25px; 75 | transition: $transition; 76 | } 77 | 78 | &__toggle { 79 | cursor: pointer; 80 | } 81 | 82 | @media screen and (min-width: 768px) { 83 | &__close, &__toggle { 84 | display: none; 85 | } 86 | 87 | &__logo { 88 | font-size: 15px; 89 | } 90 | } 91 | 92 | @media screen and (min-width: 992px) { 93 | &__logo { 94 | font-size: 20px; 95 | } 96 | 97 | &__list__item__link { 98 | font-size: 18px; 99 | } 100 | } 101 | 102 | @media screen and (min-width: 1000px) { 103 | &__logo { 104 | font-size: 30px; 105 | } 106 | 107 | &__list__item__link { 108 | font-size: 20px; 109 | } 110 | } 111 | } 112 | } 113 | 114 | @keyframes onLoadShadowYellow { 115 | from { 116 | text-shadow: 0 0 0px $yellow; 117 | } 118 | 119 | to { 120 | text-shadow: 0 0 10px $yellow; 121 | } 122 | } 123 | 124 | 125 | @keyframes onLoadShadowWhite { 126 | from { 127 | text-shadow: 0 0 0px #fff; 128 | } 129 | 130 | to { 131 | text-shadow: 0 0 10px #fff; 132 | } 133 | } 134 | 135 | .bg-header { 136 | background: hsl(210, 32%, 4%); 137 | z-index: 1; 138 | } -------------------------------------------------------------------------------- /src/components/Episodes/Episodes.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import './Episodes.css'; 3 | 4 | // AOS 5 | import aos from 'aos'; 6 | import 'aos/dist/aos.css'; 7 | 8 | // Pagination import 9 | import Pagination from '@mui/material/Pagination'; 10 | 11 | const Episodes = () => { 12 | const [episodes, setEpisodes] = useState([]); 13 | const [pagesCount, setPagesCount] = useState(0); 14 | const [isOpen, setIsOpen] = useState(true); 15 | const [name, setName] = useState(""); 16 | const [page, setPage] = useState(1); 17 | 18 | const PaginationChange = (event, page) => setPage(page); 19 | 20 | useEffect(() => { 21 | // AOS initialization 22 | aos.init(); 23 | 24 | fetch(`https://rickandmortyapi.com/api/episode/?name=${name}&page=${page}`) 25 | .then(res => res.json()) 26 | .then(data => { 27 | setPagesCount(data.info.pages); 28 | setEpisodes(data.results); 29 | }) 30 | }, [name, page]); 31 | 32 | const itemClickHandler = e => { 33 | setName(e.target.textContent); 34 | setIsOpen(!isOpen); 35 | } 36 | 37 | const inputClickHandler = () => { 38 | setIsOpen(true); 39 | } 40 | 41 | return ( 42 |
43 | 44 | {/* Container */} 45 |
46 | {/* Title */} 47 |

Episodes

48 | 49 | {/* Wrapper for the input and dropdown menu */} 50 |
51 | {/* Search element */} 52 | {setName(e.target.value)}} 57 | onClick={inputClickHandler} 58 | placeholder="Search by the name" 59 | /> 60 | 61 | {/* Dropdown menu */} 62 |
    63 | 64 | {/* Dropdown menu items */} 65 | {name && isOpen ? episodes.map((episode, key) => { 66 | return ( 67 |
  • 72 | {episode.name} 73 |
    • 74 | ); 75 | }) 76 | : null 77 | } 78 |
79 |
80 | 81 |
82 | {episodes.map((episode, key) => { 83 | return ( 84 |
85 |

{episode.episode}

86 |

Name: {episode.name}

87 |

Air Date: {episode.air_date}

88 |

Watch the episode

89 |
90 | ) 91 | })} 92 |
93 | 94 | 100 |
101 |
102 | ); 103 | } 104 | 105 | export default Episodes; 106 | -------------------------------------------------------------------------------- /src/components/Locations/Filter/Filter.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | const Filter = filters => { 4 | const [isOpen, setIsOpen] = useState(true); 5 | 6 | const itemClickHandler = e => { 7 | filters.setName(e.target.textContent); 8 | setIsOpen(!isOpen); 9 | } 10 | 11 | const inputClickHandler = () => { 12 | setIsOpen(true); 13 | } 14 | 15 | const handleClick = () => { 16 | filters.setName(""); 17 | filters.setType(""); 18 | filters.setDimension(""); 19 | } 20 | 21 | const handleSelectChange = e => { 22 | if (e.target.name === "Type") { 23 | filters.setType(e.target.value); 24 | } 25 | 26 | if (e.target.name === "Dimension") { 27 | filters.setDimension(e.target.value); 28 | } 29 | } 30 | 31 | return ( 32 |
33 | {/* Names filter */} 34 | filters.setName(e.target.value)} 40 | onClick={inputClickHandler} 41 | /> 42 | 43 | {/* Dropdown menu */} 44 | 59 | 60 | {/* Row of the selects */} 61 |
62 | {/* Types filter */} 63 | 88 | 89 | {/* Dimensions filter */} 90 | 115 |
116 | 117 | {/* Show All button */} 118 | 124 |
125 | ); 126 | } 127 | 128 | export default Filter; 129 | -------------------------------------------------------------------------------- /src/components/List/List.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | @import "../variables.scss"; 3 | @import "../mixins.scss"; 4 | 5 | // Stoney font 6 | @font-face { 7 | font-family: stoney; 8 | src: url("../../assets/fonts/stoney-billy/STONB___.TTF"); 9 | } 10 | 11 | // My Watch List section 12 | .watchList { 13 | width: 100%; min-height: 100vh; 14 | background-color: $background; 15 | 16 | // Container 17 | &__container { 18 | @include flexCenter(); 19 | flex-direction: column; 20 | padding: 2rem 0; 21 | gap: 2rem; 22 | 23 | // Title 24 | .container__title { 25 | font-family: stoney; 26 | color: $yellow; 27 | text-shadow: 0 0 10px $yellow; 28 | } 29 | 30 | // noTodo 31 | .container__noTodo { 32 | color: #fff; 33 | font-family: "Montserrat Alternates"; 34 | font-size: 22px; 35 | text-align: center; 36 | font-weight: 800; 37 | } 38 | 39 | // ToDo 40 | .container__todo { 41 | @include flexCenterStart(); 42 | flex-direction: column; 43 | gap: 20px; 44 | width: 90%; 45 | 46 | .todo__item { 47 | background-color: $yellow; 48 | width: 100%; 49 | @include flexSpaceBetween(); 50 | padding: 1rem 2rem; 51 | border-radius: 10px; 52 | box-shadow: 0 0 10px $yellow; 53 | 54 | .item__checkbox { 55 | border: 3px solid #fff; 56 | width: 18px; height: 15px; 57 | cursor: pointer; 58 | transition: $transition; 59 | } 60 | 61 | .item__checked-false { 62 | border-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%) 1; 63 | 64 | &:hover { 65 | border-image: linear-gradient(-147deg, #FFE53B 0%, #FF2525 74%) 1; 66 | } 67 | } 68 | 69 | .item__checked-true { 70 | border-image: linear-gradient(-47deg, #85FFBD 0%, #FFFB7D 100%) 1; 71 | 72 | &:hover { 73 | border-image: linear-gradient(47deg, #85FFBD 0%, #FFFB7D 100%) 1; 74 | } 75 | } 76 | 77 | .item__name { 78 | width: 100%; 79 | padding-left: 1rem; 80 | color: #fff; 81 | font-family: "Montserrat Alternates"; 82 | font-weight: 800; 83 | font-size: 18px; 84 | cursor: pointer; 85 | } 86 | 87 | .item__delete { 88 | background-color: transparent; 89 | border: none; 90 | cursor: pointer; 91 | transition: $transition; 92 | 93 | svg { 94 | fill: rgb(128, 128, 128); 95 | } 96 | 97 | &:hover { 98 | svg { 99 | fill: #ffb13b; 100 | } 101 | } 102 | } 103 | } 104 | } 105 | 106 | .row { 107 | width: 100%; 108 | @include flexCenter(); 109 | gap: 1rem; 110 | } 111 | 112 | .container__input { 113 | background-color: transparent; 114 | border: 1px solid #fff; 115 | box-shadow: 0 0 5px #fff; 116 | padding: 1rem 1.5rem; 117 | font-family: "Montserrat Alternates"; 118 | font-size: 17px; 119 | border-radius: 10px; 120 | color: $yellow; 121 | 122 | &:focus { 123 | outline: none; 124 | } 125 | } 126 | 127 | .container__button { 128 | background-color: $yellow; 129 | border-radius: 100%; 130 | width: 40px; height: 40px; 131 | border: none; 132 | color: #fff; 133 | font-size: 30px; 134 | font-family: 'Montserrat Alternates'; 135 | font-weight: 400; 136 | cursor: pointer; 137 | user-select: none; 138 | 139 | &:hover { 140 | box-shadow: 0 0 5px $yellow; 141 | } 142 | } 143 | 144 | .container__dropdown { 145 | width: 100%; 146 | list-style-type: none; 147 | background-color: #fff; 148 | 149 | .dropdown__item { 150 | padding: 1rem 1.5rem; 151 | font-size: 17px; 152 | font-family: 'Montserrat Alternates'; 153 | font-weight: 600; 154 | cursor: pointer; 155 | 156 | &:hover { 157 | background-color: $yellow; 158 | } 159 | } 160 | } 161 | } 162 | } -------------------------------------------------------------------------------- /src/components/List/List.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import Todo from './Todo/Todo'; 3 | import "./List.css"; 4 | 5 | const List = () => { 6 | // episodes state 7 | const [episodes, setEpisodes] = useState([]); 8 | 9 | // check for the dropdown menu 10 | const [isOpen, setIsOpen] = useState(true); 11 | 12 | // todo list 13 | const [todoList, setTodoList] = useState(JSON.parse(localStorage.getItem("todoList")) || []); 14 | 15 | // name of the episode you search 16 | const [name, setName] = useState(""); 17 | 18 | // useEffect to fetch episodes 19 | useEffect(() => { 20 | // Fetching... 21 | fetch(`https://rickandmortyapi.com/api/episode/?name=${name}`) 22 | .then(response => response.json()) 23 | .then(data => { 24 | // setting the episodes array 25 | setEpisodes(data.results); 26 | }) 27 | }, [name]); 28 | 29 | // Click on the dropdown item 30 | const itemClickHandler = e => { 31 | setName(e.target.textContent); 32 | setIsOpen(!isOpen); 33 | } 34 | 35 | // Click on the input 36 | const inputClickHandler = () => { 37 | setIsOpen(true); 38 | } 39 | 40 | // addTodo function 41 | const addTodo = () => { 42 | todoList.push({_id: todoList.length, name: name, isChecked: false}); 43 | setName(""); 44 | localStorage.setItem("todoList", JSON.stringify(todoList)); 45 | } 46 | 47 | //Check todo 48 | const toggleCheckedTodo = idx => { 49 | const newArray = [].concat(todoList); 50 | newArray[idx].isChecked = !newArray[idx].isChecked; 51 | setTodoList(newArray); 52 | localStorage.setItem("todoList", JSON.stringify(newArray)); 53 | } 54 | 55 | // Delete todo item 56 | const deleteTodo = idx => { 57 | const newArray = [].concat(todoList); 58 | newArray.splice(idx, 1); 59 | setTodoList(newArray); 60 | localStorage.setItem("todoList", JSON.stringify(newArray)); 61 | } 62 | 63 | const sortedTodo = todoList.sort((a, b) => b.isChecked - a.isChecked); 64 | 65 | // HTML 66 | return ( 67 |
68 | {/* Container */} 69 |
70 | 71 | {/* Title */} 72 |

my watch list

73 | 74 |

{sortedTodo[0] === undefined ? "Add episodes you want to watch later" : ""}

75 | 76 | {/* Input to search episodes from the API */} 77 |
78 |
79 | setName(e.target.value)} 85 | onClick={inputClickHandler} 86 | /> 87 | 88 | {/* Add todo button */} 89 | 95 |
96 | 97 | {/* Dropdown menu */} 98 |
    99 | {episodes && name && isOpen ? episodes.map((item, key) => { 100 | return ( 101 |
  • 106 | {item.name} 107 |
    • 108 | ) 109 | }) 110 | : null 111 | } 112 |
113 |
114 | 115 | {/* ToDo */} 116 |
117 | {sortedTodo ? sortedTodo.map((item, idx) => { 118 | return 126 | }) 127 | : null 128 | } 129 |
130 |
131 |
132 | ); 133 | } 134 | 135 | export default List; 136 | -------------------------------------------------------------------------------- /src/components/Episodes/Episodes.scss: -------------------------------------------------------------------------------- 1 | @import "../variables.scss"; 2 | @import "../mixins.scss"; 3 | 4 | @font-face { 5 | font-family: stoney; 6 | src: url("../../assets/fonts/stoney-billy/STONB___.TTF"); 7 | } 8 | 9 | .episodes { 10 | width: 100%; 11 | background-color: $background; 12 | 13 | &__container { 14 | padding-top: 3rem; 15 | @include flexCenter(); 16 | flex-direction: column; 17 | gap: 1.5rem; 18 | 19 | .container__title { 20 | text-align: center; 21 | font-family: stoney; 22 | color: $yellow; 23 | text-shadow: 0 0 5px $yellow; 24 | font-size: 30px; 25 | } 26 | 27 | .form { 28 | width: 100%; 29 | @include flexCenter(); 30 | flex-direction: column; 31 | position: relative; 32 | } 33 | 34 | .container__input { 35 | background-color: transparent; 36 | border: 1px solid $yellow; 37 | font-family: "Montserrat Alternates"; 38 | padding: 10px 15px; 39 | border-radius: 10px; 40 | font-size: 16px; 41 | box-shadow: 0 0 7px $yellow; 42 | color: $yellow; 43 | 44 | &::placeholder { 45 | color: #fff; 46 | opacity: .7; 47 | } 48 | 49 | &:focus { 50 | outline: none; 51 | } 52 | } 53 | 54 | .container__dropdown { 55 | width: 100%; 56 | background-color: #fff; 57 | list-style-type: none; 58 | 59 | .dropdown__item { 60 | cursor: pointer; 61 | width: 100%; height: 50px; 62 | @include flexJustifyCenterStart(); 63 | padding-left: 20px; 64 | font-family: "Montserrat Alternates"; 65 | 66 | &:hover { 67 | background-color: $yellow; 68 | } 69 | } 70 | } 71 | 72 | .container__episodes-wrap { 73 | width: 100%; 74 | padding: 0 2rem; 75 | 76 | .episodes-wrap__episode { 77 | width: 100%; 78 | margin-top: 2rem; 79 | padding: 1rem 2rem; 80 | background-color: $yellow; 81 | border-radius: 10px; 82 | box-shadow: 0 0 7px $yellow; 83 | @include flexCenterStart(); 84 | flex-direction: column; 85 | gap: 10px; 86 | cursor: pointer; 87 | transition: $transition; 88 | 89 | &:hover { 90 | opacity: .7!important; 91 | } 92 | 93 | &__number, &__name { 94 | font-family: "Montserrat Alternates"; 95 | font-weight: 800; 96 | color: #fff; 97 | font-size: 21px; 98 | } 99 | 100 | &__name { 101 | font-weight: 500; 102 | font-size: 16px; 103 | 104 | span { 105 | font-family: "Montserrat Alternates"; 106 | font-weight: 800; 107 | } 108 | } 109 | 110 | &__airDate { 111 | font-family: "Montserrat Alternates"; 112 | font-weight: 600; 113 | color: #fff; 114 | font-size: 16px; 115 | 116 | span { 117 | font-family: "Montserrat Alternates"; 118 | font-weight: 800; 119 | } 120 | } 121 | 122 | &__url { 123 | font-family: "Montserrat Alternates"; 124 | font-weight: 800; 125 | color: #fff; 126 | font-size: 15px; 127 | 128 | a { 129 | text-decoration: none; 130 | color: $background; 131 | font-family: "Montserrat Alternates"; 132 | opacity: .7; 133 | 134 | &:hover { 135 | text-shadow: 0 0 1px $background; 136 | } 137 | } 138 | } 139 | } 140 | } 141 | } 142 | 143 | @media screen and (min-width: 768px) { 144 | .container__episodes-wrap { 145 | width: 80%; 146 | } 147 | } 148 | 149 | @media screen and (min-width: 768px) { 150 | .episodes-wrap__episode { 151 | .episode__number { 152 | width: 100%; 153 | font-size: 29px; 154 | text-align: center; 155 | } 156 | 157 | .episode____name { 158 | font-size: 28px; 159 | } 160 | 161 | .episode____airDate { 162 | font-size: 25px; 163 | } 164 | 165 | .episode____url { 166 | font-size: 24px; 167 | } 168 | } 169 | } 170 | 171 | } 172 | 173 | .container__navigation { 174 | margin-bottom: 1.5rem; 175 | } -------------------------------------------------------------------------------- /src/components/Locations/Locations.scss: -------------------------------------------------------------------------------- 1 | // Variables and mixins imports 2 | @import "../variables.scss"; 3 | @import "../mixins.scss"; 4 | 5 | // font family Stoney face 6 | @font-face { 7 | font-family: stoney; 8 | src: url("../../assets/fonts/stoney-billy/STONB___.TTF"); 9 | } 10 | 11 | .locations { 12 | width: 100%; 13 | background-color: $background; 14 | 15 | &__container { 16 | padding: 2rem 0; 17 | @include flexCenter(); 18 | flex-direction: column; 19 | gap: 30px; 20 | 21 | .container__title { 22 | font-family: stoney; 23 | color: $yellow; 24 | text-shadow: 0 0 5px $yellow; 25 | text-align: center; 26 | font-size: 30px; 27 | } 28 | 29 | // Filter styles 30 | .container__filters { 31 | width: 100%; 32 | @include flexCenter(); 33 | flex-direction: column; 34 | 35 | // Input styles 36 | .filters__input { 37 | background-color: transparent; 38 | border: 1px solid $yellow; 39 | box-shadow: 0 0 5px $yellow; 40 | color: $yellow; 41 | border-radius: 10px; 42 | font-family: "Montserrat Alternates"; 43 | font-size: 20px; 44 | padding: 10px 20px; 45 | 46 | &::placeholder { 47 | color: #fff; 48 | } 49 | 50 | &:focus { 51 | outline: none; 52 | } 53 | } 54 | 55 | // Dropdown styles 56 | .filters__dropdown { 57 | position: relative; 58 | background-color: #fff; 59 | list-style-type: none; 60 | 61 | .dropdown__item { 62 | padding: 20px; 63 | font-family: "Montserrat Alternates"; 64 | 65 | &:hover { 66 | background-color: $yellow; 67 | cursor: pointer; 68 | } 69 | } 70 | } 71 | 72 | // Select styles 73 | .filters__select, .filters__button { 74 | max-width: 100px; 75 | padding: 10px 20px; 76 | border-radius: 10px; 77 | color: #fff; 78 | background-color: $yellow; 79 | font-family: "Montserrat Alternates"; 80 | font-weight: 800; 81 | font-size: 14px; 82 | cursor: pointer; 83 | border: none; 84 | } 85 | 86 | .filters__button { 87 | min-width: 150px; 88 | padding: 15px 0; 89 | } 90 | } 91 | 92 | .selects { 93 | width: 100%; 94 | @include flexCenter(); 95 | margin: 20px 0; 96 | gap: 30px; 97 | } 98 | 99 | .container__list { 100 | list-style-type: none; 101 | display: grid; 102 | grid-template-columns: repeat(1, 1fr); 103 | gap: 20px; 104 | width: 90%; 105 | 106 | .list__item { 107 | width: 100%; 108 | background-color: $yellow; 109 | border-radius: 10px; 110 | padding: 1rem 2rem; 111 | box-shadow: 0 0 15px $yellow; 112 | cursor: pointer; 113 | transition: $transition!important; 114 | 115 | &:hover { 116 | opacity: .7!important; 117 | } 118 | 119 | .item__name { 120 | color: #fff; 121 | text-align: center; 122 | font-family: "Montserrat Alternates"; 123 | font-weight: 700; 124 | font-size: 25px; 125 | } 126 | 127 | .item__type, .item__dimension, .item__url { 128 | color: #fff; 129 | font-family: "Montserrat Alternates"; 130 | font-weight: 600; 131 | font-size: 20px; 132 | margin-top: 10px; 133 | 134 | span { 135 | color: #fff; 136 | font-family: "Montserrat Alternates"; 137 | font-weight: 800; 138 | font-size: 20px; 139 | } 140 | 141 | a { 142 | color: $background; 143 | text-decoration: none; 144 | font-family: "Montserrat Alternates"; 145 | } 146 | } 147 | } 148 | } 149 | } 150 | 151 | // Media queries 152 | @media screen and (min-width: 992px) { 153 | .locations__container { 154 | .container__list { 155 | .list__item { 156 | .item__name { 157 | font-size: 30px; 158 | } 159 | 160 | .item__type, .item__dimension, .item__url { 161 | font-size: 30px; 162 | 163 | span { 164 | font-size: 30px; 165 | } 166 | } 167 | } 168 | } 169 | } 170 | } 171 | } -------------------------------------------------------------------------------- /src/components/List/List.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: stoney; 3 | src: url("../../assets/fonts/stoney-billy/STONB___.TTF"); } 4 | .watchList { 5 | width: 100%; 6 | min-height: 100vh; 7 | background-color: #0c1215; } 8 | .watchList__container { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | flex-direction: column; 13 | padding: 2rem 0; 14 | gap: 2rem; } 15 | .watchList__container .container__title { 16 | font-family: stoney; 17 | color: #dada4d; 18 | text-shadow: 0 0 10px #dada4d; } 19 | .watchList__container .container__noTodo { 20 | color: #fff; 21 | font-family: "Montserrat Alternates"; 22 | font-size: 22px; 23 | text-align: center; 24 | font-weight: 800; } 25 | .watchList__container .container__todo { 26 | display: flex; 27 | justify-content: center; 28 | align-items: flex-start; 29 | flex-direction: column; 30 | gap: 20px; 31 | width: 90%; } 32 | .watchList__container .container__todo .todo__item { 33 | background-color: #dada4d; 34 | width: 100%; 35 | display: flex; 36 | justify-content: space-between; 37 | align-items: center; 38 | padding: 1rem 2rem; 39 | border-radius: 10px; 40 | box-shadow: 0 0 10px #dada4d; } 41 | .watchList__container .container__todo .todo__item .item__checkbox { 42 | border: 3px solid #fff; 43 | width: 18px; 44 | height: 15px; 45 | cursor: pointer; 46 | transition: all 0.4s; } 47 | .watchList__container .container__todo .todo__item .item__checked-false { 48 | border-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%) 1; } 49 | .watchList__container .container__todo .todo__item .item__checked-false:hover { 50 | border-image: linear-gradient(-147deg, #FFE53B 0%, #FF2525 74%) 1; } 51 | .watchList__container .container__todo .todo__item .item__checked-true { 52 | border-image: linear-gradient(-47deg, #85FFBD 0%, #FFFB7D 100%) 1; } 53 | .watchList__container .container__todo .todo__item .item__checked-true:hover { 54 | border-image: linear-gradient(47deg, #85FFBD 0%, #FFFB7D 100%) 1; } 55 | .watchList__container .container__todo .todo__item .item__name { 56 | width: 100%; 57 | padding-left: 1rem; 58 | color: #fff; 59 | font-family: "Montserrat Alternates"; 60 | font-weight: 800; 61 | font-size: 18px; 62 | cursor: pointer; } 63 | .watchList__container .container__todo .todo__item .item__delete { 64 | background-color: transparent; 65 | border: none; 66 | cursor: pointer; 67 | transition: all 0.4s; } 68 | .watchList__container .container__todo .todo__item .item__delete svg { 69 | fill: gray; } 70 | .watchList__container .container__todo .todo__item .item__delete:hover svg { 71 | fill: #ffb13b; } 72 | .watchList__container .row { 73 | width: 100%; 74 | display: flex; 75 | justify-content: center; 76 | align-items: center; 77 | gap: 1rem; } 78 | .watchList__container .container__input { 79 | background-color: transparent; 80 | border: 1px solid #fff; 81 | box-shadow: 0 0 5px #fff; 82 | padding: 1rem 1.5rem; 83 | font-family: "Montserrat Alternates"; 84 | font-size: 17px; 85 | border-radius: 10px; 86 | color: #dada4d; } 87 | .watchList__container .container__input:focus { 88 | outline: none; } 89 | .watchList__container .container__button { 90 | background-color: #dada4d; 91 | border-radius: 100%; 92 | width: 40px; 93 | height: 40px; 94 | border: none; 95 | color: #fff; 96 | font-size: 30px; 97 | font-family: 'Montserrat Alternates'; 98 | font-weight: 400; 99 | cursor: pointer; 100 | user-select: none; } 101 | .watchList__container .container__button:hover { 102 | box-shadow: 0 0 5px #dada4d; } 103 | .watchList__container .container__dropdown { 104 | width: 100%; 105 | list-style-type: none; 106 | background-color: #fff; } 107 | .watchList__container .container__dropdown .dropdown__item { 108 | padding: 1rem 1.5rem; 109 | font-size: 17px; 110 | font-family: 'Montserrat Alternates'; 111 | font-weight: 600; 112 | cursor: pointer; } 113 | .watchList__container .container__dropdown .dropdown__item:hover { 114 | background-color: #dada4d; } 115 | 116 | /*# sourceMappingURL=List.css.map */ 117 | -------------------------------------------------------------------------------- /src/components/Characters/Characters.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import './Characters.css'; 3 | import aos from 'aos'; 4 | import 'aos/dist/aos.css'; 5 | 6 | // Pagination links 7 | import Pagination from '@mui/material/Pagination'; 8 | import Stack from '@mui/material/Stack'; 9 | import Filter from './Filter/Filter'; 10 | import Popup from './Popup/Popup'; 11 | 12 | // API link 13 | const API = "https://rickandmortyapi.com/api/character/"; 14 | 15 | const Characters = () => { 16 | const [pages, setPages] = useState(0); 17 | const [characters, setCharacters] = useState([]); 18 | const [info, setInfo] = useState(""); 19 | 20 | const [isOpen, setOpen] = useState(false); 21 | 22 | let [speciesOptUpd, setSpeciesOptUpd] = useState([]); 23 | let [statusOptUpd, setStatusOptUpd] = useState([]); 24 | let [genderOptUpd, setGenderOptUpd] = useState([]); 25 | 26 | const [species, setSpecies] = useState([]); 27 | const [status, setStatus] = useState([]); 28 | const [gender, setGender] = useState([]); 29 | 30 | const [page, setPage] = useState(1); 31 | 32 | const handleClickOpen = character => { 33 | setOpen(true); 34 | 35 | setInfo( 36 | { 37 | image: character.image, 38 | name: character.name, 39 | episode: character.episode[0], 40 | gender: character.gender, 41 | location: character.location.name, 42 | species: character.species, 43 | status: character.status, 44 | } 45 | ); 46 | 47 | document.body.style.overflow = 'hidden'; 48 | document.querySelector(".hide").style.opacity = '.5'; 49 | }; 50 | 51 | const handleClose = () => { 52 | setOpen(false); 53 | document.body.style.overflow = 'scroll'; 54 | document.querySelector(".hide").style.opacity = '1'; 55 | }; 56 | 57 | useEffect(() => { 58 | aos.init(); 59 | fetch(API + `?page=${page}&species=${species}&status=${status}&gender=${gender}`) 60 | .then(response => response.json()) 61 | .then(data => { 62 | setPages(data.info.pages); 63 | setCharacters(data.results); 64 | 65 | const speciesOpt = []; 66 | const statusOpt = []; 67 | const genderOpt = []; 68 | 69 | data.results.map((item) => { 70 | speciesOpt.push(item.species); 71 | statusOpt.push(item.status); 72 | genderOpt.push(item.gender); 73 | return item; 74 | }); 75 | 76 | setSpeciesOptUpd([...new Set(speciesOpt)]); 77 | setStatusOptUpd([...new Set(statusOpt)]); 78 | setGenderOptUpd([...new Set(genderOpt)]); 79 | }) 80 | }, [gender, species, status, page]); 81 | 82 | 83 | const PaginationChange = (event, page) => setPage(page); 84 | 85 | return ( 86 |
87 |
88 |

Characters

89 | 90 | {/* Filter */} 91 | 100 | 101 | 102 | {characters.map((item, key) => { 103 | return ( 104 |
105 | 106 | 107 | {"image" 108 |
109 |

{item.name}

110 |

From {item.location.name}

111 |

Species {item.species}

112 |

Status {item.status}

113 |

Gender {item.gender}

114 |
115 |
116 | ) 117 | })} 118 | 119 | 120 | 121 | 122 | {/* Popup */} 123 | 128 | 129 | {/* Pagination */} 130 | 136 |
137 |
138 | ); 139 | } 140 | 141 | export default Characters; 142 | -------------------------------------------------------------------------------- /src/components/Episodes/Episodes.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: stoney; 3 | src: url("../../assets/fonts/stoney-billy/STONB___.TTF"); } 4 | .episodes { 5 | width: 100%; 6 | background-color: #0c1215; } 7 | .episodes__container { 8 | padding-top: 3rem; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | flex-direction: column; 13 | gap: 1.5rem; } 14 | .episodes__container .container__title { 15 | text-align: center; 16 | font-family: stoney; 17 | color: #dada4d; 18 | text-shadow: 0 0 5px #dada4d; 19 | font-size: 30px; } 20 | .episodes__container .form { 21 | width: 100%; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | flex-direction: column; 26 | position: relative; } 27 | .episodes__container .container__input { 28 | background-color: transparent; 29 | border: 1px solid #dada4d; 30 | font-family: "Montserrat Alternates"; 31 | padding: 10px 15px; 32 | border-radius: 10px; 33 | font-size: 16px; 34 | box-shadow: 0 0 7px #dada4d; 35 | color: #dada4d; } 36 | .episodes__container .container__input::placeholder { 37 | color: #fff; 38 | opacity: .7; } 39 | .episodes__container .container__input:focus { 40 | outline: none; } 41 | .episodes__container .container__dropdown { 42 | width: 100%; 43 | background-color: #fff; 44 | list-style-type: none; } 45 | .episodes__container .container__dropdown .dropdown__item { 46 | cursor: pointer; 47 | width: 100%; 48 | height: 50px; 49 | display: flex; 50 | justify-content: flex-start; 51 | align-items: center; 52 | padding-left: 20px; 53 | font-family: "Montserrat Alternates"; } 54 | .episodes__container .container__dropdown .dropdown__item:hover { 55 | background-color: #dada4d; } 56 | .episodes__container .container__episodes-wrap { 57 | width: 100%; 58 | padding: 0 2rem; } 59 | .episodes__container .container__episodes-wrap .episodes-wrap__episode { 60 | width: 100%; 61 | margin-top: 2rem; 62 | padding: 1rem 2rem; 63 | background-color: #dada4d; 64 | border-radius: 10px; 65 | box-shadow: 0 0 7px #dada4d; 66 | display: flex; 67 | justify-content: center; 68 | align-items: flex-start; 69 | flex-direction: column; 70 | gap: 10px; 71 | cursor: pointer; 72 | transition: all 0.4s; } 73 | .episodes__container .container__episodes-wrap .episodes-wrap__episode:hover { 74 | opacity: 0.7 !important; } 75 | .episodes__container .container__episodes-wrap .episodes-wrap__episode__number, .episodes__container .container__episodes-wrap .episodes-wrap__episode__name { 76 | font-family: "Montserrat Alternates"; 77 | font-weight: 800; 78 | color: #fff; 79 | font-size: 21px; } 80 | .episodes__container .container__episodes-wrap .episodes-wrap__episode__name { 81 | font-weight: 500; 82 | font-size: 16px; } 83 | .episodes__container .container__episodes-wrap .episodes-wrap__episode__name span { 84 | font-family: "Montserrat Alternates"; 85 | font-weight: 800; } 86 | .episodes__container .container__episodes-wrap .episodes-wrap__episode__airDate { 87 | font-family: "Montserrat Alternates"; 88 | font-weight: 600; 89 | color: #fff; 90 | font-size: 16px; } 91 | .episodes__container .container__episodes-wrap .episodes-wrap__episode__airDate span { 92 | font-family: "Montserrat Alternates"; 93 | font-weight: 800; } 94 | .episodes__container .container__episodes-wrap .episodes-wrap__episode__url { 95 | font-family: "Montserrat Alternates"; 96 | font-weight: 800; 97 | color: #fff; 98 | font-size: 15px; } 99 | .episodes__container .container__episodes-wrap .episodes-wrap__episode__url a { 100 | text-decoration: none; 101 | color: #0c1215; 102 | font-family: "Montserrat Alternates"; 103 | opacity: .7; } 104 | .episodes__container .container__episodes-wrap .episodes-wrap__episode__url a:hover { 105 | text-shadow: 0 0 1px #0c1215; } 106 | @media screen and (min-width: 768px) { 107 | .episodes .container__episodes-wrap { 108 | width: 80%; } } 109 | @media screen and (min-width: 768px) { 110 | .episodes .episodes-wrap__episode .episode__number { 111 | width: 100%; 112 | font-size: 29px; 113 | text-align: center; } 114 | .episodes .episodes-wrap__episode .episode____name { 115 | font-size: 28px; } 116 | .episodes .episodes-wrap__episode .episode____airDate { 117 | font-size: 25px; } 118 | .episodes .episodes-wrap__episode .episode____url { 119 | font-size: 24px; } } 120 | 121 | .container__navigation { 122 | margin-bottom: 1.5rem; } 123 | 124 | /*# sourceMappingURL=Episodes.css.map */ 125 | -------------------------------------------------------------------------------- /src/components/Characters/Characters.scss: -------------------------------------------------------------------------------- 1 | @import "../variables.scss"; 2 | @import "../mixins.scss"; 3 | 4 | @font-face { 5 | font-family: stoney; 6 | src: url("../../assets/fonts/stoney-billy/STONB___.TTF"); 7 | } 8 | 9 | .characters { 10 | width: 100%; 11 | background-color: $background; 12 | 13 | .css-1p5q5e5-MuiStack-root>:not(style)+:not(style) { 14 | margin-top: 0!important; 15 | } 16 | 17 | &__container { 18 | padding: 2rem 0; 19 | @include flexCenter(); 20 | flex-direction: column; 21 | gap: 2rem; 22 | position: relative; 23 | 24 | .form { 25 | width: 100%; 26 | display: grid; 27 | grid-template-columns: repeat(1, 1fr); 28 | gap: 20px; 29 | 30 | &__select, &__button { 31 | background-color: $yellow; 32 | color: #fff; 33 | padding: 12px; 34 | border: none; 35 | font-size: 15px; 36 | box-shadow: 0 5px 25px rgba(0, 0, 0, .2); 37 | -webkit-appearance: button; 38 | appearance: button; 39 | outline: none; 40 | cursor: pointer; 41 | font-family: "Montserrat Alternates"; 42 | border-radius: 10px; 43 | text-align: center; 44 | min-width: 200px; 45 | } 46 | } 47 | 48 | .container__title { 49 | font-family: stoney; 50 | color: $yellow; 51 | text-align: center; 52 | text-shadow: 0 0 5px $yellow; 53 | font-size: 30px; 54 | } 55 | 56 | .container__pagination { 57 | display: grid!important; 58 | grid-template-columns: repeat(1, 1fr); 59 | gap: 3rem; 60 | 61 | .pagination__character { 62 | @include flexSpaceBetween(); 63 | flex-direction: column; 64 | background-color: $yellow; 65 | border-radius: 30px; 66 | padding: 2.5rem 20px; 67 | gap: 1rem; 68 | box-shadow: 0 0 30px $yellow; 69 | cursor: pointer; 70 | transition: $transition!important; 71 | position: relative; 72 | 73 | &:hover { 74 | box-shadow: 0 0 10px $yellow; 75 | opacity: .5!important; 76 | } 77 | 78 | ::selection { 79 | background-color: #444040; 80 | } 81 | 82 | .character__button { 83 | position: absolute; 84 | top: 0; left: 0; 85 | border-radius: 30px; 86 | width: 100%; height: 100%; 87 | cursor: pointer; 88 | opacity: 0; 89 | } 90 | 91 | .character__image { 92 | border-radius: 100%; 93 | width: 150px; height: 150px; 94 | border: 3px solid #fff; 95 | box-shadow: 0 0 5px #fff; 96 | padding: 5px; 97 | } 98 | 99 | .character__addInfo { 100 | width: 100%; 101 | 102 | .addInfo__name { 103 | font-family: "Montserrat Alternates"; 104 | font-weight: 800; 105 | color: #444040; 106 | text-align: center; 107 | font-size: 17px; 108 | } 109 | 110 | .addInfo__location { 111 | font-size: 15px; 112 | } 113 | 114 | .addInfo__location, .addInfo__species, .addInfo__status, .addInfo__gender{ 115 | font-family: "Montserrat Alternates"; 116 | font-weight: 600; 117 | color: #605b5b; 118 | text-align: left; 119 | margin-top: 1rem; 120 | } 121 | 122 | span { 123 | font-family: "Montserrat Alternates"; 124 | color: #444040; 125 | font-weight: 800; 126 | } 127 | } 128 | } 129 | } 130 | } 131 | 132 | @media screen and (min-width: 768px) { 133 | .form { 134 | width: 50%; 135 | grid-template-columns: repeat(2, 1fr); 136 | } 137 | 138 | .container__pagination { 139 | grid-template-columns: repeat(2, 1fr); 140 | } 141 | } 142 | } 143 | 144 | .popup { 145 | width: 450px; 146 | position: fixed; 147 | top: 15%; 148 | background-color: #fff; 149 | z-index: 10; 150 | 151 | &__wrapper { 152 | padding: 3rem; 153 | 154 | img { 155 | border-radius: 100%; 156 | width: 150px; 157 | border: 2px solid $yellow; 158 | padding: 5px; 159 | } 160 | 161 | li { 162 | font-size: 20px; 163 | list-style-type: none; 164 | font-family: "Montserrat Alternates"; 165 | font-weight: 500; 166 | 167 | span { 168 | font-weight: 700; 169 | font-family: "Montserrat Alternates"; 170 | } 171 | } 172 | 173 | a { 174 | text-decoration: none; 175 | color: $yellow; 176 | font-family: "Montserrat Alternates"; 177 | } 178 | } 179 | 180 | .row { 181 | width: 100%; 182 | @include flexEnd(); 183 | padding: 20px 40px; 184 | } 185 | 186 | &__close { 187 | background-color: $yellow; 188 | color: #fff; 189 | border: none; 190 | font-family: "Montserrat Alternates"; 191 | padding: 1rem 2rem; 192 | cursor: pointer; 193 | border-radius: 5px; 194 | border: 1px solid $yellow; 195 | font-size: 16px; 196 | transition: $transition; 197 | 198 | &:hover { 199 | background-color: #fff; 200 | color: $yellow; 201 | } 202 | } 203 | } -------------------------------------------------------------------------------- /src/components/Locations/Locations.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: stoney; 3 | src: url("../../assets/fonts/stoney-billy/STONB___.TTF"); } 4 | .locations { 5 | width: 100%; 6 | background-color: #0c1215; } 7 | .locations__container { 8 | padding: 2rem 0; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | flex-direction: column; 13 | gap: 30px; } 14 | .locations__container .container__title { 15 | font-family: stoney; 16 | color: #dada4d; 17 | text-shadow: 0 0 5px #dada4d; 18 | text-align: center; 19 | font-size: 30px; } 20 | .locations__container .container__filters { 21 | width: 100%; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | flex-direction: column; } 26 | .locations__container .container__filters .filters__input { 27 | background-color: transparent; 28 | border: 1px solid #dada4d; 29 | box-shadow: 0 0 5px #dada4d; 30 | color: #dada4d; 31 | border-radius: 10px; 32 | font-family: "Montserrat Alternates"; 33 | font-size: 20px; 34 | padding: 10px 20px; } 35 | .locations__container .container__filters .filters__input::placeholder { 36 | color: #fff; } 37 | .locations__container .container__filters .filters__input:focus { 38 | outline: none; } 39 | .locations__container .container__filters .filters__dropdown { 40 | position: relative; 41 | background-color: #fff; 42 | list-style-type: none; } 43 | .locations__container .container__filters .filters__dropdown .dropdown__item { 44 | padding: 20px; 45 | font-family: "Montserrat Alternates"; } 46 | .locations__container .container__filters .filters__dropdown .dropdown__item:hover { 47 | background-color: #dada4d; 48 | cursor: pointer; } 49 | .locations__container .container__filters .filters__select, .locations__container .container__filters .filters__button { 50 | max-width: 100px; 51 | padding: 10px 20px; 52 | border-radius: 10px; 53 | color: #fff; 54 | background-color: #dada4d; 55 | font-family: "Montserrat Alternates"; 56 | font-weight: 800; 57 | font-size: 14px; 58 | cursor: pointer; 59 | border: none; } 60 | .locations__container .container__filters .filters__button { 61 | min-width: 150px; 62 | padding: 15px 0; } 63 | .locations__container .selects { 64 | width: 100%; 65 | display: flex; 66 | justify-content: center; 67 | align-items: center; 68 | margin: 20px 0; 69 | gap: 30px; } 70 | .locations__container .container__list { 71 | list-style-type: none; 72 | display: grid; 73 | grid-template-columns: repeat(1, 1fr); 74 | gap: 20px; 75 | width: 90%; } 76 | .locations__container .container__list .list__item { 77 | width: 100%; 78 | background-color: #dada4d; 79 | border-radius: 10px; 80 | padding: 1rem 2rem; 81 | box-shadow: 0 0 15px #dada4d; 82 | cursor: pointer; 83 | transition: all 0.4s !important; } 84 | .locations__container .container__list .list__item:hover { 85 | opacity: 0.7 !important; } 86 | .locations__container .container__list .list__item .item__name { 87 | color: #fff; 88 | text-align: center; 89 | font-family: "Montserrat Alternates"; 90 | font-weight: 700; 91 | font-size: 25px; } 92 | .locations__container .container__list .list__item .item__type, .locations__container .container__list .list__item .item__dimension, .locations__container .container__list .list__item .item__url { 93 | color: #fff; 94 | font-family: "Montserrat Alternates"; 95 | font-weight: 600; 96 | font-size: 20px; 97 | margin-top: 10px; } 98 | .locations__container .container__list .list__item .item__type span, .locations__container .container__list .list__item .item__dimension span, .locations__container .container__list .list__item .item__url span { 99 | color: #fff; 100 | font-family: "Montserrat Alternates"; 101 | font-weight: 800; 102 | font-size: 20px; } 103 | .locations__container .container__list .list__item .item__type a, .locations__container .container__list .list__item .item__dimension a, .locations__container .container__list .list__item .item__url a { 104 | color: #0c1215; 105 | text-decoration: none; 106 | font-family: "Montserrat Alternates"; } 107 | @media screen and (min-width: 992px) { 108 | .locations .locations__container .container__list .list__item .item__name { 109 | font-size: 30px; } 110 | .locations .locations__container .container__list .list__item .item__type, .locations .locations__container .container__list .list__item .item__dimension, .locations .locations__container .container__list .list__item .item__url { 111 | font-size: 30px; } 112 | .locations .locations__container .container__list .list__item .item__type span, .locations .locations__container .container__list .list__item .item__dimension span, .locations .locations__container .container__list .list__item .item__url span { 113 | font-size: 30px; } } 114 | 115 | /*# sourceMappingURL=Locations.css.map */ 116 | -------------------------------------------------------------------------------- /src/components/Characters/Characters.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: stoney; 3 | src: url("../../assets/fonts/stoney-billy/STONB___.TTF"); } 4 | .characters { 5 | width: 100%; 6 | background-color: #0c1215; } 7 | .characters .css-1p5q5e5-MuiStack-root > :not(style) + :not(style) { 8 | margin-top: 0 !important; } 9 | .characters__container { 10 | padding: 2rem 0; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | flex-direction: column; 15 | gap: 2rem; 16 | position: relative; } 17 | .characters__container .form { 18 | width: 100%; 19 | display: grid; 20 | grid-template-columns: repeat(1, 1fr); 21 | gap: 20px; } 22 | .characters__container .form__select, .characters__container .form__button { 23 | background-color: #dada4d; 24 | color: #fff; 25 | padding: 12px; 26 | border: none; 27 | font-size: 15px; 28 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); 29 | -webkit-appearance: button; 30 | appearance: button; 31 | outline: none; 32 | cursor: pointer; 33 | font-family: "Montserrat Alternates"; 34 | border-radius: 10px; 35 | text-align: center; 36 | min-width: 200px; } 37 | .characters__container .container__title { 38 | font-family: stoney; 39 | color: #dada4d; 40 | text-align: center; 41 | text-shadow: 0 0 5px #dada4d; 42 | font-size: 30px; } 43 | .characters__container .container__pagination { 44 | display: grid !important; 45 | grid-template-columns: repeat(1, 1fr); 46 | gap: 3rem; } 47 | .characters__container .container__pagination .pagination__character { 48 | display: flex; 49 | justify-content: space-between; 50 | align-items: center; 51 | flex-direction: column; 52 | background-color: #dada4d; 53 | border-radius: 30px; 54 | padding: 2.5rem 20px; 55 | gap: 1rem; 56 | box-shadow: 0 0 30px #dada4d; 57 | cursor: pointer; 58 | transition: all 0.4s !important; 59 | position: relative; } 60 | .characters__container .container__pagination .pagination__character:hover { 61 | box-shadow: 0 0 10px #dada4d; 62 | opacity: 0.5 !important; } 63 | .characters__container .container__pagination .pagination__character ::selection { 64 | background-color: #444040; } 65 | .characters__container .container__pagination .pagination__character .character__button { 66 | position: absolute; 67 | top: 0; 68 | left: 0; 69 | border-radius: 30px; 70 | width: 100%; 71 | height: 100%; 72 | cursor: pointer; 73 | opacity: 0; } 74 | .characters__container .container__pagination .pagination__character .character__image { 75 | border-radius: 100%; 76 | width: 150px; 77 | height: 150px; 78 | border: 3px solid #fff; 79 | box-shadow: 0 0 5px #fff; 80 | padding: 5px; } 81 | .characters__container .container__pagination .pagination__character .character__addInfo { 82 | width: 100%; } 83 | .characters__container .container__pagination .pagination__character .character__addInfo .addInfo__name { 84 | font-family: "Montserrat Alternates"; 85 | font-weight: 800; 86 | color: #444040; 87 | text-align: center; 88 | font-size: 17px; } 89 | .characters__container .container__pagination .pagination__character .character__addInfo .addInfo__location { 90 | font-size: 15px; } 91 | .characters__container .container__pagination .pagination__character .character__addInfo .addInfo__location, .characters__container .container__pagination .pagination__character .character__addInfo .addInfo__species, .characters__container .container__pagination .pagination__character .character__addInfo .addInfo__status, .characters__container .container__pagination .pagination__character .character__addInfo .addInfo__gender { 92 | font-family: "Montserrat Alternates"; 93 | font-weight: 600; 94 | color: #605b5b; 95 | text-align: left; 96 | margin-top: 1rem; } 97 | .characters__container .container__pagination .pagination__character .character__addInfo span { 98 | font-family: "Montserrat Alternates"; 99 | color: #444040; 100 | font-weight: 800; } 101 | @media screen and (min-width: 768px) { 102 | .characters .form { 103 | width: 50%; 104 | grid-template-columns: repeat(2, 1fr); } 105 | .characters__container__pagination { 106 | grid-template-columns: repeat(2, 1fr); } } 107 | 108 | .popup { 109 | width: 450px; 110 | position: fixed; 111 | top: 15%; 112 | background-color: #fff; 113 | z-index: 10; } 114 | .popup__wrapper { 115 | padding: 3rem; } 116 | .popup__wrapper img { 117 | border-radius: 100%; 118 | width: 150px; 119 | border: 2px solid #dada4d; 120 | padding: 5px; } 121 | .popup__wrapper li { 122 | font-size: 20px; 123 | list-style-type: none; 124 | font-family: "Montserrat Alternates"; 125 | font-weight: 500; } 126 | .popup__wrapper li span { 127 | font-weight: 700; 128 | font-family: "Montserrat Alternates"; } 129 | .popup__wrapper a { 130 | text-decoration: none; 131 | color: #dada4d; 132 | font-family: "Montserrat Alternates"; } 133 | .popup .row { 134 | width: 100%; 135 | display: flex; 136 | justify-content: flex-end; 137 | align-items: center; 138 | padding: 20px 40px; } 139 | .popup__close { 140 | background-color: #dada4d; 141 | color: #fff; 142 | border: none; 143 | font-family: "Montserrat Alternates"; 144 | padding: 1rem 2rem; 145 | cursor: pointer; 146 | border-radius: 5px; 147 | border: 1px solid #dada4d; 148 | font-size: 16px; 149 | transition: all 0.4s; } 150 | .popup__close:hover { 151 | background-color: #fff; 152 | color: #dada4d; } 153 | 154 | /*# sourceMappingURL=Characters.css.map */ 155 | --------------------------------------------------------------------------------