├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug.yml │ ├── ideas.yml │ └── other.yml └── workflows │ └── node.js.yml ├── .gitignore ├── .prettierc.json ├── .vscode └── settings.json ├── Disney + ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── images │ │ ├── cta-logo-one.svg │ │ ├── cta-logo-two.png │ │ ├── favicon.svg │ │ ├── group-icon.png │ │ ├── home-background.png │ │ ├── home-icon.svg │ │ ├── login-background.jpg │ │ ├── logo.svg │ │ ├── movie-icon.svg │ │ ├── original-icon.svg │ │ ├── play-icon-black.png │ │ ├── play-icon-white.png │ │ ├── search-icon.svg │ │ ├── series-icon.svg │ │ ├── slider-badag.jpg │ │ ├── slider-badging.jpg │ │ ├── slider-scale.jpg │ │ ├── slider-scales.jpg │ │ ├── viewers-disney.png │ │ ├── viewers-marvel.png │ │ ├── viewers-national.png │ │ ├── viewers-pixar.png │ │ ├── viewers-starwars.png │ │ └── watchlist-icon.svg │ └── index.html └── src │ ├── App.css │ ├── App.js │ ├── components │ ├── Header.js │ └── Login.js │ ├── firebase.js │ ├── index.css │ └── index.js ├── LICENSE ├── README.md ├── example ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.js │ ├── App.test.js │ ├── components │ │ ├── Home.css │ │ └── Home.js │ ├── data │ │ ├── anime_data.json │ │ └── members.json │ ├── images │ │ ├── Logos.png │ │ ├── Rating.png │ │ ├── bullets.jpg │ │ ├── contact.png │ │ ├── design1.png │ │ ├── design2.png │ │ ├── img01.png │ │ ├── img02.png │ │ ├── img03.png │ │ ├── img04.png │ │ ├── line.png │ │ ├── profile-pic01.png │ │ ├── profile-pic02.png │ │ ├── testimonial1.png │ │ ├── testimonial2.png │ │ └── user1.jpg │ ├── index.css │ └── index.js └── yarn.lock ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── .eslintrc ├── index.js └── lib-components │ ├── Anime_Image_Slider │ ├── index.js │ └── index.module.css │ ├── Grocery List Site │ ├── Alert.js │ ├── List.js │ ├── index.js │ └── index.module.css │ ├── complexComponent │ ├── footer │ │ ├── index.js │ │ ├── index.module.css │ │ └── utils.js │ ├── index.js │ ├── index.module.css │ └── navigation │ │ ├── index.js │ │ └── index.module.css │ ├── contact_us │ ├── index.js │ └── index.module.css │ ├── login │ ├── index.js │ └── index.module.css │ ├── portfolio_home │ ├── Reviews │ │ └── Reviews.js │ ├── content1 │ │ ├── Card1.js │ │ ├── Card2.js │ │ ├── Card3.js │ │ └── Crad.js │ ├── footer │ │ └── Footer.js │ ├── header │ │ └── Header.js │ ├── index.js │ └── navbar │ │ └── Navbar.js │ ├── product_card │ ├── index.js │ └── index.module.css │ ├── progress_bar │ ├── index.js │ ├── index.module.css │ └── screenshot │ │ └── progress_bar.jpeg │ ├── register │ ├── index.js │ └── index.module.css │ └── team_members │ ├── index.js │ └── index.module.css └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | dist/ 3 | node_modules/ 4 | .snapshots/ 5 | *.min.js -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": [ 4 | "standard", 5 | "standard-react", 6 | "plugin:prettier/recommended", 7 | "prettier/standard", 8 | "prettier/react" 9 | ], 10 | "env": { 11 | "node": true 12 | }, 13 | "parserOptions": { 14 | "ecmaVersion": 2020, 15 | "ecmaFeatures": { 16 | "legacyDecorators": true, 17 | "jsx": true 18 | } 19 | }, 20 | "settings": { 21 | "react": { 22 | "version": "16" 23 | } 24 | }, 25 | "rules": { 26 | "space-before-function-paren": 0, 27 | "react/prop-types": 0, 28 | "react/jsx-handler-names": 0, 29 | "react/jsx-fragments": 0, 30 | "react/no-unused-prop-types": 0, 31 | "import/export": 0 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.yml: -------------------------------------------------------------------------------- 1 | name: Bug 2 | description: Report a bug found in the Repository's source code 3 | labels: ["bug fix"] 4 | body: 5 | - type: textarea 6 | id: description 7 | attributes: 8 | label: Description 9 | description: A brief description of the question or issue, also include what you tried and what didn't work 10 | validations: 11 | required: true 12 | - type: textarea 13 | id: screenshots 14 | attributes: 15 | label: Screenshots 16 | description: Please add screenshots if applicable 17 | validations: 18 | required: false 19 | - type: textarea 20 | id: extrainfo 21 | attributes: 22 | label: Additional information 23 | description: Is there anything else we should know about this bug? 24 | validations: 25 | required: false 26 | - type: markdown 27 | attributes: 28 | value: | 29 | You can also join the Discord community [here](https://discord.gg/6jatS2xCgQ) 30 | Feel free to check out other cool repositories of the Dezenix Community [here](https://github.com/Dezenix) 31 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/ideas.yml: -------------------------------------------------------------------------------- 1 | name: Ideas 2 | description: Have a new idea/feature for this Repository? 3 | labels: ["new idea"] 4 | body: 5 | - type: textarea 6 | id: description 7 | attributes: 8 | label: Description 9 | description: A brief description of the question or issue, also include what you tried and what didn't work 10 | validations: 11 | required: true 12 | - type: textarea 13 | id: screenshots 14 | attributes: 15 | label: Screenshots 16 | description: Please add screenshots if applicable 17 | validations: 18 | required: false 19 | - type: textarea 20 | id: extrainfo 21 | attributes: 22 | label: Additional information 23 | description: Is there anything else we should know about this idea? 24 | validations: 25 | required: false 26 | - type: markdown 27 | attributes: 28 | value: | 29 | You can also join the Discord community [here](https://discord.gg/6jatS2xCgQ) 30 | Feel free to check out other cool repositories of the Dezenix Community [here](https://github.com/Dezenix) 31 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/other.yml: -------------------------------------------------------------------------------- 1 | name: Other 2 | description: Use this for any other issues. Please do NOT create blank issues 3 | body: 4 | - type: textarea 5 | id: description 6 | attributes: 7 | label: What would you like to share? 8 | description: A brief description of the question or issue, also include what you tried and what didn't work 9 | validations: 10 | required: true 11 | - type: textarea 12 | id: extrainfo 13 | attributes: 14 | label: Additional information 15 | description: Is there anything else we should know about this issue? 16 | validations: 17 | required: false 18 | - type: markdown 19 | attributes: 20 | value: | 21 | You can also join the Discord community [here](https://discord.gg/6jatS2xCgQ) 22 | Feel free to check out other cool repositories of the Dezenix Community [here](https://github.com/Dezenix) -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: [ main ] 9 | pull_request: 10 | branches: [ main ] 11 | 12 | jobs: 13 | build: 14 | runs-on: ubuntu-latest 15 | 16 | strategy: 17 | matrix: 18 | node-version: [12.x, 14.x, 16.x] 19 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 20 | 21 | steps: 22 | - uses: actions/checkout@v2 23 | - name: Use Node.js ${{ matrix.node-version }} 24 | uses: actions/setup-node@v2 25 | with: 26 | node-version: ${{ matrix.node-version }} 27 | 28 | - name: Yarn Setup 29 | uses: DerYeger/yarn-setup-action@v1.0.1 30 | with: 31 | node-version: ${{ matrix.node-version }} 32 | - run: yarn install 33 | - run: yarn build 34 | - run: yarn predeploy 35 | - run: npm publish 36 | if: startsWith(github.ref, 'refs/tags/v') 37 | env: 38 | NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See https://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | node_modules 6 | 7 | # builds 8 | build 9 | dist 10 | .rpt2_cache 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | 24 | .yarn 25 | .yarnrc.yml 26 | example/.yarn -------------------------------------------------------------------------------- /.prettierc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "jsxSingleQuote": true, 4 | "semi": false, 5 | "tabWidth": 2, 6 | "bracketSpacing": true, 7 | "jsxBracketSameLine": false, 8 | "arrowParens": "always", 9 | "trailingComma": "none" 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "markdownlint.config": { 3 | "MD028": false, 4 | "MD025": { 5 | "front_matter_title": "" 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /Disney +/.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 | -------------------------------------------------------------------------------- /Disney +/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 | -------------------------------------------------------------------------------- /Disney +/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "disney-clone", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.1.1", 8 | "@testing-library/user-event": "^13.5.0", 9 | "firebase": "^9.6.11", 10 | "firebase-tools": "^10.7.1", 11 | "react": "^18.0.0", 12 | "react-dom": "^18.0.0", 13 | "react-redux": "^8.0.1", 14 | "react-router-dom": "^6.3.0", 15 | "react-scripts": "5.0.1", 16 | "styled-components": "^5.3.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Disney +/public/images/cta-logo-one.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Disney +/public/images/cta-logo-two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/cta-logo-two.png -------------------------------------------------------------------------------- /Disney +/public/images/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Disney +/public/images/group-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/group-icon.png -------------------------------------------------------------------------------- /Disney +/public/images/home-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/home-background.png -------------------------------------------------------------------------------- /Disney +/public/images/home-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Disney +/public/images/login-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/login-background.jpg -------------------------------------------------------------------------------- /Disney +/public/images/logo.svg: -------------------------------------------------------------------------------- 1 | Disney+ Brand Logo -------------------------------------------------------------------------------- /Disney +/public/images/movie-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Disney +/public/images/original-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Disney +/public/images/play-icon-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/play-icon-black.png -------------------------------------------------------------------------------- /Disney +/public/images/play-icon-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/play-icon-white.png -------------------------------------------------------------------------------- /Disney +/public/images/search-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Disney +/public/images/series-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Disney +/public/images/slider-badag.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/slider-badag.jpg -------------------------------------------------------------------------------- /Disney +/public/images/slider-badging.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/slider-badging.jpg -------------------------------------------------------------------------------- /Disney +/public/images/slider-scale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/slider-scale.jpg -------------------------------------------------------------------------------- /Disney +/public/images/slider-scales.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/slider-scales.jpg -------------------------------------------------------------------------------- /Disney +/public/images/viewers-disney.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/viewers-disney.png -------------------------------------------------------------------------------- /Disney +/public/images/viewers-marvel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/viewers-marvel.png -------------------------------------------------------------------------------- /Disney +/public/images/viewers-national.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/viewers-national.png -------------------------------------------------------------------------------- /Disney +/public/images/viewers-pixar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/viewers-pixar.png -------------------------------------------------------------------------------- /Disney +/public/images/viewers-starwars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/public/images/viewers-starwars.png -------------------------------------------------------------------------------- /Disney +/public/images/watchlist-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Disney +/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 | -------------------------------------------------------------------------------- /Disney +/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/Disney +/src/App.css -------------------------------------------------------------------------------- /Disney +/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Login from "./components/Login"; 3 | import Header from "./components/Header"; 4 | import { 5 | BrowserRouter, 6 | Routes, 7 | Route 8 | } from "react-router-dom"; 9 | 10 | // ################################# IMPORTS 11 | 12 | function App() { 13 | return ( 14 |
15 | 16 |
17 | 18 | }/> 19 | 20 | 21 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /Disney +/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from "styled-components"; 3 | import { auth, provider } from '../firebase'; 4 | import { signInWithPopup } from 'firebase/auth'; 5 | 6 | const Header = (props) => { 7 | 8 | const handleAuth = ()=>{ 9 | signInWithPopup(auth, provider) 10 | .then((result)=>{ 11 | console.log(result) 12 | }).catch((error)=>{ 13 | alert(error.message) 14 | }) 15 | } 16 | 17 | return ( 18 | 50 | ) 51 | }; 52 | 53 | const Nav = styled.nav` 54 | position:fixed; 55 | top:0; 56 | left:0; 57 | right:0; 58 | height:70px; 59 | background-color:#090b13; 60 | display :flex; 61 | justify-content:space-between; 62 | align-items:center; 63 | padding:0 36px; 64 | letter-spacing:16px; 65 | z-index:3; 66 | `; 67 | 68 | const Logo = styled.a` 69 | padding: 0; 70 | width: 80px; 71 | margin-top: 4px; 72 | max-height: 70px; 73 | font-size: 0; 74 | display: inline-block; 75 | img { 76 | display: block; 77 | width: 100%; 78 | } 79 | `; 80 | 81 | const NavMenu = styled.div` 82 | align-items:center; 83 | display:flex; 84 | flex-flow:row nowrap; 85 | height:100%; 86 | justify-content:flex-end; 87 | margin:0px; 88 | padding:0px; 89 | position:relative; 90 | margin-right:auto; 91 | margin-left:25px; 92 | 93 | a{ 94 | display:flex; 95 | align-items:center; 96 | padding:0 12px; 97 | cursor:pointer; 98 | 99 | img{ 100 | height:20px; 101 | min-width:20px; 102 | width:20px; 103 | z-index:auto; 104 | } 105 | 106 | span{ 107 | color:rgb(249, 249, 249); 108 | font-size:13px; 109 | letter-spacing:1.42px; 110 | line-height:1.08; 111 | padding:2px 0px; 112 | white-space:nowrap; 113 | position:relative; 114 | 115 | &:before { 116 | background-color: rgb(249, 249, 249); 117 | border-radius: 0px 0px 4px 4px; 118 | bottom: -6px; 119 | content: ""; 120 | height: 2px; 121 | left: 0px; 122 | opacity: 0; 123 | position: absolute; 124 | right: 0px; 125 | transform-origin: left center; 126 | transform: scaleX(0); 127 | transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; 128 | visibility: hidden; 129 | width: auto; 130 | } 131 | } 132 | 133 | &:hover { 134 | span:before { 135 | transform: scaleX(1); 136 | visibility: visible; 137 | opacity: 1 !important; 138 | } 139 | } 140 | } 141 | 142 | // @media (max-width:768px){ 143 | // display:none; 144 | // } 145 | `; 146 | 147 | const Login = styled.a` 148 | background-color: rgba(0, 0, 0, 0.6); 149 | cursor:pointer; 150 | padding: 8px 16px; 151 | text-transform: uppercase; 152 | letter-spacing: 1.5px; 153 | border: 1px solid #f9f9f9; 154 | border-radius: 4px; 155 | transition: all 0.2s ease 0s; 156 | &:hover { 157 | background-color: #f9f9f9; 158 | color: #000; 159 | border-color: transparent; 160 | } 161 | `; 162 | 163 | export default Header -------------------------------------------------------------------------------- /Disney +/src/components/Login.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const Login = (props) => { 4 | return ( 5 | 6 | 7 | 8 | 9 | GET ALL THERE 10 | 11 | Get Premier Access to Raya and the Last Dragon for an additional fee 12 | with a Disney+ subscription. As of 03/26/21, the price of Disney+ 13 | and The Disney Bundle will increase by $1. 14 | 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | }; 22 | 23 | const Container = styled.section` 24 | overflow: hidden; 25 | display: flex; 26 | flex-direction: column; 27 | text-align: center; 28 | height: 100vh; 29 | `; 30 | 31 | const Content = styled.div` 32 | margin-bottom: 10vw; 33 | width: 100%; 34 | position: relative; 35 | min-height: 100vh; 36 | box-sizing: border-box; 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | flex-direction: column; 41 | padding: 80px 40px; 42 | height: 100%; 43 | `; 44 | 45 | const BgImage = styled.div` 46 | height: 100%; 47 | background-position: top; 48 | background-size: cover; 49 | background-repeat: no-repeat; 50 | background-image: url("/images/login-background.jpg"); 51 | position: absolute; 52 | top: 0; 53 | right: 0; 54 | left: 0; 55 | z-index: -1; 56 | `; 57 | 58 | const CTA = styled.div` 59 | max-width:650px; 60 | display:flex; 61 | flex-direction:column; 62 | width:100%; 63 | `; 64 | const CTALogoOne = styled.img` 65 | margin-bottom:12px; 66 | max-width:600px; 67 | min-height:1px; 68 | display:block; 69 | width:100%; 70 | `; 71 | 72 | const SignUp = styled.button` 73 | font-weight:bold; 74 | color:#f9f9f9; 75 | background-color:#0063e5; 76 | margin-bottom:12px; 77 | width:100%; 78 | letter-spacing:1.5px; 79 | font-size:18px; 80 | padding:16.5px 0; 81 | border:1px solid transparent; 82 | border-radius:4px; 83 | 84 | &:hover{ 85 | background-color:#0483ee; 86 | } 87 | `; 88 | const Description = styled.p` 89 | color: hsla(0, 0%, 95.3%, 1); 90 | font-size: 11px; 91 | margin: 0 0 24px; 92 | line-height: 1.5; 93 | letter-spacing: 1.5px; 94 | `; 95 | 96 | const CTALogoTwo = styled.img` 97 | max-width:600px; 98 | margin-bottom:20px; 99 | display:inline-block; 100 | vertical-align:bottom; 101 | width:100%; 102 | `; 103 | 104 | export default Login; -------------------------------------------------------------------------------- /Disney +/src/firebase.js: -------------------------------------------------------------------------------- 1 | import { initializeApp } from "firebase/app" 2 | import { getAuth } from "firebase/auth" 3 | import { getFirestore } from "firebase/firestore" 4 | import { getStorage } from "firebase/storage"; 5 | import { GoogleAuthProvider } from "firebase/auth"; 6 | 7 | const firebaseConfig = { 8 | // YOUR FIREBASE CONFIGS 9 | }; 10 | 11 | // // Initialize Firebase 12 | const app = initializeApp(firebaseConfig); 13 | const db = getFirestore(app); 14 | const auth = getAuth(app); 15 | const storage = getStorage(app); 16 | const provider = new GoogleAuthProvider(); 17 | 18 | export { auth, provider, storage }; 19 | export default db; 20 | 21 | -------------------------------------------------------------------------------- /Disney +/src/index.css: -------------------------------------------------------------------------------- 1 | html{ 2 | scroll-behavior: smooth; 3 | } 4 | body{ 5 | 6 | background-color: #040714; 7 | color: #f9f9f9; 8 | font-family: Avenir-Roman, sans-serif; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | *{ 13 | box-sizing: border-box; 14 | } 15 | a{ 16 | color: #f9f9f9; 17 | text-decoration: none; 18 | } 19 | 20 | 21 | @media only screen and (min-width:768px){ 22 | body{ 23 | font-size: 16px; 24 | } 25 | } 26 | 27 | @media only screen and (min-width:480) and (max-width:768px){ 28 | body{ 29 | font-size: 15px; 30 | } 31 | } 32 | 33 | @media only screen and (max-width:479px){ 34 | body{ 35 | font-size: 14px; 36 | } 37 | } -------------------------------------------------------------------------------- /Disney +/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Dezenix 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Frontend Reactjs

2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |

About the Repository

24 | 25 | We are on a mission to make things easy and convenient for all the users who just want to save their time. This repository consists of all the development components that are being used while coding an end to end website along with fully coded components in ReactJS. The main goal is to save your time by providing the complete code snippet with a fully responsive design of all the components that you may use in your development journey. At the later stage, the project is planned to be get converted into a library so that the components created can directly be used by importing and calling through classes. We always encourage new ideas. Feel free to get in touch with us and join our [Discord Server](https://discord.gg/F3TtF5AHKz) for updates. 26 | 27 | ## 💯open source programs this repo has been part of 28 |
29 | 30 | 31 | 32 | 33 |
34 | 35 | ## ⚒️ Contribution Guidelines 36 | 37 | Are we missing any of your favourite features, which you think you can add to it? We invite you to contribute to this project and improve it further. 38 | 39 | #### 1. Clone and Setup: 40 | * Clone and Setup the repository by following the steps mentioned [here](https://github.com/Dezenix/.github/blob/main/CONTRIBUTING.md). 41 | 42 | #### 2. Setup dev environment 43 | * This repository is divided into 2 parts 44 | - Library ```src/*``` 45 | - Example ```example/*``` 46 | 47 | ##### 2.1 Setting up library environment 48 | 49 | This is where all your components will be 50 | 51 | * Install all dependencies 52 | 53 | ``` bash 54 | yarn install 55 | ``` 56 | 57 | * Watch for file changes and build 58 | 59 | ``` bash 60 | yarn start 61 | ``` 62 | 63 | ##### 2.2 Setting up example environment 64 | This is where you can see your component implementation 65 | 66 | * Change directory to [example](/example) folder 67 | 68 | ``` bash 69 | cd example 70 | ``` 71 | 72 | * Install all dependencies 73 | 74 | ``` bash 75 | yarn install 76 | ``` 77 | 78 | * Start a live server on localhost 79 | 80 | ``` bash 81 | yarn start 82 | ``` 83 | 84 | A server should start on localhost where you can view all the examples 85 | 86 | 87 | #### 3. Add your Components: 88 | * All the usermade components should be made under [`src/lib-components/{component_name}`](https://github.com/Dezenix/frontend-reactjs/tree/main/src/lib-components) here `{component_name}` is the name of your component in **snake_case**. 89 | * CSS files should follow this syntax `{name}.module.css` here `{name}` can be anything you want but in **snake_case**. This is due to the fact that we are transpiling the css classnames to avoid any conflicts between 2 or more modules. Due to this, simple importing your CSS file will no longer work. You will have to named import your css files and then treat them as a dictionary to use your CSS classnames. 90 | * Components should make use of props to display images or strings. 91 | * We also request you to **not make use of any network components**. For fonts, it would be better if you make use of default browser provided fonts. This is because we can't always be sure which license is used in 3rd party stuff. In future, we do plan to provide more fonts that will be licensed properly. 92 | 93 | #### 4. Export your Component: 94 | * The User-made modules should be exported in [`src/index.js`](/src/index.js). 95 | 96 | #### 5. View your Component: 97 | * A simple example should be added in [`example/src`](/example/src) demonstrating your component. 98 | 99 | ## 👨‍💻 Our valuable Contributors 100 | 101 | This project exists thanks to all the **people who contribute**. 102 | 103 | ![Contributors](https://contributors-img.web.app/image?repo=Dezenix/frontend-reactjs) 104 | 105 | ## ❤️ Code of Conduct 106 | 107 | Please note that Dezenix has a [Contributor Code of Conduct](https://github.com/Dezenix/.github/blob/main/CODE_OF_CONDUCT.md). By participating in this project online or at events you agree to abide by its terms. 108 | 109 | ## 📜 License 110 | 111 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE) © Dezenix 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | It is linked to the dezenix-react package in the parent directory for development purposes. 4 | 5 | You can run `yarn install` and then `yarn start` to test your package. 6 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dezenix-react-example", 3 | "homepage": "https://dezenix.github.io/frontend-reactjs", 4 | "version": "0.0.0", 5 | "private": true, 6 | "scripts": { 7 | "start": "node ../node_modules/react-scripts/bin/react-scripts.js start", 8 | "build": "node ../node_modules/react-scripts/bin/react-scripts.js build", 9 | "test": "node ../node_modules/react-scripts/bin/react-scripts.js test", 10 | "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject" 11 | }, 12 | "dependencies": { 13 | "dezenix-react": "link:..", 14 | "http-serve": "^1.0.1", 15 | "react": "link:../node_modules/react", 16 | "react-dom": "link:../node_modules/react-dom", 17 | "react-router-dom": "^6.0.2", 18 | "react-scripts": "link:../node_modules/react-scripts", 19 | "styled-components": "^5.3.3" 20 | }, 21 | "devDependencies": { 22 | "@babel/plugin-syntax-object-rest-spread": "^7.8.3", 23 | "@types/react": "link:../node_modules/@types/react", 24 | "eslint-config-react": "^1.1.7" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": [ 30 | ">0.2%", 31 | "not dead", 32 | "not ie <= 11", 33 | "not op_mini all" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 16 | 17 | 18 | 27 | dezenix-react 28 | 29 | 30 | 31 | 34 | 35 |
36 | 37 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "dezenix-react", 3 | "name": "dezenix-react", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /example/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Login, 4 | Register, 5 | ProductCard, 6 | ProgressBar, 7 | ComplexComponent, 8 | PortfolioHome, 9 | TeamMembers, 10 | ContactUs, 11 | GroceryList, 12 | AnimeSlider 13 | 14 | } from 'dezenix-react' 15 | import Home from './components/Home' 16 | import { HashRouter, Route, Routes } from 'react-router-dom' 17 | import contact from "./images/contact.png" 18 | import img1 from "./images/img01.png" 19 | import user from "./images/user1.jpg" 20 | import {members} from "./data/members.json" 21 | import {data} from "./data/anime_data.json" 22 | 23 | 24 | 25 | 26 | const App = () => { 27 | return ( 28 | 29 | 30 | } /> 31 | } /> 32 | } /> 33 | } 36 | /> 37 | 46 | } 47 | /> 48 | } /> 49 | } /> 50 | } /> 51 | } /> 52 | } /> 53 | } /> 54 | 55 | 56 | 57 | ) 58 | } 59 | 60 | export default App 61 | -------------------------------------------------------------------------------- /example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import App from './App' 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div') 7 | ReactDOM.render(, div) 8 | ReactDOM.unmountComponentAtNode(div) 9 | }) 10 | -------------------------------------------------------------------------------- /example/src/components/Home.css: -------------------------------------------------------------------------------- 1 | .header { 2 | background: #834ce6; 3 | background-color: #3787f6; 4 | background-image: linear-gradient(315deg, #733fed 0%, #3787f6 74%); 5 | text-align: center; 6 | padding: 15px; 7 | color: white; 8 | } 9 | .contri { 10 | text-align: center; 11 | } 12 | .contri_components { 13 | margin-top: 30px; 14 | display: flex; 15 | align-items: center; 16 | justify-content: space-around; 17 | flex-wrap: wrap; 18 | width: 100%; 19 | } 20 | .component { 21 | text-decoration: none; 22 | background-color: blanchedalmond; 23 | margin-bottom: 1rem; 24 | 25 | width: fit-content; 26 | height: fit-content; 27 | box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 28 | 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%); 29 | 30 | border-radius: 5px; 31 | padding: 15px; 32 | } 33 | .header { 34 | background: #834ce6; 35 | background-color: #3787f6; 36 | background-image: linear-gradient(315deg, #733fed 0%, #3787f6 74%); 37 | text-align: center; 38 | padding: 15px; 39 | color: white; 40 | } 41 | .contri { 42 | text-align: center; 43 | } 44 | .contri_components { 45 | margin-top: 30px; 46 | display: flex; 47 | align-items: center; 48 | justify-content: space-around; 49 | flex-wrap: wrap; 50 | width: 100%; 51 | } 52 | .component { 53 | text-decoration: none; 54 | background-color: blanchedalmond; 55 | margin-bottom: 1rem; 56 | 57 | width: fit-content; 58 | height: fit-content; 59 | box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 60 | 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%); 61 | 62 | border-radius: 5px; 63 | padding: 15px; 64 | } 65 | -------------------------------------------------------------------------------- /example/src/components/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | 4 | const Home = () => { 5 | return ( 6 |
7 |
8 |

Frontend-reactjs

9 |
10 | 11 |
12 |
13 |

Start Contributing

14 |
15 |
16 | 17 |
18 | 19 |

Login

20 | 21 | 22 |

Register

23 | 24 | 25 |

Product card

26 | 27 | {/* Add new Link Here for your new component */} 28 | 29 |

Progress Bar

30 | 31 | 32 |

Complex component example

33 | 34 | 35 |

Portfolio Home example

36 | 37 | 38 |

Team members

39 | 40 | 41 |

Contact Us

42 | 43 | 44 |

Grocery List Site

45 | 46 | 47 |

Anime Slider

48 | 49 | 50 |
51 |
52 |
53 | ) 54 | } 55 | 56 | export default Home 57 | -------------------------------------------------------------------------------- /example/src/data/anime_data.json: -------------------------------------------------------------------------------- 1 | { 2 | "data":[ 3 | { 4 | "mal_id":5114, 5 | "image_url":"https://cdn.myanimelist.net/images/anime/1223/96541.jpg", 6 | "title":"Fullmetal Alchemist: Brotherhood", 7 | "synopsis":"After a horrific alchemy experiment goes wrong in the Elric household, brothers Edward and Alphonse are left in a catastrophic new reality. Ignoring the alchemical principle banning human transmutation, the boys attempted to bring their recently deceased mother back to life. Instead, they suffered brutal personal loss: Alphonse's body disintegrated while Edward lost a leg and then sacrificed an arm to keep Alphonse's soul in the physical realm by binding it to a hulking suit of armor. The brothers are rescued by their neighbor Pinako Rockbell and her granddaughter Winry. Known as a bio-mechanical engineering prodigy, Winry creates prosthetic limbs for Edward by utilizing 'automail,' a tough, versatile metal used in robots and combat armor. After years of training, the Elric brothers set off on a quest to restore their bodies by locating the Philosopher's Stone—a powerful gem that allows an alchemist to defy the traditional laws of Equivalent Exchange. As Edward becomes an infamous alchemist and gains the nickname 'Fullmetal,' the boys' journey embroils them in a growing conspiracy that threatens the fate of the world. [Written by MAL Rewrite]" 8 | }, 9 | { 10 | "mal_id":28977, 11 | "image_url":"https://cdn.myanimelist.net/images/anime/3/72078.jpg", 12 | "title":"Gintama°", 13 | "synopsis":"Gintoki, Shinpachi, and Kagura return as the fun-loving but broke members of the Yorozuya team! Living in an alternate-reality Edo, where swords are prohibited and alien overlords have conquered Japan, they try to thrive on doing whatever work they can get their hands on. However, Shinpachi and Kagura still haven't been paid... Does Gin-chan really spend all that cash playing pachinko? Meanwhile, when Gintoki drunkenly staggers home one night, an alien spaceship crashes nearby. A fatally injured crew member emerges from the ship and gives Gintoki a strange, clock-shaped device, warning him that it is incredibly powerful and must be safeguarded. Mistaking it for his alarm clock, Gintoki proceeds to smash the device the next morning and suddenly discovers that the world outside his apartment has come to a standstill. With Kagura and Shinpachi at his side, he sets off to get the device fixed; though, as usual, nothing is ever that simple for the Yorozuya team. Filled with tongue-in-cheek humor and moments of heartfelt emotion, Gintama's fourth season finds Gintoki and his friends facing both their most hilarious misadventures and most dangerous crises yet. [Written by MAL Rewrite]" 14 | }, 15 | { 16 | "mal_id":9253, 17 | "image_url":"https://cdn.myanimelist.net/images/anime/5/73199.jpg", 18 | "title":"Steins;Gate", 19 | "synopsis":"The self-proclaimed mad scientist Rintarou Okabe rents out a room in a rickety old building in Akihabara, where he indulges himself in his hobby of inventing prospective 'future gadgets'with fellow lab members: Mayuri Shiina, his air-headed childhood friend, and Hashida Itaru, a perverted hacker nicknamed 'Daru.' The three pass the time by tinkering with their most promising contraption yet, a machine dubbed the 'Phone Microwave,' which performs the strange function of morphing bananas into piles of green gel. Though miraculous in itself, the phenomenon doesn't provide anything concrete in Okabe's search for a scientific breakthrough; that is, until the lab members are spurred into action by a string of mysterious happenings before stumbling upon an unexpected success—the Phone Microwave can send emails to the past, altering the flow of history. Adapted from the critically acclaimed visual novel by 5pb. and Nitroplus, Steins;Gate takes Okabe through the depths of scientific theory and practicality. Forced across the diverging threads of past and present, Okabe must shoulder the burdens that come with holding the key to the realm of time. [Written by MAL Rewrite]" 20 | }, 21 | { 22 | "mal_id":38524, 23 | "image_url":"https://cdn.myanimelist.net/images/anime/1517/100633.jpg", 24 | "title":"Shingeki no Kyojin Season 3 Part 2", 25 | "synopsis":"Seeking to restore humanity's diminishing hope, the Survey Corps embark on a mission to retake Wall Maria, where the battle against the merciless 'Titans' takes the stage once again. Returning to the tattered Shiganshina District that was once his home, Eren Yeager and the Corps find the town oddly unoccupied by Titans. Even after the outer gate is plugged, they strangely encounter no opposition. The mission progresses smoothly until Armin Arlert, highly suspicious of the enemy's absence, discovers distressing signs of a potential scheme against them. Shingeki no Kyojin Season 3 Part 2 follows Eren as he vows to take back everything that was once his. Alongside him, the Survey Corps strive—through countless sacrifices—to carve a path towards victory and uncover the secrets locked away in the Yeager family's basement. [Written by MAL Rewrite]" 26 | } 27 | 28 | ] 29 | } -------------------------------------------------------------------------------- /example/src/data/members.json: -------------------------------------------------------------------------------- 1 | { 2 | "members": [ 3 | { 4 | "id": 1, 5 | "name": "John Doe", 6 | "profession": "Founder & co-founder", 7 | "github_url": "https://github.com/Dezenix/frontend-reactjs", 8 | "linkedin_url": "https://github.com/Dezenix/frontend-reactjs", 9 | "twitter_url": "https://github.com/Dezenix/frontend-reactjs" 10 | }, 11 | { 12 | "id": 2, 13 | "name": "Mario", 14 | "profession": "CEO & co-founder", 15 | "github_url": "https://github.com/Dezenix/frontend-reactjs", 16 | "linkedin_url": "https://github.com/Dezenix/frontend-reactjs", 17 | "twitter_url": "https://github.com/Dezenix/frontend-reactjs" 18 | }, 19 | { 20 | "id": 3, 21 | "name": "Johnson", 22 | "profession": "Software Developer", 23 | "github_url": "https://github.com/Dezenix/frontend-reactjs", 24 | "linkedin_url": "https://github.com/Dezenix/frontend-reactjs", 25 | "twitter_url": "https://github.com/Dezenix/frontend-reactjs" 26 | }, 27 | { 28 | "id": 4, 29 | "name": "Dan", 30 | "profession": "Marketing Head", 31 | "github_url": "https://github.com/Dezenix/frontend-reactjs", 32 | "linkedin_url": "https://github.com/Dezenix/frontend-reactjs", 33 | "twitter_url": "https://github.com/Dezenix/frontend-reactjs" 34 | } 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /example/src/images/Logos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/Logos.png -------------------------------------------------------------------------------- /example/src/images/Rating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/Rating.png -------------------------------------------------------------------------------- /example/src/images/bullets.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/bullets.jpg -------------------------------------------------------------------------------- /example/src/images/contact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/contact.png -------------------------------------------------------------------------------- /example/src/images/design1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/design1.png -------------------------------------------------------------------------------- /example/src/images/design2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/design2.png -------------------------------------------------------------------------------- /example/src/images/img01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/img01.png -------------------------------------------------------------------------------- /example/src/images/img02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/img02.png -------------------------------------------------------------------------------- /example/src/images/img03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/img03.png -------------------------------------------------------------------------------- /example/src/images/img04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/img04.png -------------------------------------------------------------------------------- /example/src/images/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/line.png -------------------------------------------------------------------------------- /example/src/images/profile-pic01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/profile-pic01.png -------------------------------------------------------------------------------- /example/src/images/profile-pic02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/profile-pic02.png -------------------------------------------------------------------------------- /example/src/images/testimonial1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/testimonial1.png -------------------------------------------------------------------------------- /example/src/images/testimonial2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/testimonial2.png -------------------------------------------------------------------------------- /example/src/images/user1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/example/src/images/user1.jpg -------------------------------------------------------------------------------- /example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 5 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | import './index.css' 2 | 3 | import React from 'react' 4 | import ReactDOM from 'react-dom' 5 | import App from './App' 6 | import 'dezenix-react/dist/index.css' 7 | 8 | ReactDOM.render(, document.getElementById('root')) 9 | -------------------------------------------------------------------------------- /example/yarn.lock: -------------------------------------------------------------------------------- 1 | # This file is generated by running "yarn install" inside your project. 2 | # Manual changes might be lost - proceed with caution! 3 | 4 | __metadata: 5 | version: 6 6 | cacheKey: 8 7 | 8 | "@babel/code-frame@npm:^7.16.7": 9 | version: 7.16.7 10 | resolution: "@babel/code-frame@npm:7.16.7" 11 | dependencies: 12 | "@babel/highlight": ^7.16.7 13 | checksum: db2f7faa31bc2c9cf63197b481b30ea57147a5fc1a6fab60e5d6c02cdfbf6de8e17b5121f99917b3dabb5eeb572da078312e70697415940383efc140d4e0808b 14 | languageName: node 15 | linkType: hard 16 | 17 | "@babel/generator@npm:^7.16.7": 18 | version: 7.16.7 19 | resolution: "@babel/generator@npm:7.16.7" 20 | dependencies: 21 | "@babel/types": ^7.16.7 22 | jsesc: ^2.5.1 23 | source-map: ^0.5.0 24 | checksum: 20c6a7c5e372a66ec2900c074b2ec3634d3f615cafccbb416770f4b419251c6dc27a0a137b71407e218463fe059a3a6a5afb734f35089d94bdb66e01fe8a9e6f 25 | languageName: node 26 | linkType: hard 27 | 28 | "@babel/helper-annotate-as-pure@npm:^7.16.0": 29 | version: 7.16.0 30 | resolution: "@babel/helper-annotate-as-pure@npm:7.16.0" 31 | dependencies: 32 | "@babel/types": ^7.16.0 33 | checksum: 0db76106983e10ffc482c5f01e89c3b4687d2474bea69c44470b2acb6bd37f362f9057d6e69c617255390b5d0063d9932a931e83c3e130445b688ca1fcdb5bcd 34 | languageName: node 35 | linkType: hard 36 | 37 | "@babel/helper-environment-visitor@npm:^7.16.7": 38 | version: 7.16.7 39 | resolution: "@babel/helper-environment-visitor@npm:7.16.7" 40 | dependencies: 41 | "@babel/types": ^7.16.7 42 | checksum: c03a10105d9ebd1fe632a77356b2e6e2f3c44edba9a93b0dc3591b6a66bd7a2e323dd9502f9ce96fc6401234abff1907aa877b6674f7826b61c953f7c8204bbe 43 | languageName: node 44 | linkType: hard 45 | 46 | "@babel/helper-function-name@npm:^7.16.7": 47 | version: 7.16.7 48 | resolution: "@babel/helper-function-name@npm:7.16.7" 49 | dependencies: 50 | "@babel/helper-get-function-arity": ^7.16.7 51 | "@babel/template": ^7.16.7 52 | "@babel/types": ^7.16.7 53 | checksum: fc77cbe7b10cfa2a262d7a37dca575c037f20419dfe0c5d9317f589599ca24beb5f5c1057748011159149eaec47fe32338c6c6412376fcded68200df470161e1 54 | languageName: node 55 | linkType: hard 56 | 57 | "@babel/helper-get-function-arity@npm:^7.16.7": 58 | version: 7.16.7 59 | resolution: "@babel/helper-get-function-arity@npm:7.16.7" 60 | dependencies: 61 | "@babel/types": ^7.16.7 62 | checksum: 25d969fb207ff2ad5f57a90d118f6c42d56a0171022e200aaa919ba7dc95ae7f92ec71cdea6c63ef3629a0dc962ab4c78e09ca2b437185ab44539193f796e0c3 63 | languageName: node 64 | linkType: hard 65 | 66 | "@babel/helper-hoist-variables@npm:^7.16.7": 67 | version: 7.16.7 68 | resolution: "@babel/helper-hoist-variables@npm:7.16.7" 69 | dependencies: 70 | "@babel/types": ^7.16.7 71 | checksum: 6ae1641f4a751cd9045346e3f61c3d9ec1312fd779ab6d6fecfe2a96e59a481ad5d7e40d2a840894c13b3fd6114345b157f9e3062fc5f1580f284636e722de60 72 | languageName: node 73 | linkType: hard 74 | 75 | "@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.0": 76 | version: 7.16.0 77 | resolution: "@babel/helper-module-imports@npm:7.16.0" 78 | dependencies: 79 | "@babel/types": ^7.16.0 80 | checksum: 8e1eb9ac39440e52080b87c78d8d318e7c93658bdd0f3ce0019c908de88cbddafdc241f392898c0b0ba81fc52c8c6d2f9cc1b163ac5ed2a474d49b11646b7516 81 | languageName: node 82 | linkType: hard 83 | 84 | "@babel/helper-plugin-utils@npm:^7.8.0": 85 | version: 7.14.5 86 | resolution: "@babel/helper-plugin-utils@npm:7.14.5" 87 | checksum: fe20e90a24d02770a60ebe80ab9f0dfd7258503cea8006c71709ac9af1aa3e47b0de569499673f11ea6c99597f8c0e4880ae1d505986e61101b69716820972fe 88 | languageName: node 89 | linkType: hard 90 | 91 | "@babel/helper-split-export-declaration@npm:^7.16.7": 92 | version: 7.16.7 93 | resolution: "@babel/helper-split-export-declaration@npm:7.16.7" 94 | dependencies: 95 | "@babel/types": ^7.16.7 96 | checksum: e10aaf135465c55114627951b79115f24bc7af72ecbb58d541d66daf1edaee5dde7cae3ec8c3639afaf74526c03ae3ce723444e3b5b3dc77140c456cd84bcaa1 97 | languageName: node 98 | linkType: hard 99 | 100 | "@babel/helper-validator-identifier@npm:^7.15.7": 101 | version: 7.15.7 102 | resolution: "@babel/helper-validator-identifier@npm:7.15.7" 103 | checksum: f041c28c531d1add5cc345b25d5df3c29c62bce3205b4d4a93dcd164ccf630350acba252d374fad8f5d8ea526995a215829f27183ba7ce7ce141843bf23068a6 104 | languageName: node 105 | linkType: hard 106 | 107 | "@babel/helper-validator-identifier@npm:^7.16.7": 108 | version: 7.16.7 109 | resolution: "@babel/helper-validator-identifier@npm:7.16.7" 110 | checksum: dbb3db9d184343152520a209b5684f5e0ed416109cde82b428ca9c759c29b10c7450657785a8b5c5256aa74acc6da491c1f0cf6b784939f7931ef82982051b69 111 | languageName: node 112 | linkType: hard 113 | 114 | "@babel/highlight@npm:^7.16.7": 115 | version: 7.16.7 116 | resolution: "@babel/highlight@npm:7.16.7" 117 | dependencies: 118 | "@babel/helper-validator-identifier": ^7.16.7 119 | chalk: ^2.0.0 120 | js-tokens: ^4.0.0 121 | checksum: f7e04e7e03b83c2cca984f4d3e180c9b018784f45d03367e94daf983861229ddc47264045f3b58dfeb0007f9c67bc2a76c4de1693bad90e5394876ef55ece5bb 122 | languageName: node 123 | linkType: hard 124 | 125 | "@babel/parser@npm:^7.16.7": 126 | version: 7.16.7 127 | resolution: "@babel/parser@npm:7.16.7" 128 | bin: 129 | parser: ./bin/babel-parser.js 130 | checksum: e664ff1edda164ab3f3c97fc1dd1a8930b0fba9981cbf873d3f25a22d16d50e2efcfaf81daeefa978bff2c4f268d34832f6817c8bc4e03594c3f43beba92fb68 131 | languageName: node 132 | linkType: hard 133 | 134 | "@babel/plugin-syntax-object-rest-spread@npm:^7.8.3": 135 | version: 7.8.3 136 | resolution: "@babel/plugin-syntax-object-rest-spread@npm:7.8.3" 137 | dependencies: 138 | "@babel/helper-plugin-utils": ^7.8.0 139 | peerDependencies: 140 | "@babel/core": ^7.0.0-0 141 | checksum: fddcf581a57f77e80eb6b981b10658421bc321ba5f0a5b754118c6a92a5448f12a0c336f77b8abf734841e102e5126d69110a306eadb03ca3e1547cab31f5cbf 142 | languageName: node 143 | linkType: hard 144 | 145 | "@babel/runtime@npm:^7.7.6": 146 | version: 7.16.3 147 | resolution: "@babel/runtime@npm:7.16.3" 148 | dependencies: 149 | regenerator-runtime: ^0.13.4 150 | checksum: ab8ac887096d76185ddbf291d28fb976cd32473696dc497ad4905b784acbd5aa462533ad83a5c5104e10ead28c2e0e119840ee28ed8eff90dcdde9d57f916eda 151 | languageName: node 152 | linkType: hard 153 | 154 | "@babel/template@npm:^7.16.7": 155 | version: 7.16.7 156 | resolution: "@babel/template@npm:7.16.7" 157 | dependencies: 158 | "@babel/code-frame": ^7.16.7 159 | "@babel/parser": ^7.16.7 160 | "@babel/types": ^7.16.7 161 | checksum: 10cd112e89276e00f8b11b55a51c8b2f1262c318283a980f4d6cdb0286dc05734b9aaeeb9f3ad3311900b09bc913e02343fcaa9d4a4f413964aaab04eb84ac4a 162 | languageName: node 163 | linkType: hard 164 | 165 | "@babel/traverse@npm:^7.4.5": 166 | version: 7.16.7 167 | resolution: "@babel/traverse@npm:7.16.7" 168 | dependencies: 169 | "@babel/code-frame": ^7.16.7 170 | "@babel/generator": ^7.16.7 171 | "@babel/helper-environment-visitor": ^7.16.7 172 | "@babel/helper-function-name": ^7.16.7 173 | "@babel/helper-hoist-variables": ^7.16.7 174 | "@babel/helper-split-export-declaration": ^7.16.7 175 | "@babel/parser": ^7.16.7 176 | "@babel/types": ^7.16.7 177 | debug: ^4.1.0 178 | globals: ^11.1.0 179 | checksum: 65261f7a5bf257c10a9415b6c227fb555ace359ad786645d9cf22f0e3fc8dc8e38895269f3b93cc39eccd8ed992e7bacc358b4cb7d3496fe54f91cda49220834 180 | languageName: node 181 | linkType: hard 182 | 183 | "@babel/types@npm:^7.16.0": 184 | version: 7.16.0 185 | resolution: "@babel/types@npm:7.16.0" 186 | dependencies: 187 | "@babel/helper-validator-identifier": ^7.15.7 188 | to-fast-properties: ^2.0.0 189 | checksum: 5b483da5c6e6f2394fba7ee1da8787a0c9cddd33491271c4da702e49e6faf95ce41d7c8bf9a4ee47f2ef06bdb35096f4d0f6ae4b5bea35ebefe16309d22344b7 190 | languageName: node 191 | linkType: hard 192 | 193 | "@babel/types@npm:^7.16.7": 194 | version: 7.16.7 195 | resolution: "@babel/types@npm:7.16.7" 196 | dependencies: 197 | "@babel/helper-validator-identifier": ^7.16.7 198 | to-fast-properties: ^2.0.0 199 | checksum: df9210723259df9faea8c7e5674a59e57ead82664aab9f54daae887db5a50a956f30f57ed77a2d6cbb89b908d520cf8d883267c4e9098e31bc74649f2f714654 200 | languageName: node 201 | linkType: hard 202 | 203 | "@babel/types@npm:^7.8.3": 204 | version: 7.17.0 205 | resolution: "@babel/types@npm:7.17.0" 206 | dependencies: 207 | "@babel/helper-validator-identifier": ^7.16.7 208 | to-fast-properties: ^2.0.0 209 | checksum: 12e5a287986fe557188e87b2c5202223f1dc83d9239a196ab936fdb9f8c1eb0be717ff19f934b5fad4e29a75586d5798f74bed209bccea1c20376b9952056f0e 210 | languageName: node 211 | linkType: hard 212 | 213 | "@emotion/is-prop-valid@npm:^0.8.8": 214 | version: 0.8.8 215 | resolution: "@emotion/is-prop-valid@npm:0.8.8" 216 | dependencies: 217 | "@emotion/memoize": 0.7.4 218 | checksum: bb7ec6d48c572c540e24e47cc94fc2f8dec2d6a342ae97bc9c8b6388d9b8d283862672172a1bb62d335c02662afe6291e10c71e9b8642664a8b43416cdceffac 219 | languageName: node 220 | linkType: hard 221 | 222 | "@emotion/memoize@npm:0.7.4": 223 | version: 0.7.4 224 | resolution: "@emotion/memoize@npm:0.7.4" 225 | checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc 226 | languageName: node 227 | linkType: hard 228 | 229 | "@emotion/stylis@npm:^0.8.4": 230 | version: 0.8.5 231 | resolution: "@emotion/stylis@npm:0.8.5" 232 | checksum: 67ff5958449b2374b329fb96e83cb9025775ffe1e79153b499537c6c8b2eb64b77f32d7b5d004d646973662356ceb646afd9269001b97c54439fceea3203ce65 233 | languageName: node 234 | linkType: hard 235 | 236 | "@emotion/unitless@npm:^0.7.4": 237 | version: 0.7.5 238 | resolution: "@emotion/unitless@npm:0.7.5" 239 | checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b 240 | languageName: node 241 | linkType: hard 242 | 243 | "@types/react@link:../node_modules/@types/react::locator=dezenix-react-example%40workspace%3A.": 244 | version: 0.0.0-use.local 245 | resolution: "@types/react@link:../node_modules/@types/react::locator=dezenix-react-example%40workspace%3A." 246 | languageName: node 247 | linkType: soft 248 | 249 | "ansi-styles@npm:^3.2.1": 250 | version: 3.2.1 251 | resolution: "ansi-styles@npm:3.2.1" 252 | dependencies: 253 | color-convert: ^1.9.0 254 | checksum: d85ade01c10e5dd77b6c89f34ed7531da5830d2cb5882c645f330079975b716438cd7ebb81d0d6e6b4f9c577f19ae41ab55f07f19786b02f9dfd9e0377395665 255 | languageName: node 256 | linkType: hard 257 | 258 | "async@npm:0.9.0": 259 | version: 0.9.0 260 | resolution: "async@npm:0.9.0" 261 | checksum: 31c29c216d3f00b3f8ff610f5d6a9f9155525fa1395367b00c8d0580d556166e1882485c04d50e67b3b8216bde635e69682ab0d4fa9a5a42d95bf84d5de230b3 262 | languageName: node 263 | linkType: hard 264 | 265 | "babel-plugin-styled-components@npm:>= 1.12.0": 266 | version: 2.0.2 267 | resolution: "babel-plugin-styled-components@npm:2.0.2" 268 | dependencies: 269 | "@babel/helper-annotate-as-pure": ^7.16.0 270 | "@babel/helper-module-imports": ^7.16.0 271 | babel-plugin-syntax-jsx: ^6.18.0 272 | lodash: ^4.17.11 273 | peerDependencies: 274 | styled-components: ">= 2" 275 | checksum: 3de729e909506b8dda27567fa561aa2f50822f1151f0d321303790afa45ffc0698f0d6836b8c8fd5f24845f4e1b181f8c51532dd9c1fa7a15fa37033a445c137 276 | languageName: node 277 | linkType: hard 278 | 279 | "babel-plugin-syntax-jsx@npm:^6.18.0": 280 | version: 6.18.0 281 | resolution: "babel-plugin-syntax-jsx@npm:6.18.0" 282 | checksum: 0c7ce5b81d6cfc01a7dd7a76a9a8f090ee02ba5c890310f51217ef1a7e6163fb7848994bbc14fd560117892e82240df9c7157ad0764da67ca5f2afafb73a7d27 283 | languageName: node 284 | linkType: hard 285 | 286 | "camelize@npm:^1.0.0": 287 | version: 1.0.0 288 | resolution: "camelize@npm:1.0.0" 289 | checksum: 769f8d10071f57b974d9a51dc02f589dd7fb07ea6a7ecde1a57b52ae68657ba61fe85c60d50661b76c7dbb76b6474fbfd3356aee33cf5f025cd7fd6fb2811b73 290 | languageName: node 291 | linkType: hard 292 | 293 | "chalk@npm:^2.0.0": 294 | version: 2.4.2 295 | resolution: "chalk@npm:2.4.2" 296 | dependencies: 297 | ansi-styles: ^3.2.1 298 | escape-string-regexp: ^1.0.5 299 | supports-color: ^5.3.0 300 | checksum: ec3661d38fe77f681200f878edbd9448821924e0f93a9cefc0e26a33b145f1027a2084bf19967160d11e1f03bfe4eaffcabf5493b89098b2782c3fe0b03d80c2 301 | languageName: node 302 | linkType: hard 303 | 304 | "color-convert@npm:^1.9.0": 305 | version: 1.9.3 306 | resolution: "color-convert@npm:1.9.3" 307 | dependencies: 308 | color-name: 1.1.3 309 | checksum: fd7a64a17cde98fb923b1dd05c5f2e6f7aefda1b60d67e8d449f9328b4e53b228a428fd38bfeaeb2db2ff6b6503a776a996150b80cdf224062af08a5c8a3a203 310 | languageName: node 311 | linkType: hard 312 | 313 | "color-name@npm:1.1.3": 314 | version: 1.1.3 315 | resolution: "color-name@npm:1.1.3" 316 | checksum: 09c5d3e33d2105850153b14466501f2bfb30324a2f76568a408763a3b7433b0e50e5b4ab1947868e65cb101bb7cb75029553f2c333b6d4b8138a73fcc133d69d 317 | languageName: node 318 | linkType: hard 319 | 320 | "colors@npm:1.0.3": 321 | version: 1.0.3 322 | resolution: "colors@npm:1.0.3" 323 | checksum: 234e8d3ab7e4003851cdd6a1f02eaa16dabc502ee5f4dc576ad7959c64b7477b15bd21177bab4055a4c0a66aa3d919753958030445f87c39a253d73b7a3637f5 324 | languageName: node 325 | linkType: hard 326 | 327 | "corser@npm:~2.0.0": 328 | version: 2.0.1 329 | resolution: "corser@npm:2.0.1" 330 | checksum: 9ff6944eda760c8c3118747a636afc3ede53b41e7b9960513a15b88032209a728e630ae4b41e20a941e34da129fe9094d1f5d95123ef64ac2e16cdad8dce9c87 331 | languageName: node 332 | linkType: hard 333 | 334 | "css-color-keywords@npm:^1.0.0": 335 | version: 1.0.0 336 | resolution: "css-color-keywords@npm:1.0.0" 337 | checksum: 8f125e3ad477bd03c77b533044bd9e8a6f7c0da52d49bbc0bbe38327b3829d6ba04d368ca49dd9ff3b667d2fc8f1698d891c198bbf8feade1a5501bf5a296408 338 | languageName: node 339 | linkType: hard 340 | 341 | "css-to-react-native@npm:^3.0.0": 342 | version: 3.0.0 343 | resolution: "css-to-react-native@npm:3.0.0" 344 | dependencies: 345 | camelize: ^1.0.0 346 | css-color-keywords: ^1.0.0 347 | postcss-value-parser: ^4.0.2 348 | checksum: 98a2e9d4fbe9cabc8b744dfdd5ec108396ce497a7b860912a95b299bd52517461281810fcb707965a021a8be39adca9587184a26fb4e926211391a1557aca3c1 349 | languageName: node 350 | linkType: hard 351 | 352 | "debug@npm:^4.1.0": 353 | version: 4.3.3 354 | resolution: "debug@npm:4.3.3" 355 | dependencies: 356 | ms: 2.1.2 357 | peerDependenciesMeta: 358 | supports-color: 359 | optional: true 360 | checksum: 14472d56fe4a94dbcfaa6dbed2dd3849f1d72ba78104a1a328047bb564643ca49df0224c3a17fa63533fd11dd3d4c8636cd861191232a2c6735af00cc2d4de16 361 | languageName: node 362 | linkType: hard 363 | 364 | "dezenix-react-example@workspace:.": 365 | version: 0.0.0-use.local 366 | resolution: "dezenix-react-example@workspace:." 367 | dependencies: 368 | "@babel/plugin-syntax-object-rest-spread": ^7.8.3 369 | "@types/react": "link:../node_modules/@types/react" 370 | dezenix-react: "link:.." 371 | eslint-config-react: ^1.1.7 372 | http-serve: ^1.0.1 373 | react: "link:../node_modules/react" 374 | react-dom: "link:../node_modules/react-dom" 375 | react-router-dom: ^6.0.2 376 | react-scripts: "link:../node_modules/react-scripts" 377 | styled-components: ^5.3.3 378 | languageName: unknown 379 | linkType: soft 380 | 381 | "dezenix-react@link:..::locator=dezenix-react-example%40workspace%3A.": 382 | version: 0.0.0-use.local 383 | resolution: "dezenix-react@link:..::locator=dezenix-react-example%40workspace%3A." 384 | languageName: node 385 | linkType: soft 386 | 387 | "ecstatic@npm:^2.0.0": 388 | version: 2.2.2 389 | resolution: "ecstatic@npm:2.2.2" 390 | dependencies: 391 | he: ^1.1.1 392 | mime: ^1.2.11 393 | minimist: ^1.1.0 394 | url-join: ^2.0.2 395 | bin: 396 | ecstatic: ./lib/ecstatic.js 397 | checksum: 27c0296b26839b43978e271f15b18723b1b3015f4cbfa2978fc77e5c9f6ac66f6264863c32c61021d1e2cbf8ebef86a33b8575abc106db5f2f296a4e543342b4 398 | languageName: node 399 | linkType: hard 400 | 401 | "escape-string-regexp@npm:^1.0.5": 402 | version: 1.0.5 403 | resolution: "escape-string-regexp@npm:1.0.5" 404 | checksum: 6092fda75c63b110c706b6a9bfde8a612ad595b628f0bd2147eea1d3406723020810e591effc7db1da91d80a71a737a313567c5abb3813e8d9c71f4aa595b410 405 | languageName: node 406 | linkType: hard 407 | 408 | "eslint-config-react@npm:^1.1.7": 409 | version: 1.1.7 410 | resolution: "eslint-config-react@npm:1.1.7" 411 | checksum: 15d3d7f78e720c225ac983fb6985825b561941f1c930116c96f8ab8600eb65db603f5ef200a10fabd51f8ef564c107e8eb0d3f69609bfdedfb50290227249a70 412 | languageName: node 413 | linkType: hard 414 | 415 | "eventemitter3@npm:^4.0.0": 416 | version: 4.0.7 417 | resolution: "eventemitter3@npm:4.0.7" 418 | checksum: 1875311c42fcfe9c707b2712c32664a245629b42bb0a5a84439762dd0fd637fc54d078155ea83c2af9e0323c9ac13687e03cfba79b03af9f40c89b4960099374 419 | languageName: node 420 | linkType: hard 421 | 422 | "follow-redirects@npm:^1.0.0": 423 | version: 1.14.5 424 | resolution: "follow-redirects@npm:1.14.5" 425 | peerDependenciesMeta: 426 | debug: 427 | optional: true 428 | checksum: f004a76b2ee3a849772c2816e30928253bf47537b0f00184d89f4966413add96a228a4d96ca8c702bc045a683c52c2ba41545c915cc1a5e33bf8fd9d07b59aee 429 | languageName: node 430 | linkType: hard 431 | 432 | "globals@npm:^11.1.0": 433 | version: 11.12.0 434 | resolution: "globals@npm:11.12.0" 435 | checksum: 67051a45eca3db904aee189dfc7cd53c20c7d881679c93f6146ddd4c9f4ab2268e68a919df740d39c71f4445d2b38ee360fc234428baea1dbdfe68bbcb46979e 436 | languageName: node 437 | linkType: hard 438 | 439 | "has-flag@npm:^3.0.0": 440 | version: 3.0.0 441 | resolution: "has-flag@npm:3.0.0" 442 | checksum: 4a15638b454bf086c8148979aae044dd6e39d63904cd452d970374fa6a87623423da485dfb814e7be882e05c096a7ccf1ebd48e7e7501d0208d8384ff4dea73b 443 | languageName: node 444 | linkType: hard 445 | 446 | "he@npm:^1.1.1": 447 | version: 1.2.0 448 | resolution: "he@npm:1.2.0" 449 | bin: 450 | he: bin/he 451 | checksum: 3d4d6babccccd79c5c5a3f929a68af33360d6445587d628087f39a965079d84f18ce9c3d3f917ee1e3978916fc833bb8b29377c3b403f919426f91bc6965e7a7 452 | languageName: node 453 | linkType: hard 454 | 455 | "history@npm:^5.1.0": 456 | version: 5.1.0 457 | resolution: "history@npm:5.1.0" 458 | dependencies: 459 | "@babel/runtime": ^7.7.6 460 | checksum: c978710a188ee5ad5d2acf55721c77e27469578c891a66311e71e8920d1390d14476e39a6db07e0ab0f5f8d594f1f62eb55a1059c7549cde7795a36367df5869 461 | languageName: node 462 | linkType: hard 463 | 464 | "hoist-non-react-statics@npm:^3.0.0": 465 | version: 3.3.2 466 | resolution: "hoist-non-react-statics@npm:3.3.2" 467 | dependencies: 468 | react-is: ^16.7.0 469 | checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8 470 | languageName: node 471 | linkType: hard 472 | 473 | "http-proxy@npm:^1.8.1": 474 | version: 1.18.1 475 | resolution: "http-proxy@npm:1.18.1" 476 | dependencies: 477 | eventemitter3: ^4.0.0 478 | follow-redirects: ^1.0.0 479 | requires-port: ^1.0.0 480 | checksum: f5bd96bf83e0b1e4226633dbb51f8b056c3e6321917df402deacec31dd7fe433914fc7a2c1831cf7ae21e69c90b3a669b8f434723e9e8b71fd68afe30737b6a5 481 | languageName: node 482 | linkType: hard 483 | 484 | "http-serve@npm:^1.0.1": 485 | version: 1.0.1 486 | resolution: "http-serve@npm:1.0.1" 487 | dependencies: 488 | colors: 1.0.3 489 | corser: ~2.0.0 490 | ecstatic: ^2.0.0 491 | http-proxy: ^1.8.1 492 | opener: ~1.4.0 493 | optimist: 0.6.x 494 | portfinder: 0.4.x 495 | union: ~0.4.3 496 | bin: 497 | hs: ./bin/http-serve 498 | http-serve: ./bin/http-serve 499 | checksum: 133bf2a04361a8a3946fb3b6f98238c9310a20b557e976ca82e5107392de60d600cf4cb9d922092c687d876c907868d583590a4c64a72adff289ef7b05f0137a 500 | languageName: node 501 | linkType: hard 502 | 503 | "js-tokens@npm:^4.0.0": 504 | version: 4.0.0 505 | resolution: "js-tokens@npm:4.0.0" 506 | checksum: 8a95213a5a77deb6cbe94d86340e8d9ace2b93bc367790b260101d2f36a2eaf4e4e22d9fa9cf459b38af3a32fb4190e638024cf82ec95ef708680e405ea7cc78 507 | languageName: node 508 | linkType: hard 509 | 510 | "jsesc@npm:^2.5.1": 511 | version: 2.5.2 512 | resolution: "jsesc@npm:2.5.2" 513 | bin: 514 | jsesc: bin/jsesc 515 | checksum: 4dc190771129e12023f729ce20e1e0bfceac84d73a85bc3119f7f938843fe25a4aeccb54b6494dce26fcf263d815f5f31acdefac7cc9329efb8422a4f4d9fa9d 516 | languageName: node 517 | linkType: hard 518 | 519 | "lodash@npm:^4.17.11": 520 | version: 4.17.21 521 | resolution: "lodash@npm:4.17.21" 522 | checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7 523 | languageName: node 524 | linkType: hard 525 | 526 | "mime@npm:^1.2.11": 527 | version: 1.6.0 528 | resolution: "mime@npm:1.6.0" 529 | bin: 530 | mime: cli.js 531 | checksum: fef25e39263e6d207580bdc629f8872a3f9772c923c7f8c7e793175cee22777bbe8bba95e5d509a40aaa292d8974514ce634ae35769faa45f22d17edda5e8557 532 | languageName: node 533 | linkType: hard 534 | 535 | "minimist@npm:^1.1.0, minimist@npm:^1.2.5": 536 | version: 1.2.5 537 | resolution: "minimist@npm:1.2.5" 538 | checksum: 86706ce5b36c16bfc35c5fe3dbb01d5acdc9a22f2b6cc810b6680656a1d2c0e44a0159c9a3ba51fb072bb5c203e49e10b51dcd0eec39c481f4c42086719bae52 539 | languageName: node 540 | linkType: hard 541 | 542 | "minimist@npm:~0.0.1": 543 | version: 0.0.10 544 | resolution: "minimist@npm:0.0.10" 545 | checksum: f7b2cb17af165d042bb3d2803f5e6c38d137f0c36a62230fdb643058c25b56749d2c335b17d4de0b0f08f19cb868cac40df207ff7a4c59fd0771e8762e9b783c 546 | languageName: node 547 | linkType: hard 548 | 549 | "mkdirp@npm:0.5.x": 550 | version: 0.5.5 551 | resolution: "mkdirp@npm:0.5.5" 552 | dependencies: 553 | minimist: ^1.2.5 554 | bin: 555 | mkdirp: bin/cmd.js 556 | checksum: 3bce20ea525f9477befe458ab85284b0b66c8dc3812f94155af07c827175948cdd8114852ac6c6d82009b13c1048c37f6d98743eb019651ee25c39acc8aabe7d 557 | languageName: node 558 | linkType: hard 559 | 560 | "ms@npm:2.1.2": 561 | version: 2.1.2 562 | resolution: "ms@npm:2.1.2" 563 | checksum: 673cdb2c3133eb050c745908d8ce632ed2c02d85640e2edb3ace856a2266a813b30c613569bf3354fdf4ea7d1a1494add3bfa95e2713baa27d0c2c71fc44f58f 564 | languageName: node 565 | linkType: hard 566 | 567 | "opener@npm:~1.4.0": 568 | version: 1.4.3 569 | resolution: "opener@npm:1.4.3" 570 | bin: 571 | opener: opener.js 572 | checksum: 2ad12d6c40cc92ca03f079fd2be1ba1a332d23c579f51151b53319f825b34a768a5d1df7eb3efd9823a15211616a7ab8d0b571cf61ec264a0a13f7ff18c582e5 573 | languageName: node 574 | linkType: hard 575 | 576 | "optimist@npm:0.6.x": 577 | version: 0.6.1 578 | resolution: "optimist@npm:0.6.1" 579 | dependencies: 580 | minimist: ~0.0.1 581 | wordwrap: ~0.0.2 582 | checksum: 191ab2b119b2908a229065119349d9cbd295217a8777febd2812fc7b95c5f31f5f6ecb4fd0222351466cb33af8410299373229e78dd96713ed5348fcebfb96f4 583 | languageName: node 584 | linkType: hard 585 | 586 | "portfinder@npm:0.4.x": 587 | version: 0.4.0 588 | resolution: "portfinder@npm:0.4.0" 589 | dependencies: 590 | async: 0.9.0 591 | mkdirp: 0.5.x 592 | checksum: fde853556ae33eac7ce93a68e0301e5534376d237d4ff963e1ba5e09bd5641086709dacab7c811b01d17d4642ec04ee93b6e47e3960112b56316300930050ac4 593 | languageName: node 594 | linkType: hard 595 | 596 | "postcss-value-parser@npm:^4.0.2": 597 | version: 4.2.0 598 | resolution: "postcss-value-parser@npm:4.2.0" 599 | checksum: 819ffab0c9d51cf0acbabf8996dffbfafbafa57afc0e4c98db88b67f2094cb44488758f06e5da95d7036f19556a4a732525e84289a425f4f6fd8e412a9d7442f 600 | languageName: node 601 | linkType: hard 602 | 603 | "qs@npm:~2.3.3": 604 | version: 2.3.3 605 | resolution: "qs@npm:2.3.3" 606 | checksum: 8ff84a6300bd7c3207c7aada3f349c39bd845761fd804c7dbd9b7146474c8654603a7491090d083a9c86846c3a719ef6f5ef81e1bb2839bd3b435d4a937ce83a 607 | languageName: node 608 | linkType: hard 609 | 610 | "react-dom@link:../node_modules/react-dom::locator=dezenix-react-example%40workspace%3A.": 611 | version: 0.0.0-use.local 612 | resolution: "react-dom@link:../node_modules/react-dom::locator=dezenix-react-example%40workspace%3A." 613 | languageName: node 614 | linkType: soft 615 | 616 | "react-is@npm:^16.7.0": 617 | version: 16.13.1 618 | resolution: "react-is@npm:16.13.1" 619 | checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f 620 | languageName: node 621 | linkType: hard 622 | 623 | "react-router-dom@npm:^6.0.2": 624 | version: 6.0.2 625 | resolution: "react-router-dom@npm:6.0.2" 626 | dependencies: 627 | history: ^5.1.0 628 | react-router: 6.0.2 629 | peerDependencies: 630 | react: ">=16.8" 631 | react-dom: ">=16.8" 632 | checksum: d3680939a4fac286f8df028c1fabe5626567ba065b2029b1cc4ad64fe9444aeba186d0e5e765563fc36ea868e7d17e02fb098f2ebc0b1c70212a8470a4b58ad6 633 | languageName: node 634 | linkType: hard 635 | 636 | "react-router@npm:6.0.2": 637 | version: 6.0.2 638 | resolution: "react-router@npm:6.0.2" 639 | dependencies: 640 | history: ^5.1.0 641 | peerDependencies: 642 | react: ">=16.8" 643 | checksum: 9d4f3a8002a90f38be022c6740e11e9bb481e60ad04c5a0ce2d6dbe685059c09b3037c45414d6e7e40eb97308842380413cfb93c5cdcb992e7ee0c50b4f7fcaa 644 | languageName: node 645 | linkType: hard 646 | 647 | "react-scripts@link:../node_modules/react-scripts::locator=dezenix-react-example%40workspace%3A.": 648 | version: 0.0.0-use.local 649 | resolution: "react-scripts@link:../node_modules/react-scripts::locator=dezenix-react-example%40workspace%3A." 650 | languageName: node 651 | linkType: soft 652 | 653 | "react@link:../node_modules/react::locator=dezenix-react-example%40workspace%3A.": 654 | version: 0.0.0-use.local 655 | resolution: "react@link:../node_modules/react::locator=dezenix-react-example%40workspace%3A." 656 | languageName: node 657 | linkType: soft 658 | 659 | "regenerator-runtime@npm:^0.13.4": 660 | version: 0.13.9 661 | resolution: "regenerator-runtime@npm:0.13.9" 662 | checksum: 65ed455fe5afd799e2897baf691ca21c2772e1a969d19bb0c4695757c2d96249eb74ee3553ea34a91062b2a676beedf630b4c1551cc6299afb937be1426ec55e 663 | languageName: node 664 | linkType: hard 665 | 666 | "requires-port@npm:^1.0.0": 667 | version: 1.0.0 668 | resolution: "requires-port@npm:1.0.0" 669 | checksum: eee0e303adffb69be55d1a214e415cf42b7441ae858c76dfc5353148644f6fd6e698926fc4643f510d5c126d12a705e7c8ed7e38061113bdf37547ab356797ff 670 | languageName: node 671 | linkType: hard 672 | 673 | "shallowequal@npm:^1.1.0": 674 | version: 1.1.0 675 | resolution: "shallowequal@npm:1.1.0" 676 | checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00 677 | languageName: node 678 | linkType: hard 679 | 680 | "source-map@npm:^0.5.0": 681 | version: 0.5.7 682 | resolution: "source-map@npm:0.5.7" 683 | checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d 684 | languageName: node 685 | linkType: hard 686 | 687 | "styled-components@npm:^5.3.3": 688 | version: 5.3.3 689 | resolution: "styled-components@npm:5.3.3" 690 | dependencies: 691 | "@babel/helper-module-imports": ^7.0.0 692 | "@babel/traverse": ^7.4.5 693 | "@emotion/is-prop-valid": ^0.8.8 694 | "@emotion/stylis": ^0.8.4 695 | "@emotion/unitless": ^0.7.4 696 | babel-plugin-styled-components: ">= 1.12.0" 697 | css-to-react-native: ^3.0.0 698 | hoist-non-react-statics: ^3.0.0 699 | shallowequal: ^1.1.0 700 | supports-color: ^5.5.0 701 | peerDependencies: 702 | react: ">= 16.8.0" 703 | react-dom: ">= 16.8.0" 704 | react-is: ">= 16.8.0" 705 | checksum: a104341068fc39fa2c73950a34970d832dc7a511fc52b3df12f34e6746031f1f128f53b4d540bf39d9f0da043cf0d91517faf874d2c87de5e385f5c2e7620436 706 | languageName: node 707 | linkType: hard 708 | 709 | "supports-color@npm:^5.3.0, supports-color@npm:^5.5.0": 710 | version: 5.5.0 711 | resolution: "supports-color@npm:5.5.0" 712 | dependencies: 713 | has-flag: ^3.0.0 714 | checksum: 95f6f4ba5afdf92f495b5a912d4abee8dcba766ae719b975c56c084f5004845f6f5a5f7769f52d53f40e21952a6d87411bafe34af4a01e65f9926002e38e1dac 715 | languageName: node 716 | linkType: hard 717 | 718 | "to-fast-properties@npm:^2.0.0": 719 | version: 2.0.0 720 | resolution: "to-fast-properties@npm:2.0.0" 721 | checksum: be2de62fe58ead94e3e592680052683b1ec986c72d589e7b21e5697f8744cdbf48c266fa72f6c15932894c10187b5f54573a3bcf7da0bfd964d5caf23d436168 722 | languageName: node 723 | linkType: hard 724 | 725 | "union@npm:~0.4.3": 726 | version: 0.4.6 727 | resolution: "union@npm:0.4.6" 728 | dependencies: 729 | qs: ~2.3.3 730 | checksum: 21719a1bea92cd3b06f9742aa3f13cc2e6e288c44b91ba5b6561b4765ea3b0daf7e2d4ec61d27973a656b6f7054d46bf5d9a5038c32cb5787e105fc58aee0b8d 731 | languageName: node 732 | linkType: hard 733 | 734 | "url-join@npm:^2.0.2": 735 | version: 2.0.5 736 | resolution: "url-join@npm:2.0.5" 737 | checksum: 5c935cc99e5bfd7150302420db4eff9830d117be5ea3edf4b2d9e30a51484bc422e94fd9f2fba78192a75cebe2663735af716e07ec094b9a5f24c75046644c73 738 | languageName: node 739 | linkType: hard 740 | 741 | "wordwrap@npm:~0.0.2": 742 | version: 0.0.3 743 | resolution: "wordwrap@npm:0.0.3" 744 | checksum: dfc2d3512e857ae4b3bc2e8d4e5d2c285c28a4b87cd1d81c977ce9a1a99152d355807e046851a3d61148f39d877fbb889352e07b65a9cbdd2256aa928e159026 745 | languageName: node 746 | linkType: hard 747 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dezenix-react", 3 | "version": "1.0.0", 4 | "description": "A library of components", 5 | "author": "Dezenix", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/Dezenix/frontend-reactjs.git" 10 | }, 11 | "main": "dist/index.js", 12 | "module": "dist/index.modern.js", 13 | "source": "src/index.js", 14 | "engines": { 15 | "node": ">=12" 16 | }, 17 | "scripts": { 18 | "build": "microbundle-crl --no-compress --format modern,cjs", 19 | "start:main": "microbundle-crl watch --no-compress --format modern,cjs", 20 | "start:example": "cd example && yarn start", 21 | "start": "yarn start:main & yarn start:example", 22 | "prepare": "run-s build", 23 | "test": "run-s test:unit test:lint test:build", 24 | "test:build": "run-s build", 25 | "test:lint": "eslint .", 26 | "test:unit": "cross-env CI=1 react-scripts test --env=jsdom", 27 | "test:watch": "react-scripts test --env=jsdom", 28 | "predeploy": "cd example && yarn install && yarn run build", 29 | "deploy": "gh-pages -d example/build" 30 | }, 31 | "peerDependencies": { 32 | "react": "^16.0.0" 33 | }, 34 | "devDependencies": { 35 | "@types/react": "^17.0.37", 36 | "babel-eslint": "^10.0.3", 37 | "cross-env": "^7.0.2", 38 | "eslint": "7.11.0", 39 | "eslint-config-prettier": "^8.3.0", 40 | "eslint-config-react": "^1.1.7", 41 | "eslint-config-standard": "^16.0.3", 42 | "eslint-config-standard-react": "^11.0.1", 43 | "eslint-plugin-import": "^2.18.2", 44 | "eslint-plugin-node": "^11.0.0", 45 | "eslint-plugin-prettier": "^4.0.0", 46 | "eslint-plugin-promise": "^5.2.0", 47 | "eslint-plugin-react": "^7.17.0", 48 | "eslint-plugin-standard": "^5.0.0", 49 | "gh-pages": "^3.2.3", 50 | "microbundle-crl": "^0.13.10", 51 | "npm-run-all": "^4.1.5", 52 | "prettier": "^2.0.4", 53 | "react": "^17.0.2", 54 | "react-dom": "^17.0.2", 55 | "react-scripts": "^4.0.3", 56 | "sass": "^1.44.0" 57 | }, 58 | "files": [ 59 | "dist" 60 | ], 61 | "dependencies": { 62 | "react-icons": "^4.3.1", 63 | "styled-components": "^5.3.3" 64 | }, 65 | "packageManager": "yarn@3.2.0" 66 | "browserslist": { 67 | "production": [ 68 | ">0.2%", 69 | "not dead", 70 | "not op_mini all" 71 | ], 72 | "development": [ 73 | "last 1 chrome version", 74 | "last 1 firefox version", 75 | "last 1 safari version" 76 | ] 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/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/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/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/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | } 5 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as Login } from './lib-components/login' 2 | export { default as Register } from './lib-components/register' 3 | export { default as ProductCard } from './lib-components/product_card' 4 | export { default as ProgressBar } from './lib-components/progress_bar' 5 | export { default as ComplexComponent } from './lib-components/complexComponent' 6 | export { default as PortfolioHome } from './lib-components/portfolio_home' 7 | export { default as TeamMembers } from './lib-components/team_members' 8 | export { default as ContactUs} from './lib-components/contact_us' 9 | export { default as GroceryList } from './lib-components/Grocery List Site' 10 | export { default as AnimeSlider } from './lib-components/Anime_Image_Slider' 11 | -------------------------------------------------------------------------------- /src/lib-components/Anime_Image_Slider/index.js: -------------------------------------------------------------------------------- 1 | import react from "react"; 2 | import React from "react"; 3 | import { useEffect,useState,useRef } from "react"; 4 | import style from "./index.module.css" 5 | 6 | const AnimeSlider = ({data})=>{ 7 | 8 | 9 | const handle_container = useRef(); 10 | 11 | const [currnum , setCurrnum] = useState(0); 12 | const [offset,setoffset] = useState(0); 13 | const [ innerwidth , setInnerwidth] = useState(); 14 | const [trigger_comp , setTriggercomp] = useState(true); 15 | const [textanime , setTextanime] = useState(false); 16 | const [listitem , setListItem] = useState(data); 17 | const [windowwidth,setWindowwidth] = useState(window.innerWidth); 18 | 19 | // useEffect(()=>{ 20 | 21 | // async function getData(){ 22 | // const URL = "https://api.jikan.moe/v4/top/anime" 23 | // const response = await fetch(URL) 24 | // const result = await response.json() 25 | 26 | // setListItem(result.data.slice(0,4)) 27 | // console.log(result.data); 28 | // } 29 | // getData() 30 | // },[]) 31 | 32 | 33 | const getinnerwidth = ()=> 34 | { 35 | setInnerwidth(handle_container.current.clientWidth); 36 | 37 | if(windowwidth<650) 38 | { 39 | setTriggercomp(true); 40 | 41 | } 42 | else{ 43 | setTriggercomp(false); 44 | 45 | } 46 | } 47 | 48 | const windowSizeBreakpoint = react.useCallback(()=> 49 | { 50 | 51 | if(window.innerWidth <650) 52 | { 53 | setTriggercomp(true); 54 | 55 | } 56 | else{ 57 | setTriggercomp(false); 58 | 59 | } 60 | },[windowwidth]) 61 | 62 | 63 | useEffect(()=>{ 64 | const size = ()=> 65 | { 66 | if(listitem.length>0) 67 | { 68 | setInnerwidth(handle_container.current.clientWidth); 69 | handle_container.current.style.transition = "none"; 70 | windowSizeBreakpoint(); 71 | setWindowwidth(window.innerWidth); 72 | } 73 | 74 | } 75 | window.addEventListener("resize", size); 76 | 77 | 78 | //switch to current visable slide 79 | let num = currnum; 80 | change(num); 81 | return ()=> window.removeEventListener("resize",size); 82 | }) 83 | 84 | //* next button 85 | const gonext = () => { 86 | handle_container.current.style.transition = "0.4s ease-in"; 87 | let num = currnum; 88 | if (num === listitem.length-1) { 89 | num = 0; 90 | setCurrnum(num); 91 | setoffset(0); 92 | return; 93 | } 94 | setCurrnum(num + 1); 95 | 96 | change(num+1); 97 | } 98 | 99 | //* previous button 100 | const goprev = () => { 101 | handle_container.current.style.transition = "0.4s ease-in"; 102 | let num = currnum; 103 | if (num <= 0) { 104 | num = listitem.length-1; 105 | setCurrnum(num); 106 | 107 | setoffset(-(innerwidth+20) * (num - 1)); 108 | return; 109 | } 110 | setCurrnum(num - 1); 111 | 112 | change(num - 1); 113 | } 114 | 115 | //move the slides 116 | function change(num) { 117 | setoffset(-(innerwidth+20) * num); 118 | 119 | } 120 | 121 | 122 | const textanimation_enter = ()=> 123 | { 124 | 125 | setTextanime(true); 126 | 127 | } 128 | const textanimation_leave = ()=> 129 | { 130 | 131 | setTextanime(false); 132 | 133 | } 134 | 135 | 136 | 137 | 138 | 139 | 140 | return 141 |
142 |

Top Anime

143 | {listitem.length>0 ?
144 | 145 | 146 |
147 | 148 |
149 | { 150 | listitem.map((item)=> 151 | { 152 | const {mal_id,image_url,synopsis,title} = item; 153 | return
154 | 155 | { 156 | (trigger_comp===false) ?
157 |

{title}

158 |

{(synopsis)?(synopsis.length > 125) ? synopsis.substr(0, 125) + "..." : synopsis:"No Information"}

159 | 160 |
161 | {">"} 162 | See more 163 |
164 | 165 |
:
166 |

169 | {(title.length>35)?title.substr(0,34)+"...":title} 170 |

171 |

174 | {(synopsis)?(synopsis.length > 65) ? synopsis.substr(0, 65) + "..." : synopsis:"No Information"} 175 |

176 | See more 177 | 178 |
179 | } 180 |
181 | }) 182 | } 183 | 184 | 185 | 186 |
187 |
188 |
189 | :

Empty list

} 190 |
191 | 192 | } 193 | 194 | export default AnimeSlider; -------------------------------------------------------------------------------- /src/lib-components/Anime_Image_Slider/index.module.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | 8 | .container-large{ 9 | height: 100vh; 10 | background-color: #101820FF; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | flex-direction: column; 15 | gap: 1em; 16 | } 17 | 18 | .top-list 19 | { 20 | 21 | width:48%; 22 | height: 320px; 23 | position: relative; 24 | margin: 0 auto; 25 | /* margin-top: 100px; */ 26 | 27 | } 28 | 29 | .top-list .next-btn, .top-list .prev-btn{ 30 | position: absolute; 31 | z-index: 3; 32 | top: 50%; 33 | 34 | transform: translateY(-50%); 35 | width: 30px; 36 | height: 30px; 37 | border-radius: 50%; 38 | outline: none; 39 | border: none; 40 | box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.623); 41 | } 42 | 43 | .top-list .prev-btn 44 | { 45 | left: -15px; 46 | 47 | } 48 | .top-list .next-btn 49 | { 50 | right: -15px; 51 | } 52 | .prev-btn:hover i{ 53 | color: #de6262; 54 | } 55 | .next-btn:hover i{ 56 | color: #48b1bf; 57 | } 58 | .top-list-header 59 | { 60 | color: #c0dad9; 61 | text-transform: capitalize; 62 | text-align: center; 63 | font-size: clamp(1.3em,2.1vw,4.5vw); 64 | /* position:relative; 65 | top: 480px; */ 66 | } 67 | .no-item 68 | { 69 | color: red; 70 | text-transform: capitalize; 71 | letter-spacing: 2px; 72 | position: relative; 73 | /* top: 650px; */ 74 | text-align: center; 75 | font-size: 1.5em; 76 | } 77 | .top-list-inner 78 | { 79 | height: 89%; 80 | width: 100%; 81 | overflow: hidden; 82 | } 83 | .top-list-item-container 84 | { 85 | 86 | height: 100%; 87 | width: 100%; 88 | display: flex; 89 | position: relative; 90 | left: 0; 91 | 92 | gap: 20px; 93 | } 94 | .top-list-item-container .list-item 95 | { 96 | 97 | flex: 0 0 100%; 98 | display: flex; 99 | align-items: center; 100 | position: relative; 101 | z-index: 2; 102 | overflow: hidden; 103 | } 104 | .top-list-item-container .list-item img 105 | { 106 | aspect-ratio: 16/9; 107 | height: 100%; 108 | width: 200px; 109 | } 110 | 111 | .top-list-item-container .list-item .info 112 | { 113 | 114 | background: white; 115 | flex: 0 0 calc(100% - 200px); 116 | height: 80%; 117 | display: block; 118 | position: relative; 119 | } 120 | .top-list-item-container .list-item .info h2{ 121 | text-align: center; 122 | margin-top: 20px; 123 | color: black; 124 | height: 60px; 125 | font-size: clamp(1.8vw,5px,2vw); 126 | padding: 0 3%; 127 | } 128 | .top-list-item-container .list-item .info p 129 | { 130 | margin-top: 10px; 131 | padding: 0 4%; 132 | color: grey; 133 | } 134 | .list-item .info .btn-seemore 135 | { 136 | text-decoration: none; 137 | 138 | position: absolute; 139 | right: 5%; 140 | bottom: 8%; 141 | color: black; 142 | } 143 | .list-item .info .btn-seemore .inner-div 144 | { 145 | width: 100px; 146 | overflow: hidden; 147 | } 148 | .list-item .info .btn-seemore span 149 | { 150 | 151 | margin-left: 0; 152 | transition: 0.4s; 153 | } 154 | .list-item .info .btn-seemore span:nth-child(1) 155 | { 156 | margin-left: -10px; 157 | } 158 | .list-item .info .btn-seemore:hover span:nth-child(1) 159 | { 160 | margin-left: 0px; 161 | } 162 | .top-list-item-container .list-item .info-sc 163 | { 164 | 165 | position: absolute; 166 | z-index: 7; 167 | width: 100%; 168 | height: 100%; 169 | top: 0; 170 | background: rgba(0, 0, 0, 0); 171 | transition: 0.4s linear; 172 | 173 | } 174 | .top-list-item-container .list-item .info-sc h3{ 175 | color: white; 176 | text-align: center; 177 | padding: 0 4%; 178 | height: 100px; 179 | margin-top: 20px; 180 | transform: translateX(-120%); 181 | transition: 0.25s linear; 182 | } 183 | .top-list-item-container .list-item .info-sc p{ 184 | color: rgb(216, 216, 216); 185 | padding: 0 9%; 186 | text-align: center; 187 | font-size: 0.97em; 188 | transform: translateX(-120%); 189 | transition: 0.25s linear; 190 | height: 110px; 191 | } 192 | .btn-seemore-sc 193 | { 194 | border: 2px solid white; 195 | color: white; 196 | padding: 3%; 197 | text-decoration: none; 198 | border-radius: 20px; 199 | position: relative; 200 | left: 30%; 201 | top: 25%; 202 | transition: 0.25s linear; 203 | } 204 | .btn-seemore-sc:hover 205 | { 206 | background: white; 207 | color: black; 208 | } 209 | @keyframes anime-text-from-list 210 | { 211 | 100% 212 | { 213 | transform: translateX(0); 214 | } 215 | } 216 | 217 | @media screen and (max-width : 940px) 218 | { 219 | .top-list 220 | { 221 | 222 | width:74%; 223 | 224 | 225 | } 226 | .top-list-item-container .list-item .info h2{ 227 | text-align: center; 228 | margin-top: 20px; 229 | color: black; 230 | height: 60px; 231 | font-size: clamp(2.6vw,5px,2vw); 232 | } 233 | .top-list-item-container .list-item .info p 234 | { 235 | margin-top: 10px; 236 | padding: 0 4%; 237 | font-size: clamp(1.6vw,1.2em,2.1vw); 238 | color: grey; 239 | } 240 | 241 | } 242 | 243 | @media screen and (max-width:650px) 244 | { 245 | 246 | .top-list 247 | { 248 | 249 | width: 200px; 250 | 251 | 252 | } 253 | .top-list-item-container .list-item:hover .info-sc 254 | { 255 | 256 | 257 | background: rgba(0, 0, 0, 0.45); 258 | } 259 | 260 | 261 | } 262 | 263 | -------------------------------------------------------------------------------- /src/lib-components/Grocery List Site/Alert.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react' 2 | import styles from './index.module.css' 3 | 4 | const Alert = ({text, type, removeAlert,list}) => { 5 | useEffect(()=>{ 6 | let showingAlert = setTimeout(() => { 7 | removeAlert() 8 | }, 3000); 9 | return ()=> clearTimeout(showingAlert); 10 | },[list]) 11 | return ( 12 |

{text}

13 | ) 14 | } 15 | 16 | export default Alert 17 | -------------------------------------------------------------------------------- /src/lib-components/Grocery List Site/List.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaEdit, FaTrash } from 'react-icons/fa' 3 | import styles from './index.module.css' 4 | 5 | const List = ({gList,deleteItem,editItem}) => { 6 | return ( 7 |
8 | {gList.map(({id, title})=>{ 9 | return ( 10 |
11 |

{title}

12 |
13 | 16 | 19 |
20 |
21 | ) 22 | })} 23 |
24 | ) 25 | } 26 | 27 | export default List 28 | -------------------------------------------------------------------------------- /src/lib-components/Grocery List Site/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import List from './List' 3 | import Alert from './Alert' 4 | import styles from './index.module.css' 5 | 6 | const getLocalStorage = ()=>{ 7 | let data = JSON.parse(localStorage.getItem('list')); 8 | if(data){ 9 | return data; 10 | } 11 | else return [] ; 12 | } 13 | 14 | function GroceryList() { 15 | const [name, setName] = useState(''); 16 | const [list, setList] = useState(getLocalStorage); 17 | const [isEditing, setIsEditing] = useState(false); 18 | const [editId, setEditId] = useState(); 19 | const [alert, setAlert] = useState({ 20 | value : false, 21 | text : '', 22 | type : '' 23 | }); 24 | 25 | const showAlert = (value=false, text='', type='') => { 26 | setAlert({value, text, type}); 27 | } 28 | 29 | 30 | 31 | const handleSubmit = (e)=>{ 32 | e.preventDefault(); 33 | if(name != ''){ 34 | setList(preVal=>{ 35 | let newList = {id:new Date().getTime().toString(), title:name}; 36 | return [...preVal , newList]; 37 | }) 38 | setName(''); 39 | showAlert(true, 'success', 'success'); 40 | } 41 | if(name == ''){ 42 | showAlert(true, 'please enter some item', 'danger'); 43 | } 44 | if(name && isEditing){ 45 | setList( 46 | list.map(item => { 47 | if(item.id === editId){ 48 | return { 49 | ...item, 50 | title : name 51 | } 52 | } 53 | return item; 54 | }) 55 | ) 56 | setName(''); 57 | setEditId(null); 58 | setIsEditing(false); 59 | } 60 | } 61 | 62 | useEffect(()=>{ 63 | localStorage.setItem('list',JSON.stringify(list)); 64 | },[list]) 65 | 66 | 67 | const deleteItem = (id)=>{ 68 | let newArray = list.filter(item=> item.id != id); 69 | setList(newArray); 70 | showAlert(true, 'Item deleted', 'danger'); 71 | } 72 | const editItem = (id) =>{ 73 | let itemToEdit = list.find(item=> item.id===id); 74 | setIsEditing(true); 75 | setEditId(id); 76 | setName(itemToEdit.title); 77 | } 78 | return( 79 |
80 |
81 | {alert.value && } 82 |

Add your Grocery Here

83 |
84 | setName(e.target.value)} /> 85 | 86 |
87 | 88 | {list.length > 0 && 89 |
90 | 91 |
} 92 |
93 | ) 94 | } 95 | 96 | export default GroceryList 97 | -------------------------------------------------------------------------------- /src/lib-components/Grocery List Site/index.module.css: -------------------------------------------------------------------------------- 1 | /* 2 | =============== 3 | Variables 4 | =============== 5 | */ 6 | 7 | :root { 8 | /* dark shades of primary color*/ 9 | --clr-primary-1: hsl(205, 86%, 17%); 10 | --clr-primary-2: hsl(205, 77%, 27%); 11 | --clr-primary-3: hsl(205, 72%, 37%); 12 | --clr-primary-4: hsl(205, 63%, 48%); 13 | /* primary/main color */ 14 | --clr-primary-5: hsl(205, 78%, 60%); 15 | /* lighter shades of primary color */ 16 | --clr-primary-6: hsl(205, 89%, 70%); 17 | --clr-primary-7: hsl(205, 90%, 76%); 18 | --clr-primary-8: hsl(205, 86%, 81%); 19 | --clr-primary-9: hsl(205, 90%, 88%); 20 | --clr-primary-10: hsl(205, 100%, 96%); 21 | /* darkest grey - used for headings */ 22 | --clr-grey-1: hsl(209, 61%, 16%); 23 | --clr-grey-2: hsl(211, 39%, 23%); 24 | --clr-grey-3: hsl(209, 34%, 30%); 25 | --clr-grey-4: hsl(209, 28%, 39%); 26 | /* grey used for paragraphs */ 27 | --clr-grey-5: hsl(210, 22%, 49%); 28 | --clr-grey-6: hsl(209, 23%, 60%); 29 | --clr-grey-7: hsl(211, 27%, 70%); 30 | --clr-grey-8: hsl(210, 31%, 80%); 31 | --clr-grey-9: hsl(212, 33%, 89%); 32 | --clr-grey-10: hsl(210, 36%, 96%); 33 | --clr-white: #fff; 34 | --clr-red-dark: hsl(360, 67%, 44%); 35 | --clr-red-light: hsl(360, 71%, 66%); 36 | --clr-green-dark: hsl(125, 67%, 44%); 37 | --clr-green-light: hsl(125, 71%, 66%); 38 | --clr-orange-light : hsl(34, 100%, 50%); 39 | --clr-orange-dark : hsl(34, 100%, 38%); 40 | --clr-black: #222; 41 | --transition: all 0.3s linear; 42 | --spacing: 0.1rem; 43 | --radius: 0.25rem; 44 | --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 45 | --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 46 | --max-width: 1170px; 47 | --fixed-width: 620px; 48 | } 49 | /* 50 | =============== 51 | Global Styles 52 | =============== 53 | */ 54 | 55 | *, 56 | ::after, 57 | ::before { 58 | margin: 0; 59 | padding: 0; 60 | box-sizing: border-box; 61 | } 62 | /* ul { 63 | list-style-type: none; 64 | } 65 | a { 66 | text-decoration: none; 67 | } 68 | h1, 69 | h2, 70 | h3, 71 | h4 { 72 | letter-spacing: var(--spacing); 73 | text-transform: capitalize; 74 | line-height: 1.25; 75 | margin-bottom: 0.75rem; 76 | } 77 | h1 { 78 | font-size: 3rem; 79 | } 80 | h2 { 81 | font-size: 2rem; 82 | } 83 | h3 { 84 | font-size: 1.25rem; 85 | } 86 | h4 { 87 | font-size: 0.875rem; 88 | } 89 | p { 90 | margin-bottom: 1.25rem; 91 | color: var(--clr-grey-5); 92 | } */ 93 | /* @media screen and (min-width: 800px) { 94 | h1 { 95 | font-size: 4rem; 96 | } 97 | h2 { 98 | font-size: 2.5rem; 99 | } 100 | h3 { 101 | font-size: 1.75rem; 102 | } 103 | h4 { 104 | font-size: 1rem; 105 | } 106 | body { 107 | font-size: 1rem; 108 | } 109 | h1, 110 | h2, 111 | h3, 112 | h4 { 113 | line-height: 1; 114 | } 115 | } */ 116 | .btn { 117 | text-transform: uppercase; 118 | background: transparent; 119 | color: var(--clr-black); 120 | padding: 0.375rem 0.75rem; 121 | letter-spacing: var(--spacing); 122 | display: inline-block; 123 | transition: var(--transition); 124 | font-size: 0.875rem; 125 | border: 2px solid var(--clr-black); 126 | cursor: pointer; 127 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 128 | border-radius: var(--radius); 129 | } 130 | .btn:hover { 131 | color: var(--clr-white); 132 | background: var(--clr-black); 133 | } 134 | /* section */ 135 | .section { 136 | padding: 5rem 0; 137 | } 138 | 139 | .sectionCenter { 140 | display: flex; 141 | flex-direction: column; 142 | background: var(--clr-black); 143 | color: var(--clr-grey-1); 144 | line-height: 1.5; 145 | font-size: 0.875rem; 146 | width: 90vw; 147 | margin: 0 auto; 148 | max-width: 35rem; 149 | margin-top: 8rem; 150 | } 151 | @media screen and (min-width: 992px) { 152 | .sectionCenter { 153 | width: 95vw; 154 | } 155 | } 156 | /* main { 157 | min-height: 100vh; 158 | display: grid; 159 | place-items: center; 160 | } */ 161 | /* 162 | =============== 163 | Grocery List 164 | =============== 165 | */ 166 | .sectionCenter { 167 | background: hsla(209, 61%, 16%, 0.76); 168 | border-radius: var(--radius); 169 | box-shadow: var(--light-shadow); 170 | transition: var(--transition); 171 | padding: 2rem; 172 | min-height: auto !important; 173 | } 174 | .sectionCenter::before{ 175 | content:""; 176 | position: absolute; 177 | top: 0; 178 | left: 0; 179 | width: 100vw; 180 | height: 100vh; 181 | background-image:url("https://images.unsplash.com/photo-1506617564039-2f3b650b7010?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGdyb2Nlcnl8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60") ; 182 | background-color:var(--clr-grey-3); 183 | background-repeat: no-repeat; 184 | background-size: cover; 185 | background-blend-mode: multiply; 186 | z-index: -11; 187 | filter: blur(7px); 188 | } 189 | .sectionCenter:hover { 190 | box-shadow: var(--dark-shadow); 191 | } 192 | .alert { 193 | margin-bottom: 1rem; 194 | height: 1.25rem; 195 | display: grid; 196 | align-items: center; 197 | text-align: center; 198 | font-size: 0.7rem; 199 | border-radius: 0.25rem; 200 | letter-spacing: var(--spacing); 201 | text-transform: capitalize; 202 | } 203 | .alert-danger { 204 | color: #721c24; 205 | background: #f8d7da; 206 | } 207 | .alert-success { 208 | color: #155724; 209 | background: #d4edda; 210 | } 211 | .grocery-form h3 { 212 | color: var(--clr-orange-light); 213 | margin-bottom: 1.5rem; 214 | text-align: center; 215 | } 216 | .form-control { 217 | display: flex; 218 | justify-content: center; 219 | } 220 | .grocery { 221 | padding: 0.25rem; 222 | padding-left: 1rem; 223 | background: var(--clr-grey-10); 224 | border-top-left-radius: var(--radius); 225 | border-bottom-left-radius: var(--radius); 226 | border-color: transparent; 227 | font-size: 1rem; 228 | flex: 1 0 auto; 229 | color: var(--clr-grey-5); 230 | } 231 | .grocery::placeholder { 232 | font-family: var(--ff-secondary); 233 | color: var(--clr-grey-5); 234 | } 235 | .submit-btn { 236 | background: var(--clr-orange-light); 237 | border-color: transparent; 238 | flex: 0 0 5rem; 239 | display: grid; 240 | align-items: center; 241 | padding: 0.25rem; 242 | text-transform: capitalize; 243 | letter-spacing: 2px; 244 | border-top-right-radius: var(--radius); 245 | border-bottom-right-radius: var(--radius); 246 | cursor: pointer; 247 | content: var(--clr-primary-5); 248 | transition: var(--transition); 249 | font-size: 0.85rem; 250 | } 251 | .submit-btn:hover { 252 | background: var(--clr-orange-dark); 253 | color: var(--clr-white); 254 | } 255 | 256 | .grocery-container { 257 | margin-top: 2rem; 258 | } 259 | 260 | .grocery-item { 261 | display: flex; 262 | align-items: center; 263 | justify-content: space-between; 264 | margin-bottom: 0.5rem; 265 | transition: var(--transition); 266 | padding: 0.25rem 1rem; 267 | border-radius: var(--radius); 268 | text-transform: capitalize; 269 | font-size: 1rem; 270 | border-bottom: 1px solid var(--clr-grey-3); 271 | } 272 | .grocery-item:hover { 273 | color: var(--clr-grey-5); 274 | background: var(--clr-grey-3); 275 | } 276 | .grocery-item:hover .title { 277 | color: var(--clr-orange-dark); 278 | } 279 | .title { 280 | margin-bottom: 0; 281 | color: var(--clr-orange-light); 282 | letter-spacing: 2px; 283 | transition: var(--transition); 284 | } 285 | .edit-btn, 286 | .delete-btn { 287 | background: transparent; 288 | border-color: transparent; 289 | cursor: pointer; 290 | font-size: 0.7rem; 291 | margin: 0 0.15rem; 292 | transition: var(--transition); 293 | } 294 | .edit-btn { 295 | color: var(--clr-green-light); 296 | } 297 | .edit-btn:hover { 298 | color: var(--clr-green-dark); 299 | } 300 | .delete-btn { 301 | color: var(--clr-red-light); 302 | } 303 | .delete-btn:hover { 304 | color: var(--clr-red-dark); 305 | } 306 | .clear-btn { 307 | text-transform: capitalize; 308 | width: 10rem; 309 | height: 1.5rem; 310 | display: grid; 311 | align-items: center; 312 | background: transparent; 313 | border-color: transparent; 314 | color: var(--clr-red-light); 315 | margin: 0 auto; 316 | font-size: 0.85rem; 317 | letter-spacing: var(--spacing); 318 | cursor: pointer; 319 | transition: var(--transition); 320 | margin-top: 1.25rem; 321 | } 322 | .clear-btn:hover { 323 | color: var(--clr-red-dark); 324 | } -------------------------------------------------------------------------------- /src/lib-components/complexComponent/footer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './index.module.css' 3 | 4 | const Footer = () => { 5 | return
This is a footer component
6 | } 7 | 8 | export default Footer 9 | -------------------------------------------------------------------------------- /src/lib-components/complexComponent/footer/index.module.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | color: green; 3 | } 4 | -------------------------------------------------------------------------------- /src/lib-components/complexComponent/footer/utils.js: -------------------------------------------------------------------------------- 1 | export function generateRandom() { 2 | return (Math.random() + 1).toString(36) 3 | } 4 | -------------------------------------------------------------------------------- /src/lib-components/complexComponent/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './index.module.css' 3 | import Navigation from './navigation' 4 | import Footer from './footer' 5 | 6 | const ComplexComponent = () => { 7 | return ( 8 |
9 | 10 |
11 |
12 | ) 13 | } 14 | 15 | export default ComplexComponent 16 | -------------------------------------------------------------------------------- /src/lib-components/complexComponent/index.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background: gray; 3 | } 4 | -------------------------------------------------------------------------------- /src/lib-components/complexComponent/navigation/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './index.module.css' 3 | import { generateRandom } from '../footer/utils' 4 | 5 | const Navigation = () => { 6 | const str = generateRandom() 7 | return ( 8 |
9 | This is a navigation component. Here is a random string "{str}" 10 |
11 | ) 12 | } 13 | 14 | export default Navigation 15 | -------------------------------------------------------------------------------- /src/lib-components/complexComponent/navigation/index.module.css: -------------------------------------------------------------------------------- 1 | .navigation { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /src/lib-components/contact_us/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaPaperPlane } from "react-icons/fa"; 3 | import styles from "./index.module.css"; 4 | const ContactUs = (props) => { 5 | return ( 6 |
7 |

Brand name

8 |
9 |
10 |

Contact Us

11 |
16 | 23 | 24 | 31 | 32 | 38 | 39 | 50 |
51 |
52 |
53 | img 54 |
55 |
56 |
57 | ); 58 | }; 59 | 60 | export default ContactUs; 61 | -------------------------------------------------------------------------------- /src/lib-components/contact_us/index.module.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Oswald", sans-serif; 6 | } 7 | .section{ 8 | height: max-content; 9 | width: fit-content; 10 | display:flex; 11 | flex-wrap:nowrap; 12 | flex-direction: column; 13 | margin: 2em auto; 14 | padding: 2em 1em; 15 | border-radius: 0.5rem; 16 | background-color:#f4f3ee; 17 | box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%); 18 | } 19 | .contact{ 20 | display:flex; 21 | padding: 1em; 22 | } 23 | .contact_img { 24 | max-width: 440px; 25 | } 26 | .brand-header{ 27 | padding: 0.8em 1em; 28 | font-size: 22px; 29 | font-weight: 500; 30 | } 31 | .section-header{ 32 | padding-left: 0.25em; 33 | padding-bottom: 1em; 34 | font-size: 16px; 35 | font-weight: 400; 36 | } 37 | .brand-header, .section-header { 38 | text-align: left; 39 | color: #000; 40 | text-transform: uppercase; 41 | letter-spacing: 2px; 42 | } 43 | 44 | .contact-wrapper { 45 | padding: 0 0 1em 0; 46 | max-width: 430px; 47 | height: 380px; 48 | } 49 | 50 | /* Left contact page */ 51 | .form-horizontal { 52 | height: 100%; 53 | display: flex; 54 | flex-direction: column; 55 | justify-content: space-between; 56 | max-width: 400px; 57 | font-family: "Lato"; 58 | font-weight: 400; 59 | } 60 | 61 | #contact-form input { 62 | max-width: 400px; 63 | height: 40px; 64 | padding: 0.7em; 65 | letter-spacing: 1px; 66 | border-radius: 0.5rem; 67 | background: rgba(255, 255, 255, 0.55); 68 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 69 | backdrop-filter: blur(12px); 70 | -webkit-backdrop-filter: blur(15px); 71 | border: 1px solid rgba(255, 255, 255, 0.03); 72 | } 73 | #contact-form input:hover, 74 | textarea:hover { 75 | border: 1.5px solid #1495E3; 76 | } 77 | #contact-form input:focus-visible, 78 | textarea:focus-visible { 79 | outline: 1.5px solid #1495E3; 80 | } 81 | #contact-form textarea { 82 | padding: 0.7em; 83 | border-radius: 0.5rem; 84 | border: 1.5px solid #fff; 85 | background: rgba(255, 255, 255, 0.55); 86 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 87 | backdrop-filter: blur(12px); 88 | -webkit-backdrop-filter: blur(15px); 89 | border: 1px solid rgba(255, 255, 255, 0.03); 90 | } 91 | 92 | .send-button { 93 | height: 34px; 94 | width: 317px; 95 | padding: 7px; 96 | border-radius: 0.5rem; 97 | border: 1.5px solid #fff; 98 | overflow: hidden; 99 | transition: all 0.2s ease-in-out; 100 | background: rgb(5, 48, 149); 101 | background: radial-gradient( 102 | circle, 103 | rgba(5, 48, 149, 1) 35%, 104 | rgba(23, 87, 223, 1) 100% 105 | ); 106 | } 107 | 108 | .alt-send-button { 109 | width: 317px; 110 | height: 34px; 111 | transition: all 0.2s ease-in-out; 112 | } 113 | 114 | .send-text { 115 | display: block; 116 | margin-top: 10px; 117 | color: #fff; 118 | font: 700 12px "Lato", sans-serif; 119 | letter-spacing: 2px; 120 | } 121 | 122 | .alt-send-button:hover { 123 | transform: translate3d(0px, -25px, 0px); 124 | } 125 | 126 | hr { 127 | border-color: rgba(255, 255, 255, 0.6); 128 | } 129 | 130 | /* Begin Media Queries*/ 131 | @media screen and (max-width: 850px) { 132 | .contact-wrapper { 133 | display: flex; 134 | flex-direction: column; 135 | } 136 | } 137 | 138 | @media screen and (max-width: 569px) { 139 | } 140 | 141 | @media screen and (max-width: 410px) { 142 | .send-button { 143 | width: 99%; 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /src/lib-components/login/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaFacebookF, FaLinkedinIn } from 'react-icons/fa' 3 | import { BsGoogle } from 'react-icons/bs' 4 | import styles from './index.module.css' 5 | 6 | const Login = () => { 7 | return ( 8 |
9 |
10 |
13 |
14 |

Sign in

15 | 26 |

Or use your account

27 | 28 | 29 | 30 | Forgot your password? 31 | 32 | 33 |
34 |
35 |
36 |
37 |
40 |

Don't have an account?

41 |

42 | Register and start your journey with us 43 |

44 | 45 |
46 |
47 |
48 |
49 |
50 | ) 51 | } 52 | 53 | export default Login 54 | -------------------------------------------------------------------------------- /src/lib-components/login/index.module.css: -------------------------------------------------------------------------------- 1 | .login { 2 | background: #f6f5f7; 3 | display: grid; 4 | place-items: center; 5 | height: 100vh; 6 | } 7 | .login_title { 8 | position: relative; 9 | top: -30px; 10 | font-weight: bold; 11 | margin: 0; 12 | } 13 | .login_desc { 14 | font-size: 15px; 15 | font-weight: 400; 16 | line-height: 20px; 17 | letter-spacing: 0.5px; 18 | margin: 20px 0 30px; 19 | } 20 | .forgot_pass { 21 | color: #333; 22 | font-size: 14px; 23 | text-decoration: none; 24 | margin: 15px 0; 25 | } 26 | .login_btn { 27 | border-radius: 20px; 28 | border: 1px solid #7853ce; 29 | background-color: #735cdd; 30 | color: #ffffff; 31 | font-size: 12px; 32 | font-weight: bold; 33 | padding: 12px 45px; 34 | letter-spacing: 1px; 35 | text-transform: uppercase; 36 | } 37 | .register_btn { 38 | border-radius: 20px; 39 | border: 1px solid #fff; 40 | background-color: transparent; 41 | color: #ffffff; 42 | font-size: 12px; 43 | font-weight: bold; 44 | padding: 12px 45px; 45 | letter-spacing: 1px; 46 | text-transform: uppercase; 47 | } 48 | .login_btn:active, 49 | .register_btn:active { 50 | transform: scale(0.95); 51 | } 52 | .login_btn:focus, 53 | .register_btn:focus { 54 | outline: none; 55 | } 56 | .login_form { 57 | background-color: #ffffff; 58 | display: flex; 59 | align-items: center; 60 | justify-content: center; 61 | flex-direction: column; 62 | padding: 0 50px; 63 | height: 100%; 64 | text-align: center; 65 | } 66 | .login_form > input { 67 | background-color: #eee; 68 | border: none; 69 | padding: 12px 15px; 70 | margin: 10px 0; 71 | width: 100%; 72 | border-radius: 5px; 73 | } 74 | .container { 75 | background-color: #fff; 76 | border-radius: 10px; 77 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 78 | position: relative; 79 | overflow: hidden; 80 | width: 768px; 81 | max-width: 100%; 82 | min-height: 600px; 83 | } 84 | .form-container { 85 | position: absolute; 86 | top: 0; 87 | height: 100%; 88 | transition: all 0.6s ease-in-out; 89 | } 90 | .sign-in-container { 91 | left: 0; 92 | width: 50%; 93 | z-index: 2; 94 | } 95 | .overlay-container { 96 | position: absolute; 97 | top: 0; 98 | left: 50%; 99 | width: 50%; 100 | height: 100%; 101 | overflow: hidden; 102 | transition: transform 0.6s ease-in-out; 103 | z-index: 100; 104 | } 105 | .overlay { 106 | background: #834ce6; 107 | background-color: #3787f6; 108 | background-image: linear-gradient(315deg, #733fed 0%, #3787f6 74%); 109 | background-repeat: no-repeat; 110 | background-size: cover; 111 | background-position: 0 0; 112 | color: #ffffff; 113 | position: relative; 114 | left: -100%; 115 | height: 100%; 116 | width: 200%; 117 | } 118 | .overlay-panel { 119 | position: absolute; 120 | display: flex; 121 | align-items: center; 122 | justify-content: center; 123 | flex-direction: column; 124 | padding: 0 40px; 125 | text-align: center; 126 | top: 0; 127 | height: 100%; 128 | width: 50%; 129 | } 130 | .overlay-right { 131 | right: 0; 132 | } 133 | .social-container { 134 | margin: 0; 135 | } 136 | .social-container a { 137 | border: 1px solid #dddddd; 138 | border-radius: 50%; 139 | display: inline-flex; 140 | justify-content: center; 141 | align-items: center; 142 | margin: 0 5px; 143 | height: 40px; 144 | width: 40px; 145 | } 146 | -------------------------------------------------------------------------------- /src/lib-components/portfolio_home/Reviews/Reviews.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | // import img01 from "./Images/testimonial1.png" 4 | // import img02 from "./Images/testimonial2.png" 5 | 6 | 7 | const Reviews = () => { 8 | return ( 9 | 10 |
11 | 12 | 13 |
14 | 15 |
16 |

We Are Loved By Users
And Clients Worldwide

17 |
18 | 19 | 20 |
21 |
22 |
23 |

24 | One of the best additions to our feedback loop has been the company-wide adoption of Fellow. 25 |

26 |
27 | 28 |
29 | 30 | 31 |
32 |
33 |

34 | It provides an amazing platform for constant conversations and direct feedback between managers and direct reports. 35 |

36 |
37 | 38 |
39 | 40 |
41 |
42 |
43 | 44 | 45 | 46 | ) 47 | } 48 | 49 | export default Reviews 50 | 51 | const Container =styled.div` 52 | position: absolute; 53 | border:solid 1px red; 54 | width: 1640px; 55 | height: 683px; 56 | 57 | margin-top: 3863px; 58 | background:#6FC2C5; 59 | display:flex; 60 | justify-content: center; 61 | align-items:center; 62 | .box{ 63 | 64 | width: 1109px; 65 | height: 583px; 66 | h1{ 67 | font-family: Poppins; 68 | font-size: 48px; 69 | font-style: normal; 70 | font-weight: 600; 71 | line-height: 60px; 72 | letter-spacing: 0px; 73 | text-align: center; 74 | color:white; 75 | } 76 | } 77 | .box1{ 78 | display:grid; 79 | grid-template-columns:repeat(2,1fr); 80 | 81 | } 82 | .review-sec{ 83 | display:flex; 84 | justify-content:center 85 | } 86 | .feedback{ 87 | background:white; 88 | border-radius:30px 0 30px 30px; 89 | margin-left:50px; 90 | width: 529px; 91 | height: 351px; 92 | 93 | h3{ 94 | margin:50px 30px; 95 | font-family: Poppins; 96 | font-size: 24px; 97 | font-style: normal; 98 | font-weight: 400; 99 | line-height: 36px; 100 | letter-spacing: 0px; 101 | text-align: left; 102 | 103 | height:150px; 104 | 105 | } 106 | } 107 | .test{ 108 | margin-left:50px; 109 | 110 | } 111 | `; 112 | -------------------------------------------------------------------------------- /src/lib-components/portfolio_home/content1/Card1.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components'; 3 | // import img2 from "./images/design2.png" 4 | // import img1 from "./images/design1.png" 5 | 6 | export const Card1 = () => { 7 | return ( 8 | 9 |
10 | 11 |

Recent Projects

12 | 15 | 16 |
17 |
18 |
19 | 20 |

UI Portofolio

21 |
22 | 23 |

View study case

24 |

Live Preview

25 |
26 | 27 |
28 |
29 | 30 |

UI Portofolio

31 |
32 |

View study case

33 |

Live Preview

34 |
35 | 36 | 37 |
38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | ) 46 | } 47 | 48 | const Container = styled.div` 49 | 50 | font-family:Poppins; 51 | position: absolute; 52 | width: 1110px; 53 | 54 | height: 584px; 55 | margin-left: 165px; 56 | margin-top: 1534px; 57 | 58 | button { 59 | margin-right: 20px; 60 | margin-top:10px; 61 | width: 151px; 62 | height: 55px; 63 | border-radius: 10px; 64 | border: none; 65 | font-size: 16px; 66 | font-style: normal; 67 | font-weight: 700; 68 | line-height: 24px; 69 | letter-spacing: 0px; 70 | text-align: center; 71 | color: white; 72 | } 73 | .btn-1 { 74 | background: #eebf63; 75 | font-family: poppins; 76 | } 77 | 78 | div{ 79 | display:flex; 80 | 81 | h3{ 82 | margin-right:70px; 83 | } 84 | } 85 | .bar{ 86 | width: 1110px; 87 | 88 | 89 | 90 | display:flex; 91 | justify-content:space-between; 92 | } 93 | .cont{ 94 | display:flex; 95 | justify-content:space-between; 96 | width: 1110px; 97 | } 98 | .sub-cont{ 99 | display:block; 100 | text-align:start; 101 | } 102 | .far{ 103 | margin-right:10px; 104 | } 105 | .fas{ 106 | margin-right:10px; 107 | } 108 | `; -------------------------------------------------------------------------------- /src/lib-components/portfolio_home/content1/Card2.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components'; 3 | 4 | 5 | // import img02 from "./images/img02.png" 6 | // import img03 from "./images/img03.png" 7 | // import img04 from "./images/img04.png" 8 | 9 | export const Card2 = () => { 10 | return ( 11 | 12 |
13 |

Why Hire Me?

14 |
15 | 16 |
17 |
18 | 19 |

Communicative

20 |
Amet minim mollit non
deserunt ullamco est sit
aliqua dolor do amet sint.
21 |
22 |
23 | 24 |

Professional

25 |
Amet minim mollit non
deserunt ullamco est sit
aliqua dolor do amet sint.
26 | 27 |
28 |
29 | 30 |

Collaborative​

31 |
Amet minim mollit non
deserunt ullamco est sit
aliqua dolor do amet sint.
32 | 33 |
34 |
35 | 36 |

37 | Client’s Favourite 38 |

39 |
Amet minim mollit non
deserunt ullamco est sit
aliqua dolor do amet sint.
40 | 41 |
42 | 43 |
44 | 45 | 46 | ) 47 | } 48 | const Container=styled.div` 49 | 50 | position: absolute; 51 | width: 1110px; 52 | height: 643px; 53 | margin-left: 165px; 54 | margin-top: 2598px; 55 | 56 | 57 | text-align:left; 58 | font-family:Poppins; 59 | 60 | h1{ 61 | font-size:30px; 62 | height: 62px; 63 | width: 329px; 64 | 65 | } 66 | .header{ 67 | text-aligns:center; 68 | padding-left:430px; 69 | 70 | } 71 | .Fluid{ 72 | diplay:grid; 73 | grid-template-columns:repeat(4,1fr); 74 | display:flex; 75 | justify-content:space-between; 76 | 77 | } 78 | h3{ 79 | font-sizze:24px; 80 | 81 | } 82 | h5{ 83 | font-size:18px; 84 | line-height:30px; 85 | color: #828282; 86 | 87 | } 88 | `; 89 | 90 | 91 | -------------------------------------------------------------------------------- /src/lib-components/portfolio_home/content1/Card3.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from "styled-components" 3 | // import logo from "./images/Logos.png" 4 | export const Card3 = () => { 5 | return ( 6 | 7 |
8 |

9 | Interested working 10 | with me? 11 |

12 |
13 |
14 | 17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 | 26 | ) 27 | } 28 | 29 | const Container=styled.div` 30 | position: absolute; 31 | width: 1110px; 32 | height: 313px; 33 | margin-left: 165px; 34 | margin-top: 3283px; 35 | 36 | background:#EEBF63; 37 | display:flex; 38 | border-radius:25px; 39 | justify-content:center; 40 | align-items:center; 41 | display:grid; 42 | grid-template-columns:repeat(3,1fr); 43 | 44 | .box{ 45 | 46 | align-items:center; 47 | 48 | h1{ 49 | margin-left:80px; 50 | margin-top:60px; 51 | font-family: Poppins; 52 | font-size: 48px; 53 | font-style: normal; 54 | font-weight: 600; 55 | line-height: 62px; 56 | letter-spacing: 0em; 57 | text-align:start; 58 | color:white; 59 | 60 | } 61 | button { 62 | margin-right: 20px; 63 | 64 | width: 211px; 65 | height: 70px; 66 | border-radius: 10px; 67 | border: none; 68 | font-size: 24px; 69 | font-style: normal; 70 | font-weight: 600; 71 | line-height: 24px; 72 | letter-spacing: 0px; 73 | text-align: center; 74 | color: white; 75 | } 76 | 77 | .btn-1 { 78 | 79 | background: #ffffff; 80 | color:black; 81 | font-family: poppins; 82 | 83 | } 84 | .btn-2 { 85 | width:273px; 86 | background-color: #EEBF63; 87 | color: white; 88 | border: solid #ffffff 3px; 89 | } 90 | 91 | .fas{ 92 | padding:0 10px; 93 | } 94 | } 95 | 96 | .logos{ 97 | position: absolute; 98 | width: 1013.98px; 99 | height: 72.98px; 100 | margin-left: 13px; 101 | margin-top: 614px; 102 | } 103 | 104 | 105 | 106 | `; -------------------------------------------------------------------------------- /src/lib-components/portfolio_home/content1/Crad.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from "styled-components" 3 | // import pic from "./images/profile-pic02.png" 4 | // import rating from "./images/Rating.png" 5 | export const Card = () => { 6 | return ( 7 | 8 | 9 |
10 | sx 11 |
12 |
13 |
14 |
15 | 120 +
16 | Completed Projects 17 |
18 |
19 | A+ 20 | 21 |
Positive Reviews 22 |
23 | 24 |
25 |
26 |

Glad to Help You! 27 | 28 |

29 | 30 |
31 |
32 |
33 | As a full-service digital designer, I work closely with my clients to define, design and develop transformative user experiences across all platforms and brand’s touchpoints. 34 |
35 |
36 |
37 | 38 | 39 | 40 | 41 | ) 42 | } 43 | 44 | 45 | const Container=styled.div` 46 | position: absolute; 47 | width: 1110px; 48 | height: 584px; 49 | margin-left:160px; 50 | margin-top:850px; 51 | 52 | 53 | font-family:Poppins; 54 | 55 | background: #E9E9E9; 56 | border-radius: 45px; 57 | display:flex; 58 | justify-content:center; 59 | align-items:center; 60 | 61 | .item{ 62 | 63 | } 64 | .item1{ 65 | 66 | grid-column-start:2; 67 | grid-column-end:4; 68 | grid-template-rows:repeat(3,1fr); 69 | } 70 | 71 | .content{ 72 | 73 | text-align:start; 74 | padding-left:30px; 75 | 76 | h3{ 77 | font-size: 40px; 78 | color:black; 79 | font-weight:600; 80 | 81 | } 82 | span{ 83 | color:#8ED2A9; 84 | } 85 | 86 | h6{ 87 | line-height:50px; 88 | font-size:20px; 89 | } 90 | } 91 | 92 | .con1{ 93 | grid-template-columns:repeat(2,1fr); 94 | 95 | display:flex; 96 | align-items:center; 97 | justify-content:space-around; 98 | } 99 | .con2{ 100 | height:60px; 101 | } 102 | .box{ 103 | 104 | height:150px; 105 | width:270px; 106 | 107 | color:#676767; 108 | 109 | img{ 110 | 111 | } 112 | } 113 | 114 | h7{ 115 | font-size:62px; 116 | font-weight:600; 117 | color:black; 118 | } 119 | h9{ margin-top:50px; 120 | font-size:42px; 121 | font-weight:600; 122 | color:black; 123 | 124 | } 125 | .box1{ 126 | padding-top:50px; 127 | } 128 | .rate{ 129 | 130 | } 131 | } 132 | `; 133 | const Cont=styled.div` 134 | 135 | width: 1000px; 136 | height: 484px; 137 | display:grid; 138 | grid-template-columns:repeat(3,1fr); 139 | 140 | `; 141 | -------------------------------------------------------------------------------- /src/lib-components/portfolio_home/footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from "styled-components" 3 | 4 | export const Footer = () => { 5 | return ( 6 | 7 |
8 |

Let's Connect

9 |
10 |
11 | 12 | 13 | 14 | 15 | < a href="/"> 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 27 |
28 | 29 | 30 | ) 31 | } 32 | const Container=styled.div` 33 | width: 1109px; 34 | height: 46px; 35 | margin-left: 165px; 36 | margin-top: 4605px; 37 | display:flex; 38 | justify-content:space-between; 39 | h1{ 40 | font-family: Poppins; 41 | font-size: 36px; 42 | font-style: normal; 43 | font-weight: 500; 44 | line-height: 46px; 45 | letter-spacing: 0em; 46 | text-align: left; 47 | 48 | } 49 | .fas { 50 | font-size:30px; 51 | margin-left:30px; 52 | margin-top:30px; 53 | color:#676767; 54 | 55 | } 56 | .fab{ 57 | margin-top:20px; 58 | font-size:30px; 59 | margin-left:30px; 60 | color:#676767; 61 | } 62 | .bt{ 63 | margin-top:5px; 64 | border: none; 65 | background:transparent; 66 | font-wight:900; 67 | width: 302px; 68 | height: 36px; 69 | font-family:Poppins; 70 | font-size:20px; 71 | i{ 72 | font-size:20px; 73 | color: black; 74 | } 75 | } 76 | 77 | `; -------------------------------------------------------------------------------- /src/lib-components/portfolio_home/header/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from "styled-components" 3 | // import line from "./images/line.png" 4 | // import pic from "./images/profile-pic01.png" 5 | // import bullets from "./images/bullets.jpg" 6 | 7 | export const Header = (props) => { 8 | return ( 9 | 10 |
11 | 12 |
    13 |
  • 14 |

    Hey!

    15 |
    • 16 |
  • 17 |

    18 | I’m Rey.
    19 | an UI/UX Designer. 20 |

    21 |
    • 22 |
  • 23 | line 24 |
    • 25 |
  • 26 |
    27 | 28 | UX Designer based in Jakarta, Indonesia. 29 |
    30 | I am designing with a minimal and beautiful design 31 | in mind. 32 |
    33 |
    • 34 |
  • 35 |

    Follow me

    36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
    • 48 |
  • 49 | 50 | 51 |
    • 52 |
53 | 54 | 55 |
56 | picsad 57 | 58 |
59 | 60 |
61 | 62 | ) 63 | } 64 | 65 | 66 | 67 | const Container = styled.div` 68 | width: 100%; 69 | position: absolute; 70 | width: 1440px; 71 | height: 717px; 72 | margin-left: 0px; 73 | margin-top: 0px; 74 | font-family: poppins; 75 | display: flex; 76 | div { 77 | display: flex; 78 | margin-left: 150px; 79 | align-items: center; 80 | } 81 | ul { 82 | } 83 | li { 84 | display: flex; 85 | text-align: start; 86 | list-style: none; 87 | 88 | 89 | div { 90 | display: flex; 91 | 92 | } 93 | img { 94 | padding-left: 70px; 95 | } 96 | } 97 | h3 { 98 | 99 | font-family: Poppins; 100 | font-size: 24px; 101 | font-style: normal; 102 | font-weight: 500; 103 | line-height: 36px; 104 | letter-spacing: 0em; 105 | text-align: left; 106 | color: #828282; 107 | } 108 | h1 { 109 | font-family: Poppins; 110 | font-size: 48px; 111 | font-style: normal; 112 | font-weight: 600; 113 | line-height: 62px; 114 | letter-spacing: 0em; 115 | text-align: left; 116 | } 117 | span { 118 | color: #eebf63; 119 | } 120 | h5 { 121 | 122 | font-family: Poppins; 123 | font-size: 18px; 124 | font-style: normal; 125 | font-weight: 400; 126 | line-height: 30px; 127 | letter-spacing: 0em; 128 | text-align: start; 129 | 130 | colr:#676767; 131 | } 132 | button { 133 | margin-right: 20px; 134 | 135 | width: 184px; 136 | height: 55px; 137 | 138 | border: none; 139 | font-size: 16px; 140 | font-style: normal; 141 | font-weight: 700; 142 | line-height: 24px; 143 | letter-spacing: 0px; 144 | text-align: center; 145 | color: white; 146 | } 147 | 148 | .btn-1 { 149 | background: #eebf63; 150 | font-family: poppins; 151 | } 152 | .btn-2 { 153 | background-color: white; 154 | color: black; 155 | height: 55px; 156 | width: 184px; 157 | left: 346px; 158 | 159 | 160 | border: solid #eebf63 3px; 161 | } 162 | .back { 163 | padding-top: 400px; 164 | padding-right: 400px; 165 | position: absolute; 166 | z-index: -30; 167 | } 168 | .fas{ 169 | margin-right:10px; 170 | } 171 | .fa-arrow-down{ 172 | color:black; 173 | } 174 | 175 | h4{ 176 | font-size:18px; 177 | color:#676767; 178 | } 179 | 180 | `; 181 | 182 | const Icons=styled.div` 183 | display:flex; 184 | 185 | 186 | 187 | 188 | i{ 189 | font-size:32px; 190 | margin-right:30px; 191 | color:#676767; 192 | 193 | } 194 | `; 195 | -------------------------------------------------------------------------------- /src/lib-components/portfolio_home/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from "react" 4 | import {Navbar} from "./navbar/Navbar"; 5 | import {Header} from "./header/Header" 6 | import {Card} from "./content1/Crad" 7 | import {Card1} from "./content1/Card1" 8 | import {Card2} from "./content1/Card2"; 9 | import { Card3 } from './content1/Card3'; 10 | import Reviews from './Reviews/Reviews'; 11 | import {Footer} from "./footer/Footer" 12 | function PortfolioHome(props) { 13 | return ( 14 |
15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | ); 25 | } 26 | 27 | export default PortfolioHome; -------------------------------------------------------------------------------- /src/lib-components/portfolio_home/navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import React from "react"; 3 | 4 | 5 | 6 | const Container = styled.div` 7 | width: 100%; 8 | height: 100%; 9 | align-items: center; 10 | 11 | nav { 12 | display: flex; 13 | justify-content: space-around; 14 | } 15 | 16 | h5 { 17 | 18 | font-family: Poppins; 19 | font-size: 22px; 20 | font-style: normal; 21 | font-weight: bolder; 22 | line-height: 33px; 23 | letter-spacing: 0px; 24 | text-align: left; 25 | } 26 | ul { 27 | display: flex; 28 | margin-top:30px; 29 | } 30 | li { 31 | margin: 0px 30px; 32 | list-style: none; 33 | font-family: Poppins; 34 | } 35 | a { 36 | text-decoration: none; 37 | width: 66px; 38 | height: 24px; 39 | left: 274px; 40 | top: 0px; 41 | 42 | font-family: Poppins; 43 | font-style: normal; 44 | font-weight: 900; 45 | font-size: 16px; 46 | line-height: 24px; 47 | 48 | 49 | text-align: center; 50 | 51 | color: #151517; 52 | color: black; 53 | } 54 | `; 55 | 56 | export const Navbar = () => { 57 | return ( 58 | 59 | 60 | 81 | 82 | 83 | ); 84 | }; 85 | 86 | -------------------------------------------------------------------------------- /src/lib-components/product_card/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './index.module.css' 3 | 4 | const product = (props) => { 5 | return ( 6 |
7 |
8 | {/* Image here */} 9 | Shoe-img 10 | 11 | {/* Card details here */} 12 |
13 |

{props.title}

14 | {props.price} 15 |

{props.des}

16 | 17 | Buy Now 18 | 19 |
20 |
21 |
22 | ) 23 | } 24 | 25 | export default product 26 | -------------------------------------------------------------------------------- /src/lib-components/product_card/index.module.css: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 3 | /*===== VARIABLES CSS =====*/ 4 | :root { 5 | /*===== Colores =====*/ 6 | --first-color: #f2a20c; 7 | --white-color: #e9eaec; 8 | --dark-color: #272d40; 9 | --dark-color-lighten: #f2f5ff; 10 | /*===== Fuente y tipografia =====*/ 11 | --body-font: 'Poppins', sans-serif; 12 | --h1-font-size: 1.5rem; 13 | --h2-font-size: 1.25rem; 14 | --normal-font-size: 1rem; 15 | --small-font-size: 0.875rem; 16 | } 17 | 18 | /*===== BASE =====*/ 19 | *, 20 | ::before, 21 | ::after { 22 | box-sizing: border-box; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | padding: 0; 28 | font-family: var(--body-font); 29 | font-size: var(--normal-font-size); 30 | } 31 | 32 | h1, 33 | p { 34 | margin: 0; 35 | } 36 | 37 | a { 38 | text-decoration: none; 39 | } 40 | 41 | img { 42 | max-width: 100%; 43 | height: auto; 44 | } 45 | 46 | /*===== CARD =====*/ 47 | .container { 48 | height: 100vh; 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | background-color: var(--dark-color-lighten); 53 | } 54 | 55 | .card { 56 | width: 320px; 57 | height: 400px; 58 | background-color: var(--dark-color); 59 | border-radius: 1rem; 60 | padding: 4rem 2rem 0; 61 | color: var(--white-color); 62 | overflow-y: hidden; 63 | } 64 | 65 | .card__img { 66 | position: absolute; 67 | width: 260px; 68 | filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, 0.4)); 69 | } 70 | 71 | .card__data { 72 | transform: translateY(13.2rem); 73 | text-align: center; 74 | } 75 | 76 | .card__title { 77 | font-size: var(--h1-font-size); 78 | color: var(--first-color); 79 | margin-bottom: 0.5rem; 80 | } 81 | 82 | .card__preci { 83 | display: inline-block; 84 | font-size: var(--h2-font-size); 85 | font-weight: 500; 86 | margin-bottom: 1.25rem; 87 | } 88 | 89 | .card__description { 90 | font-size: var(--small-font-size); 91 | text-align: initial; 92 | margin-bottom: 1.25rem; 93 | opacity: 0; 94 | } 95 | 96 | /* Buy now */ 97 | .card__button { 98 | display: block; 99 | width: max-content; 100 | padding: 1.125rem 2rem; 101 | background-color: var(--first-color); 102 | color: var(--white-color); 103 | border-radius: 0.5rem; 104 | font-weight: 600; 105 | transition: 0.2s; 106 | opacity: 0; 107 | } 108 | 109 | .card__button:hover { 110 | box-shadow: 0 18px 40px -12px rgba(242, 162, 12, 0.35); 111 | } 112 | 113 | .card__img, 114 | .card__data, 115 | .card__title, 116 | .card__preci, 117 | .card__description { 118 | transition: 0.5s; 119 | } 120 | 121 | /* Hover card effect */ 122 | .card:hover .card__img { 123 | transform: translate(-1.5rem, -9.5rem) rotate(-20deg); 124 | } 125 | 126 | .card:hover .card__data { 127 | transform: translateY(4.8rem); 128 | } 129 | 130 | .card:hover .card__title { 131 | transform: translateX(-2.3rem); 132 | margin-bottom: 0; 133 | } 134 | 135 | .card:hover .card__preci { 136 | transform: translateX(-6.8rem); 137 | } 138 | 139 | .card:hover .card__description, 140 | .card:hover .card__button { 141 | transition-delay: 0.2s; 142 | opacity: 1; 143 | } 144 | -------------------------------------------------------------------------------- /src/lib-components/progress_bar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './index.module.css' 3 | 4 | const progress_bar = (props) => { 5 | return ( 6 |
7 |
14 | {`${props.progress}%`} 15 |
16 |
17 | ) 18 | } 19 | 20 | export default progress_bar 21 | -------------------------------------------------------------------------------- /src/lib-components/progress_bar/index.module.css: -------------------------------------------------------------------------------- 1 | .parent { 2 | width: 50%; 3 | background-color: whitesmoke; 4 | border-radius: 40px; 5 | margin: 3%; 6 | } 7 | 8 | .child { 9 | height: 100%; 10 | border-radius: 40px; 11 | text-align: 'right'; 12 | } 13 | 14 | .progress_text { 15 | padding: 10px; 16 | color: 'black'; 17 | font-weight: 900; 18 | text-align: center; 19 | justify-content: center; 20 | } 21 | -------------------------------------------------------------------------------- /src/lib-components/progress_bar/screenshot/progress_bar.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dezenix/frontend-reactjs/571abfc25e16cae3f5845cfbd7a82c78f8a3bb9b/src/lib-components/progress_bar/screenshot/progress_bar.jpeg -------------------------------------------------------------------------------- /src/lib-components/register/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaFacebookF, FaLinkedinIn } from 'react-icons/fa' 3 | import { BsGoogle } from 'react-icons/bs' 4 | import styles from './index.module.css' 5 | 6 | const Register = () => { 7 | return ( 8 |
9 |
10 |
13 |
14 |

Register

15 | 26 | 27 | 28 | 29 | 30 |
31 |
32 |
33 |
34 |
37 |

38 | Already have an account? 39 |

40 |

41 | To keep connected with us please login with your personal info 42 |

43 | 44 |
45 |
46 |
47 |
48 |
49 | ) 50 | } 51 | 52 | export default Register 53 | -------------------------------------------------------------------------------- /src/lib-components/register/index.module.css: -------------------------------------------------------------------------------- 1 | .register { 2 | background: #f6f5f7; 3 | display: grid; 4 | place-items: center; 5 | height: 100vh; 6 | } 7 | .register_title { 8 | position: relative; 9 | top: -30px; 10 | font-weight: bold; 11 | margin: 0; 12 | margin-bottom: 4rem; 13 | } 14 | .register_desc { 15 | font-size: 15px; 16 | font-weight: 400; 17 | line-height: 20px; 18 | letter-spacing: 0.5px; 19 | margin: 20px 0 30px; 20 | } 21 | .register_btn { 22 | border-radius: 20px; 23 | border: 1px solid #7853ce; 24 | background-color: #735cdd; 25 | color: #ffffff; 26 | font-size: 12px; 27 | font-weight: bold; 28 | padding: 12px 45px; 29 | letter-spacing: 1px; 30 | text-transform: uppercase; 31 | margin-top: 4rem; 32 | } 33 | .login_btn { 34 | border-radius: 20px; 35 | border: 1px solid #fff; 36 | background-color: transparent; 37 | color: #ffffff; 38 | font-size: 12px; 39 | font-weight: bold; 40 | padding: 12px 45px; 41 | letter-spacing: 1px; 42 | text-transform: uppercase; 43 | } 44 | .login_btn:active, 45 | .register_btn:active { 46 | transform: scale(0.95); 47 | } 48 | .login_btn:focus, 49 | .register_btn:focus { 50 | outline: none; 51 | } 52 | .register_form { 53 | background-color: #ffffff; 54 | display: flex; 55 | align-items: center; 56 | justify-content: center; 57 | flex-direction: column; 58 | padding: 0 50px; 59 | height: 100%; 60 | text-align: center; 61 | } 62 | .register_form > input { 63 | background-color: #eee; 64 | border: none; 65 | padding: 12px 15px; 66 | margin: 10px 0; 67 | width: 100%; 68 | border-radius: 5px; 69 | } 70 | .container { 71 | background-color: #fff; 72 | border-radius: 10px; 73 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 74 | position: relative; 75 | overflow: hidden; 76 | width: 768px; 77 | max-width: 100%; 78 | min-height: 600px; 79 | } 80 | .form-container { 81 | position: absolute; 82 | top: 0; 83 | height: 100%; 84 | transition: all 0.6s ease-in-out; 85 | } 86 | .register-container { 87 | right: 0; 88 | width: 50%; 89 | z-index: 2; 90 | } 91 | .reg-overlay-container { 92 | position: absolute; 93 | top: 0; 94 | right: 50%; 95 | width: 50%; 96 | height: 100%; 97 | overflow: hidden; 98 | transition: transform 0.6s ease-in-out; 99 | z-index: 100; 100 | } 101 | .overlay { 102 | background: #834ce6; 103 | background-color: #3787f6; 104 | background-image: linear-gradient(315deg, #733fed 0%, #3787f6 74%); 105 | background-repeat: no-repeat; 106 | background-size: cover; 107 | background-position: 0 0; 108 | color: #ffffff; 109 | position: relative; 110 | left: -100%; 111 | height: 100%; 112 | width: 200%; 113 | } 114 | .overlay-panel { 115 | position: absolute; 116 | display: flex; 117 | align-items: center; 118 | justify-content: center; 119 | flex-direction: column; 120 | padding: 0 40px; 121 | text-align: center; 122 | top: 0; 123 | height: 100%; 124 | width: 50%; 125 | } 126 | .overlay-right { 127 | right: 0; 128 | } 129 | .social-container { 130 | margin: 0; 131 | } 132 | .social-container a { 133 | border: 1px solid #dddddd; 134 | border-radius: 50%; 135 | display: inline-flex; 136 | justify-content: center; 137 | align-items: center; 138 | margin: 0 5px; 139 | height: 40px; 140 | width: 40px; 141 | } 142 | -------------------------------------------------------------------------------- /src/lib-components/team_members/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {FaLinkedin, FaTwitterSquare, FaGithubSquare} from "react-icons/fa" 3 | import styles from "./index.module.css" 4 | 5 | 6 | const team_members = (props) => { 7 | return ( 8 |
9 | {props.members.map((member) => { 10 | return ( 11 |
13 | 14 |
15 |
16 | 17 |
18 | 19 |
20 | {member.name} 21 | {member.profession} 22 |
23 | 24 | 35 |
36 |
37 | ) 38 | })} 39 |
40 | ); 41 | }; 42 | 43 | export default team_members 44 | -------------------------------------------------------------------------------- /src/lib-components/team_members/index.module.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #9d174d; 3 | } 4 | section { 5 | min-height: 100vh; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | flex-wrap: wrap; 10 | background-color: rgb(188, 188, 188); 11 | } 12 | 13 | .card { 14 | background: #fff; 15 | border-radius: 20px; 16 | position: relative; 17 | margin: 20px; 18 | overflow: hidden; 19 | cursor: pointer; 20 | width: 260px; 21 | height: 275px; 22 | transition: all 0.5s; 23 | } 24 | .card::before { 25 | content: ""; 26 | position: absolute; 27 | height: 45%; 28 | width: 100%; 29 | background-color: var(--primary); 30 | border-radius: 20px 20px 0 0; 31 | } 32 | .card .card__details { 33 | padding: 30px 30px 20px; 34 | display: flex; 35 | flex-direction: column; 36 | align-items: center; 37 | position: relative; 38 | z-index: 10; 39 | } 40 | section .card .image { 41 | height: 150px; 42 | width: 150px; 43 | border-radius: 50%; 44 | padding: 3px; 45 | background-color: var(--primary); 46 | } 47 | section .card img { 48 | height: 100%; 49 | width: 100%; 50 | object-fit: cover; 51 | border-radius: 50%; 52 | border: 3px solid #fff; 53 | } 54 | 55 | .card .media__icons { 56 | display: none; 57 | animation: fade 1s; 58 | transition: all 0.5s; 59 | } 60 | @keyframes fade { 61 | 0% { 62 | opacity: 0; 63 | } 100% { 64 | opacity: 1; 65 | } 66 | } 67 | 68 | .card:hover .media__icons{ 69 | position: absolute; 70 | bottom: -30px; 71 | display: flex; 72 | width: 70%; 73 | justify-content: space-between; 74 | transition: all 0.5s; 75 | } 76 | .card:hover { 77 | height: 310px; 78 | transition: all 0.5s; 79 | } 80 | 81 | .card .details { 82 | display: flex; 83 | flex-direction: column; 84 | align-items: center; 85 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 86 | } 87 | .name { 88 | font-size: 25px; 89 | font-weight: 600; 90 | padding: 5px; 91 | } 92 | .profession { 93 | font-size: 18px; 94 | font-weight: 400; 95 | margin-bottom: 5px; 96 | } 97 | .media__icons a { 98 | text-decoration: none; 99 | color: var(--primary); 100 | } 101 | 102 | --------------------------------------------------------------------------------