├── .devcontainer └── devcontainer.json ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── main.yml ├── .gitignore ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── LICENSE ├── NOTICE ├── README.md ├── example-errors └── script.js ├── example-test-driven ├── homograph.js └── homograph.test.js └── example-vite ├── .eslintrc.json ├── .prettierrc ├── .stylelintrc.json ├── data └── collections-data.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── css │ ├── base.css │ ├── common.css │ └── reset.css ├── fonts │ ├── roboto │ │ ├── roboto-v30-latin-700.woff │ │ ├── roboto-v30-latin-700.woff2 │ │ ├── roboto-v30-latin-regular.woff │ │ ├── roboto-v30-latin-regular.woff2 │ │ └── roboto.css │ ├── ubuntu │ │ ├── ubuntu-v20-latin-300.woff │ │ ├── ubuntu-v20-latin-300.woff2 │ │ ├── ubuntu-v20-latin-500.woff │ │ ├── ubuntu-v20-latin-500.woff2 │ │ ├── ubuntu-v20-latin-500italic.woff │ │ ├── ubuntu-v20-latin-500italic.woff2 │ │ ├── ubuntu-v20-latin-700.woff │ │ ├── ubuntu-v20-latin-700.woff2 │ │ ├── ubuntu-v20-latin-700italic.woff │ │ ├── ubuntu-v20-latin-700italic.woff2 │ │ ├── ubuntu-v20-latin-regular.woff │ │ ├── ubuntu-v20-latin-regular.woff2 │ │ └── ubuntu.css │ └── vesper │ │ ├── vesper-libre-v19-latin-regular.woff │ │ ├── vesper-libre-v19-latin-regular.woff2 │ │ └── vesper.css └── images │ ├── characters │ ├── Binaryville-Belle.svg │ ├── Binaryville-Bubbles.svg │ ├── Binaryville-Cosmo.svg │ ├── Binaryville-Delores.svg │ ├── Binaryville-Dolly.svg │ ├── Binaryville-Eileen.svg │ ├── Binaryville-Elton.svg │ ├── Binaryville-Fred.svg │ ├── Binaryville-Levi.svg │ ├── Binaryville-Portman.svg │ ├── Binaryville-Rex.svg │ ├── Binaryville-Rivet.svg │ ├── Binaryville-Sergeant.svg │ ├── Binaryville-Spring.svg │ ├── Lil-Monsters-Blade.png │ ├── Lil-Monsters-Melville.png │ ├── Lil-Monsters-Mingle.png │ ├── Lil-Monsters-Yodel.png │ ├── Stargazers-Charmaine.svg │ ├── Stargazers-Gill.svg │ ├── Stargazers-Mindigo.svg │ ├── Stargazers-Trisaphron.svg │ ├── Tech-Heroes-Caped-Coder.svg │ ├── Tech-Heroes-CloudMaster.svg │ ├── Tech-Heroes-Commander-Zoom.svg │ ├── Tech-Heroes-The-ArchiTech.svg │ ├── avatar-Binaryville-Belle.png │ ├── avatar-Binaryville-Belle.svg │ ├── avatar-Binaryville-Bubbles.png │ ├── avatar-Binaryville-Bubbles.svg │ ├── avatar-Binaryville-Cosmo.png │ ├── avatar-Binaryville-Cosmo.svg │ ├── avatar-Binaryville-Delores.png │ ├── avatar-Binaryville-Delores.svg │ ├── avatar-Binaryville-Dolly.png │ ├── avatar-Binaryville-Dolly.svg │ ├── avatar-Binaryville-Eileen.png │ ├── avatar-Binaryville-Eileen.svg │ ├── avatar-Binaryville-Elton.png │ ├── avatar-Binaryville-Elton.svg │ ├── avatar-Binaryville-Fred.png │ ├── avatar-Binaryville-Fred.svg │ ├── avatar-Binaryville-Levi.png │ ├── avatar-Binaryville-Levi.svg │ ├── avatar-Binaryville-Portman.png │ ├── avatar-Binaryville-Portman.svg │ ├── avatar-Binaryville-Rex.png │ ├── avatar-Binaryville-Rex.svg │ ├── avatar-Binaryville-Rivet.png │ ├── avatar-Binaryville-Rivet.svg │ ├── avatar-Binaryville-Sergeant.png │ ├── avatar-Binaryville-Sergeant.svg │ ├── avatar-Binaryville-Spring.png │ ├── avatar-Binaryville-Spring.svg │ ├── avatar-Lil-Monsters-Blade.png │ ├── avatar-Lil-Monsters-Blade@2x.png │ ├── avatar-Lil-Monsters-Blade@3x.png │ ├── avatar-Lil-Monsters-Melville.png │ ├── avatar-Lil-Monsters-Melville@2x.png │ ├── avatar-Lil-Monsters-Melville@3x.png │ ├── avatar-Lil-Monsters-Mingle.png │ ├── avatar-Lil-Monsters-Mingle@2x.png │ ├── avatar-Lil-Monsters-Mingle@3x.png │ ├── avatar-Lil-Monsters-Yodel.png │ ├── avatar-Lil-Monsters-Yodel@2x.png │ ├── avatar-Lil-Monsters-Yodel@3x.png │ ├── avatar-Stargazers-Charmaine.png │ ├── avatar-Stargazers-Charmaine.svg │ ├── avatar-Stargazers-Gill.png │ ├── avatar-Stargazers-Gill.svg │ ├── avatar-Stargazers-Mindigo.png │ ├── avatar-Stargazers-Mindigo.svg │ ├── avatar-Stargazers-Trisaphron.png │ ├── avatar-Stargazers-Trisaphron.svg │ ├── avatar-Tech-Heroes-Caped-Coder.png │ ├── avatar-Tech-Heroes-Caped-Coder.svg │ ├── avatar-Tech-Heroes-CloudMaster.png │ ├── avatar-Tech-Heroes-CloudMaster.svg │ ├── avatar-Tech-Heroes-Commander-Zoom.png │ ├── avatar-Tech-Heroes-Commander-Zoom.svg │ ├── avatar-Tech-Heroes-The-ArchiTech.png │ └── avatar-Tech-Heroes-The-ArchiTech.svg │ ├── favicons │ ├── android-icon-144x144.png │ ├── android-icon-192x192.png │ ├── android-icon-36x36.png │ ├── android-icon-48x48.png │ ├── android-icon-72x72.png │ ├── android-icon-96x96.png │ ├── apple-icon-114x114.png │ ├── apple-icon-120x120.png │ ├── apple-icon-144x144.png │ ├── apple-icon-152x152.png │ ├── apple-icon-180x180.png │ ├── apple-icon-57x57.png │ ├── apple-icon-60x60.png │ ├── apple-icon-72x72.png │ ├── apple-icon-76x76.png │ ├── apple-icon-precomposed.png │ ├── apple-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── manifest.json │ ├── ms-icon-144x144.png │ ├── ms-icon-150x150.png │ ├── ms-icon-310x310.png │ └── ms-icon-70x70.png │ ├── hero-big-star.jpg │ ├── hero-big-star@2x.jpg │ ├── hero-big-star@3x.jpg │ ├── hero-gifts.jpg │ ├── hero-gifts@2x.jpg │ ├── hero-gifts@3x.jpg │ ├── hero-sale.jpg │ ├── hero-sale@2x.jpg │ ├── hero-sale@3x.jpg │ ├── icon-arrow-right-grape.svg │ ├── icon-chevron-left-purpleviolet.svg │ ├── icon-chevron-left-white.svg │ ├── icon-facebook-white.svg │ ├── icon-instagram-white.svg │ ├── icon-menu.svg │ ├── icon-rating-star-purpleviolet.svg │ ├── icon-search-dark.svg │ ├── icon-search-white.svg │ ├── icon-shopping-cart-v01-dark.svg │ ├── icon-shopping-cart-v01-white.svg │ ├── icon-twitter-white.svg │ ├── icon-user-v01-dark.svg │ ├── icon-user-v01-white.svg │ ├── icon-xmark.svg │ ├── icon-youtube-white.svg │ ├── logo-Binaryville.svg │ ├── logo-Lil-Monsters.svg │ ├── logo-Stargazers.svg │ ├── logo-Tech-Heroes.svg │ ├── logo-big-star-H-purple.svg │ ├── logo-big-star-H.svg │ ├── logomark-big-star-white.svg │ ├── products │ ├── binaryville-apron-dolores-white.svg │ ├── binaryville-artwork-dolores-wood.svg │ ├── binaryville-cards-dolores-front.svg │ ├── binaryville-hat-dolores-black.svg │ ├── binaryville-mug-dolores-black.svg │ ├── binaryville-mug-dolores-gray.svg │ ├── binaryville-mug-dolores-white.svg │ ├── binaryville-tshirt-dolores-black.svg │ ├── lil-monsters-cards-blade-front.svg │ ├── lil-monsters-mug-blade-blue.svg │ ├── lil-monsters-notebook-blade.svg │ ├── lil-monsters-pillow-blade.svg │ ├── lil-monsters-poster-blade.svg │ ├── stargazers-artwork-charmaine-black.svg │ ├── stargazers-cards-charmaine-front.svg │ ├── stargazers-tote-charmaine.svg │ └── stargazers-tshirt-charmaine-black.svg │ └── quote-tail-top-right.svg ├── src ├── App.jsx ├── components │ ├── Banner.css │ ├── Banner.jsx │ ├── Bulk.jsx │ ├── Collection.jsx │ ├── Collection.module.css │ ├── CollectionItem.jsx │ ├── Collections.jsx │ ├── Footer.jsx │ ├── Footer.module.css │ ├── Head.jsx │ ├── Header.jsx │ ├── Header.module.css │ ├── Image.jsx │ ├── Layout.jsx │ ├── Layout.module.css │ └── Main.jsx ├── index.html └── index.jsx └── vite.config.js /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensions": [ 3 | "GitHub.github-vscode-theme" 4 | // Additional Extensions Here 5 | ], 6 | "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc", 7 | "postAttachCommand": "git pull --all" 8 | 9 | // Update welcome text and set terminal prompt to '$ ' 10 | } 11 | // DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference 12 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Codeowners for these exercise files: 2 | # * (asterisk) deotes "all files and folders" 3 | # Example: * @producer @instructor 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | ## Issue Overview 9 | 10 | 11 | ## Describe your environment 12 | 13 | 14 | ## Steps to Reproduce 15 | 16 | 1. 17 | 2. 18 | 3. 19 | 4. 20 | 21 | ## Expected Behavior 22 | 23 | 24 | ## Current Behavior 25 | 26 | 27 | ## Possible Solution 28 | 29 | 30 | ## Screenshots / Video 31 | 32 | 33 | ## Related Issues 34 | 35 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Copy To Branches 2 | on: 3 | workflow_dispatch: 4 | jobs: 5 | copy-to-branches: 6 | runs-on: ubuntu-latest 7 | steps: 8 | - uses: actions/checkout@v2 9 | with: 10 | fetch-depth: 0 11 | - name: Copy To Branches Action 12 | uses: planetoftheweb/copy-to-branches@v1.2 13 | env: 14 | key: main 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .tmp 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.bracketPairColorization.enabled": true, 3 | "editor.cursorBlinking": "solid", 4 | "editor.fontFamily": "ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace", 5 | "editor.fontLigatures": false, 6 | "editor.fontSize": 22, 7 | "editor.formatOnPaste": true, 8 | "editor.formatOnSave": true, 9 | "editor.lineNumbers": "on", 10 | "editor.matchBrackets": "always", 11 | "editor.minimap.enabled": false, 12 | "editor.smoothScrolling": true, 13 | "editor.tabSize": 2, 14 | "editor.useTabStops": true, 15 | "emmet.triggerExpansionOnTab": true, 16 | "explorer.openEditors.visible": 0, 17 | "files.autoSave": "afterDelay", 18 | "screencastMode.onlyKeyboardShortcuts": true, 19 | "terminal.integrated.fontSize": 18, 20 | "workbench.activityBar.visible": true, 21 | "workbench.colorTheme": "Visual Studio Dark", 22 | "workbench.fontAliasing": "antialiased", 23 | "workbench.statusBar.visible": true 24 | } 25 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | Contribution Agreement 3 | ====================== 4 | 5 | This repository does not accept pull requests (PRs). All pull requests will be closed. 6 | 7 | However, if any contributions (through pull requests, issues, feedback or otherwise) are provided, as a contributor, you represent that the code you submit is your original work or that of your employer (in which case you represent you have the right to bind your employer). By submitting code (or otherwise providing feedback), you (and, if applicable, your employer) are licensing the submitted code (and/or feedback) to LinkedIn and the open source community subject to the BSD 2-Clause license. 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | LinkedIn Learning Exercise Files License Agreement 2 | ================================================== 3 | 4 | This License Agreement (the "Agreement") is a binding legal agreement 5 | between you (as an individual or entity, as applicable) and LinkedIn 6 | Corporation (“LinkedIn”). By downloading or using the LinkedIn Learning 7 | exercise files in this repository (“Licensed Materials”), you agree to 8 | be bound by the terms of this Agreement. If you do not agree to these 9 | terms, do not download or use the Licensed Materials. 10 | 11 | 1. License. 12 | - a. Subject to the terms of this Agreement, LinkedIn hereby grants LinkedIn 13 | members during their LinkedIn Learning subscription a non-exclusive, 14 | non-transferable copyright license, for internal use only, to 1) make a 15 | reasonable number of copies of the Licensed Materials, and 2) make 16 | derivative works of the Licensed Materials for the sole purpose of 17 | practicing skills taught in LinkedIn Learning courses. 18 | - b. Distribution. Unless otherwise noted in the Licensed Materials, subject 19 | to the terms of this Agreement, LinkedIn hereby grants LinkedIn members 20 | with a LinkedIn Learning subscription a non-exclusive, non-transferable 21 | copyright license to distribute the Licensed Materials, except the 22 | Licensed Materials may not be included in any product or service (or 23 | otherwise used) to instruct or educate others. 24 | 25 | 2. Restrictions and Intellectual Property. 26 | - a. You may not to use, modify, copy, make derivative works of, publish, 27 | distribute, rent, lease, sell, sublicense, assign or otherwise transfer the 28 | Licensed Materials, except as expressly set forth above in Section 1. 29 | - b. Linkedin (and its licensors) retains its intellectual property rights 30 | in the Licensed Materials. Except as expressly set forth in Section 1, 31 | LinkedIn grants no licenses. 32 | - c. You indemnify LinkedIn and its licensors and affiliates for i) any 33 | alleged infringement or misappropriation of any intellectual property rights 34 | of any third party based on modifications you make to the Licensed Materials, 35 | ii) any claims arising from your use or distribution of all or part of the 36 | Licensed Materials and iii) a breach of this Agreement. You will defend, hold 37 | harmless, and indemnify LinkedIn and its affiliates (and our and their 38 | respective employees, shareholders, and directors) from any claim or action 39 | brought by a third party, including all damages, liabilities, costs and 40 | expenses, including reasonable attorneys’ fees, to the extent resulting from, 41 | alleged to have resulted from, or in connection with: (a) your breach of your 42 | obligations herein; or (b) your use or distribution of any Licensed Materials. 43 | 44 | 3. Open source. This code may include open source software, which may be 45 | subject to other license terms as provided in the files. 46 | 47 | 4. Warranty Disclaimer. LINKEDIN PROVIDES THE LICENSED MATERIALS ON AN “AS IS” 48 | AND “AS AVAILABLE” BASIS. LINKEDIN MAKES NO REPRESENTATION OR WARRANTY, 49 | WHETHER EXPRESS OR IMPLIED, ABOUT THE LICENSED MATERIALS, INCLUDING ANY 50 | REPRESENTATION THAT THE LICENSED MATERIALS WILL BE FREE OF ERRORS, BUGS OR 51 | INTERRUPTIONS, OR THAT THE LICENSED MATERIALS ARE ACCURATE, COMPLETE OR 52 | OTHERWISE VALID. TO THE FULLEST EXTENT PERMITTED BY LAW, LINKEDIN AND ITS 53 | AFFILIATES DISCLAIM ANY IMPLIED OR STATUTORY WARRANTY OR CONDITION, INCLUDING 54 | ANY IMPLIED WARRANTY OR CONDITION OF MERCHANTABILITY OR FITNESS FOR A 55 | PARTICULAR PURPOSE, AVAILABILITY, SECURITY, TITLE AND/OR NON-INFRINGEMENT. 56 | YOUR USE OF THE LICENSED MATERIALS IS AT YOUR OWN DISCRETION AND RISK, AND 57 | YOU WILL BE SOLELY RESPONSIBLE FOR ANY DAMAGE THAT RESULTS FROM USE OF THE 58 | LICENSED MATERIALS TO YOUR COMPUTER SYSTEM OR LOSS OF DATA. NO ADVICE OR 59 | INFORMATION, WHETHER ORAL OR WRITTEN, OBTAINED BY YOU FROM US OR THROUGH OR 60 | FROM THE LICENSED MATERIALS WILL CREATE ANY WARRANTY OR CONDITION NOT 61 | EXPRESSLY STATED IN THESE TERMS. 62 | 63 | 5. Limitation of Liability. LINKEDIN SHALL NOT BE LIABLE FOR ANY INDIRECT, 64 | INCIDENTAL, SPECIAL, PUNITIVE, CONSEQUENTIAL OR EXEMPLARY DAMAGES, INCLUDING 65 | BUT NOT LIMITED TO, DAMAGES FOR LOSS OF PROFITS, GOODWILL, USE, DATA OR OTHER 66 | INTANGIBLE LOSSES . IN NO EVENT WILL LINKEDIN'S AGGREGATE LIABILITY TO YOU 67 | EXCEED $100. THIS LIMITATION OF LIABILITY SHALL: 68 | - i. APPLY REGARDLESS OF WHETHER (A) YOU BASE YOUR CLAIM ON CONTRACT, TORT, 69 | STATUTE, OR ANY OTHER LEGAL THEORY, (B) WE KNEW OR SHOULD HAVE KNOWN ABOUT 70 | THE POSSIBILITY OF SUCH DAMAGES, OR (C) THE LIMITED REMEDIES PROVIDED IN THIS 71 | SECTION FAIL OF THEIR ESSENTIAL PURPOSE; AND 72 | - ii. NOT APPLY TO ANY DAMAGE THAT LINKEDIN MAY CAUSE YOU INTENTIONALLY OR 73 | KNOWINGLY IN VIOLATION OF THESE TERMS OR APPLICABLE LAW, OR AS OTHERWISE 74 | MANDATED BY APPLICABLE LAW THAT CANNOT BE DISCLAIMED IN THESE TERMS. 75 | 76 | 6. Termination. This Agreement automatically terminates upon your breach of 77 | this Agreement or termination of your LinkedIn Learning subscription. On 78 | termination, all licenses granted under this Agreement will terminate 79 | immediately and you will delete the Licensed Materials. Sections 2-7 of this 80 | Agreement survive any termination of this Agreement. LinkedIn may discontinue 81 | the availability of some or all of the Licensed Materials at any time for any 82 | reason. 83 | 84 | 7. Miscellaneous. This Agreement will be governed by and construed in 85 | accordance with the laws of the State of California without regard to conflict 86 | of laws principles. The exclusive forum for any disputes arising out of or 87 | relating to this Agreement shall be an appropriate federal or state court 88 | sitting in the County of Santa Clara, State of California. If LinkedIn does 89 | not act to enforce a breach of this Agreement, that does not mean that 90 | LinkedIn has waived its right to enforce this Agreement. The Agreement does 91 | not create a partnership, agency relationship, or joint venture between the 92 | parties. Neither party has the power or authority to bind the other or to 93 | create any obligation or responsibility on behalf of the other. You may not, 94 | without LinkedIn’s prior written consent, assign or delegate any rights or 95 | obligations under these terms, including in connection with a change of 96 | control. Any purported assignment and delegation shall be ineffective. The 97 | Agreement shall bind and inure to the benefit of the parties, their respective 98 | successors and permitted assigns. If any provision of the Agreement is 99 | unenforceable, that provision will be modified to render it enforceable to the 100 | extent possible to give effect to the parties’ intentions and the remaining 101 | provisions will not be affected. This Agreement is the only agreement between 102 | you and LinkedIn regarding the Licensed Materials, and supersedes all prior 103 | agreements relating to the Licensed Materials. 104 | 105 | Last Updated: March 2019 106 | -------------------------------------------------------------------------------- /NOTICE: -------------------------------------------------------------------------------- 1 | Copyright 2023 LinkedIn Corporation 2 | All Rights Reserved. 3 | 4 | Licensed under the LinkedIn Learning Exercise File License (the "License"). 5 | See LICENSE in the project root for license information. 6 | 7 | Please note, this project may automatically load third party code from external 8 | repositories (for example, NPM modules, Composer packages, or other dependencies). 9 | If so, such third party code may be subject to other license terms than as set 10 | forth above. In addition, such third party code may also depend on and load 11 | multiple tiers of dependencies. Please review the applicable licenses of the 12 | additional dependencies. 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pair Programming with AI 2 | This is the repository for the LinkedIn Learning course Pair Programming with AI. The full course is available from [LinkedIn Learning][lil-course-url]. 3 | 4 | ![Pair Programming with AI][lil-thumbnail-url] 5 | 6 | If you’re a programmer, you’re probably curious (and maybe a little apprehensive) about what artificial intelligence can do for your work. In this course, Morten Rand-Hendriksen shows you how you can supercharge your software development with the help of an AI pair programmer. Morten shares practical strategies and hands-on practice on how to leverage AI tools like ChatGPT and GitHub Copilot to increase productivity and write better code. He demonstrates how to employ AI to address common tasks, how different AI tools differ, and offers an understanding of what is possible, how AI tools can fit into your work, and—importantly—where the current limits and guardrails are. 7 | 8 | ## Instructions 9 | 10 | The exercise files for this course are provided as a playground for you to experiment with using various AI tools as pair programmers. As such there is no progressive project or even specific code examples provided here. Instead there is a static web page project (the `/static` folder), a partially built React.js project (the `/react` folder), and an empty `/playground` folder where you can place your own files. 11 | 12 | ## Installing 13 | 14 | To run the build process for the react project: 15 | 16 | 1. Open a Terminal. 17 | 2. In Terminal, Navigate to the `/react` folder. 18 | 3. Type in `npm install` and press Enter. 19 | 4. Type in `npm run dev` and press Enter. 20 | This starts the Vite build process and dev server. 21 | 22 | ### Instructor 23 | 24 | Morten Rand-Hendriksen 25 | 26 | Developer and Senior Staff Instructor 27 | 28 | 29 | 30 | Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/morten-rand-hendriksen). 31 | 32 | [lil-course-url]: https://www.linkedin.com/learning/pair-programming-with-ai?dApp=59033956&leis=LAA 33 | [lil-thumbnail-url]: https://media.licdn.com/dms/image/D560DAQGCKTEcnWobTw/learning-public-crop_675_1200/0/1680538574317?e=2147483647&v=beta&t=Ka3ojVZfB9oS8WDyiYtOnXQo-xd1AKkO3Nvnm5KzVYQ 34 | 35 | -------------------------------------------------------------------------------- /example-errors/script.js: -------------------------------------------------------------------------------- 1 | function openDialogPlus(dialogId, focusAfterClosed, focusFirst) { 2 | setTimeout(function () 3 | { 4 | if (document.body.scrollHeight > window.innerHeight) { 5 | document.body.style['padding-right'] = window.innerWidth - document.documentElement.clientWidth + 'px'; 6 | } 7 | document.body.style['overflow'] = 'hidden'; 8 | openDialog(dialogId, focusAfterClosed, focusFirst) 9 | }, mobileBreakpointMq.matches ? 50 : 10); 10 | }; 11 | 12 | function dialogBackdropTransitionendHandler() { 13 | if (event.target !== this || event.propertyName !== 'opacity' || getComputedStyle(this)['opacity'] !== '0') { 14 | return; 15 | } 16 | document.body.style['padding-right'] = ''; 17 | document.body.style['overflow'] = ''; 18 | this.querySelector('[role="dialog"]').style['display'] = 'none'; 19 | }; 20 | 21 | function textButtonKeydownHandler() { 22 | if (event.key === ' ') { 23 | event.preventDefault(); 24 | } 25 | }; 26 | 27 | 28 | function medStr(n) { 29 | const nArr = n.split(',').map(Number).sort((a, b) => a - b); 30 | const e = nArr.length % 2 = 0; 31 | return e ? (nArr[nArr.length / 2 - 1] + nArr[nArr.length * 2]) / 2 : nArr[(nArr.length - 1) / 2]; 32 | } 33 | const median = medStr(42,87,9,63,18,76,55,29,91,5,37,68,12); 34 | console.log(median); -------------------------------------------------------------------------------- /example-test-driven/homograph.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-test-driven/homograph.js -------------------------------------------------------------------------------- /example-test-driven/homograph.test.js: -------------------------------------------------------------------------------- 1 | // const { isHomographAttack, cleanUri } = require("./homograph"); 2 | 3 | // test("detects homograph attack", () => { 4 | // expect(isHomographAttack("https://www.example.com")).toBe(false); 5 | // expect(isHomographAttack("https://www.ехаmрӏе.com")).toBe(true); 6 | // expect(isHomographAttack("https://www.gooɡle.com")).toBe(true); 7 | // }); 8 | 9 | // test("cleans URIs", () => { 10 | // expect(cleanUri("https://www.example.com")).toBe("https://www.example.com"); 11 | // expect(cleanUri("https://www.ехаmрӏе.com")).toBe("https://www.example.com"); 12 | // expect(cleanUri("https://www.gooɡle.com")).toBe("https://www.google.com"); 13 | // }); -------------------------------------------------------------------------------- /example-vite/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": ["plugin:react/recommended", "standard", "prettier"], 7 | "overrides": [], 8 | "parserOptions": { 9 | "ecmaVersion": "latest", 10 | "sourceType": "module" 11 | }, 12 | "plugins": ["react"], 13 | "rules": {} 14 | } 15 | -------------------------------------------------------------------------------- /example-vite/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "tabWidth": 2, 4 | "printWidth": 100, 5 | "singleQuote": true, 6 | "trailingComma": "none", 7 | "jsxBracketSameLine": true 8 | } 9 | -------------------------------------------------------------------------------- /example-vite/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard", "stylelint-config-prettier"] 3 | } 4 | -------------------------------------------------------------------------------- /example-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-lite", 3 | "version": "1.0.0", 4 | "description": "Example of a basic React app with Rollup.", 5 | "main": "./public/index.html", 6 | "author": "mor10", 7 | "license": "ISC", 8 | "scripts": { 9 | "dev": "vite", 10 | "build": "vite build", 11 | "serve": "vite preview" 12 | }, 13 | "dependencies": { 14 | "@splidejs/react-splide": "^0.7.12", 15 | "prop-types": "^15.8.1", 16 | "react": "^18.2.0", 17 | "react-css-modules": "^4.7.11", 18 | "react-dom": "^18.2.0", 19 | "react-helmet": "^6.1.0", 20 | "vite": "^4.0.4" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | }, 34 | "devDependencies": { 35 | "@types/react": "^18.0.27", 36 | "autoprefixer": "^10.4.13", 37 | "eslint": "^8.32.0", 38 | "eslint-config-prettier": "^8.6.0", 39 | "eslint-config-standard": "^17.0.0", 40 | "eslint-plugin-import": "^2.27.5", 41 | "eslint-plugin-n": "^15.6.1", 42 | "eslint-plugin-promise": "^6.1.1", 43 | "eslint-plugin-react": "^7.32.1", 44 | "postcss": "^8.4.21", 45 | "postcss-nested": "^6.0.0", 46 | "postcss-preset-env": "^8.0.0", 47 | "stylelint": "^14.16.1", 48 | "stylelint-config-prettier": "^9.0.4", 49 | "stylelint-config-standard": "^29.0.0", 50 | "vite-plugin-imagemin": "^0.6.1" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /example-vite/postcss.config.js: -------------------------------------------------------------------------------- 1 | const postcssPresetEnv = require('postcss-preset-env'); 2 | 3 | const config = () => ({ 4 | plugins: [ 5 | postcssPresetEnv({ 6 | features: { 7 | 'custom-properties': true, // already enabled by default 8 | 'custom-media-queries': true, 9 | 'custom-selectors': true 10 | } 11 | }), 12 | require('autoprefixer'), 13 | require('postcss-nested') 14 | ] 15 | }); 16 | 17 | module.exports = config; 18 | -------------------------------------------------------------------------------- /example-vite/public/css/base.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --dist-min-cont-edge: 20px; 3 | --width-content: 1180px; 4 | --width-gutter: 20px; 5 | --padding-inline-center-content: max( 6 | var(--dist-min-cont-edge), 7 | (100% - var(--width-content)) / 2 8 | ); 9 | --width-center-section: min(var(--width-content), 100% - var(--dist-min-cont-edge) * 2); 10 | --color-body: hsl(0deg 0% 40%); 11 | --color-gold: hsl(41deg 93% 66%); 12 | --color-grape: hsl(288deg 41% 36%); 13 | --color-purpleviolet: hsl(293deg 45% 39%); 14 | --color-violet: hsl(259deg 61% 23%); 15 | --color-dark: hsl(0deg 0% 10%); 16 | --color-gray: hsl(0deg 0% 40%); 17 | --color-silver: hsl(0deg 0% 60%); 18 | --color-whitesmoke: hsl(0deg 0% 96%); 19 | --color-heading: var(--color-dark); 20 | --color-link-static: var(--color-purpleviolet); 21 | --color-link-hover: var(--color-purpleviolet); 22 | --color-danger: hsl(0deg 100% 40%); 23 | --color-border: hsl(0deg 0% 80%); 24 | --color-inactive: hsl(0deg 0% 46%); 25 | --text-deco-line: underline; 26 | --text-deco-color-static: transparent; 27 | --text-deco-color-hover: currentcolor; 28 | --color-link-background-hover: hsl(289deg 22% 90%); 29 | --color-placeholder: hsl(0deg 0% 40%); 30 | --font-body: Ubuntu, sans-serif; 31 | --trans-dur: 250ms; 32 | } 33 | 34 | html, 35 | body { 36 | -webkit-text-size-adjust: none; 37 | -moz-text-size-adjust: none; 38 | text-size-adjust: none; 39 | } 40 | 41 | /* Typography 42 | ------------------------------------------------------- */ 43 | 44 | @font-face { 45 | font-family: 'Vesper Libre'; 46 | font-style: normal; 47 | font-display: swap; 48 | font-weight: 400; 49 | src: local('Vesper Libre Regular'), local('Vesper Libre-Regular'), 50 | url(../fonts/VesperLibre-Regular.ttf) format('truetype'); 51 | } 52 | 53 | body { 54 | color: var(--color-body); 55 | font-weight: 300; 56 | font-family: var(--font-body); 57 | } 58 | 59 | h1, 60 | h2, 61 | h3, 62 | h4, 63 | h5, 64 | h6, 65 | dt { 66 | color: var(--color-heading); 67 | } 68 | 69 | a { 70 | cursor: pointer; 71 | color: var(--color-link-static); 72 | text-decoration-thickness: 1px; 73 | text-decoration-line: var(--text-deco-line); 74 | text-decoration-color: var(--text-deco-color-static); 75 | text-underline-offset: 0.138em; 76 | } 77 | 78 | a:is(:hover, :focus) { 79 | color: var(--color-link-hover); 80 | text-decoration-color: var(--text-deco-color-hover); 81 | background-color: var(--color-link-background-hover); 82 | } 83 | 84 | ::placeholder { 85 | opacity: 1; 86 | color: var(--color-placeholder); 87 | } 88 | 89 | /* Accessibility 90 | ------------------------------------------------------- */ 91 | 92 | .visually-hidden { 93 | position: absolute; 94 | top: -5000px; 95 | left: -5000px; 96 | width: 1px; 97 | height: 1px; 98 | overflow: hidden; 99 | } 100 | -------------------------------------------------------------------------------- /example-vite/public/css/common.css: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------- 2 | 3 | Title : Big Star Collectibles 4 | Usage : common styles 5 | Edited: 2022-09-30 6 | 7 | ------------------------------------------------------- 8 | 9 | 10 | /* 3.3. buttons 11 | ------------------------------------------------------- */ 12 | 13 | .button { 14 | flex-shrink: 0; 15 | display: inline-flex; 16 | justify-content: center; 17 | align-items: center; 18 | padding: 0 1.6rem; 19 | height: 46px; 20 | font-weight: 400; 21 | font-size: 2rem; 22 | text-decoration-line: none; 23 | border-radius: 4px; 24 | text-align: center; 25 | } 26 | 27 | .button.lg { 28 | font-weight: 700; 29 | font-size: 2.2rem; 30 | height: 60px; 31 | } 32 | 33 | /* solid */ 34 | 35 | :where(.button).solid { 36 | background-color: var(--color-background-static); 37 | } 38 | 39 | .button:is(:hover, :focus, .active).solid { 40 | background-color: var(--color-background-hover); 41 | } 42 | 43 | /* solid - gold */ 44 | 45 | .button.solid.gold { 46 | --color-background-static: var(--color-gold); 47 | --color-background-hover: #e5b244; 48 | color: var(--color-dark); 49 | } 50 | 51 | /* solid - white */ 52 | 53 | .button.solid.white { 54 | --color-background-static: #fff; 55 | --color-background-hover: #ebebeb; 56 | color: var(--color-dark); 57 | } 58 | 59 | /* bordered */ 60 | 61 | :where(.button).bordered { 62 | background-color: transparent; 63 | } 64 | 65 | .button:is(:hover, :focus, .active).bordered { 66 | background-color: var(--color-background-hover); 67 | } 68 | 69 | /* bordered - grape */ 70 | 71 | :where(.button.bordered).grape { 72 | --color-background-hover: var(--color-whitesmoke); 73 | color: var(--color-grape); 74 | border: 1px solid var(--color-grape); 75 | } 76 | 77 | /* bordered - violet */ 78 | 79 | :where(.button.bordered).violet { 80 | --color-background-hover: var(--color-whitesmoke); 81 | color: var(--color-purpleviolet); 82 | border: 1px solid var(--color-purpleviolet); 83 | } 84 | -------------------------------------------------------------------------------- /example-vite/public/css/reset.css: -------------------------------------------------------------------------------- 1 | /* RESET */ 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | transition-property: visibility, opacity, color, text-decoration-color, background-color, 8 | border-color, box-shadow; 9 | transition-duration: var(--trans-dur); 10 | } 11 | 12 | svg { 13 | transition-property: fill, stroke; 14 | } 15 | 16 | html { 17 | font-size: 62.5%; 18 | line-height: 1.25; 19 | } 20 | 21 | h1, 22 | h2, 23 | h3, 24 | h4, 25 | h5, 26 | h6, 27 | input, 28 | select, 29 | button, 30 | textarea, 31 | small { 32 | font-size: 100%; 33 | } 34 | 35 | ::marker { 36 | color: transparent; 37 | font-size: 0; 38 | } 39 | 40 | img, 41 | svg, 42 | video, 43 | iframe { 44 | max-width: 100%; 45 | } 46 | 47 | img, 48 | fieldset, 49 | iframe { 50 | border-width: 0; 51 | } 52 | 53 | table { 54 | border-collapse: collapse; 55 | border-spacing: 0; 56 | } 57 | 58 | input, 59 | select, 60 | textarea, 61 | button { 62 | color: inherit; 63 | font-weight: inherit; 64 | line-height: inherit; 65 | font-family: inherit; 66 | text-transform: inherit; 67 | background-color: transparent; 68 | border-width: 0; 69 | border-radius: 0; 70 | } 71 | 72 | ::-webkit-search-cancel-button, 73 | ::-webkit-outer-spin-button, 74 | ::-webkit-inner-spin-button { 75 | -webkit-appearance: none; 76 | } 77 | 78 | input[type='number'] { 79 | -moz-appearance: textfield; 80 | } 81 | 82 | select { 83 | -webkit-appearance: none; 84 | -moz-appearance: none; 85 | appearance: none; 86 | cursor: pointer; 87 | } 88 | 89 | @-moz-document url-prefix() { 90 | select { 91 | text-indent: -2px; 92 | } 93 | } 94 | 95 | textarea { 96 | -webkit-appearance: none; 97 | overflow: auto; 98 | resize: vertical; 99 | border-radius: 0; 100 | } 101 | 102 | button { 103 | cursor: pointer; 104 | overflow: visible; 105 | } 106 | 107 | .no-outline { 108 | outline-style: none; 109 | } 110 | 111 | [aria-hidden='true'].arrow { 112 | font-weight: 400; 113 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 114 | } 115 | 116 | .button > [aria-hidden='true'].arrow::before { 117 | content: '\00a0'; 118 | } 119 | -------------------------------------------------------------------------------- /example-vite/public/fonts/roboto/roboto-v30-latin-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/roboto/roboto-v30-latin-700.woff -------------------------------------------------------------------------------- /example-vite/public/fonts/roboto/roboto-v30-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/roboto/roboto-v30-latin-700.woff2 -------------------------------------------------------------------------------- /example-vite/public/fonts/roboto/roboto-v30-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/roboto/roboto-v30-latin-regular.woff -------------------------------------------------------------------------------- /example-vite/public/fonts/roboto/roboto-v30-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/roboto/roboto-v30-latin-regular.woff2 -------------------------------------------------------------------------------- /example-vite/public/fonts/roboto/roboto.css: -------------------------------------------------------------------------------- 1 | /* roboto-regular - latin */ 2 | @font-face { 3 | font-family: Roboto; 4 | font-style: normal; 5 | font-weight: 400; 6 | font-display: swap; 7 | src: local(''), url('./roboto-v30-latin-regular.woff2') format('woff2'), 8 | url('./roboto-v30-latin-regular.woff') format('woff'); 9 | } 10 | 11 | /* roboto-700 - latin */ 12 | @font-face { 13 | font-family: Roboto; 14 | font-style: normal; 15 | font-weight: 700; 16 | font-display: swap; 17 | src: local(''), url('./roboto-v30-latin-700.woff2') format('woff2'), 18 | url('./roboto-v30-latin-700.woff') format('woff'); 19 | } 20 | -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-300.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-300.woff -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-300.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-300.woff2 -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-500.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-500.woff -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-500.woff2 -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-500italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-500italic.woff -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-500italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-500italic.woff2 -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-700.woff -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-700.woff2 -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-700italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-700italic.woff -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-700italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-700italic.woff2 -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-regular.woff -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu-v20-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/ubuntu/ubuntu-v20-latin-regular.woff2 -------------------------------------------------------------------------------- /example-vite/public/fonts/ubuntu/ubuntu.css: -------------------------------------------------------------------------------- 1 | /* ubuntu-300 - latin */ 2 | @font-face { 3 | font-family: Ubuntu; 4 | font-style: normal; 5 | font-weight: 300; 6 | font-display: swap; 7 | src: local(''), url('./ubuntu-v20-latin-300.woff2') format('woff2'), 8 | url('./ubuntu-v20-latin-300.woff') format('woff'); 9 | } 10 | 11 | /* ubuntu-regular - latin */ 12 | @font-face { 13 | font-family: Ubuntu; 14 | font-style: normal; 15 | font-weight: 400; 16 | font-display: swap; 17 | src: local(''), url('./ubuntu-v20-latin-regular.woff2') format('woff2'), 18 | url('./ubuntu-v20-latin-regular.woff') format('woff'); 19 | } 20 | 21 | /* ubuntu-500italic - latin */ 22 | @font-face { 23 | font-family: Ubuntu; 24 | font-style: italic; 25 | font-weight: 500; 26 | font-display: swap; 27 | src: local(''), url('./ubuntu-v20-latin-500italic.woff2') format('woff2'), 28 | url('./ubuntu-v20-latin-500italic.woff') format('woff'); 29 | } 30 | 31 | /* ubuntu-500 - latin */ 32 | @font-face { 33 | font-family: Ubuntu; 34 | font-style: normal; 35 | font-weight: 500; 36 | font-display: swap; 37 | src: local(''), url('./ubuntu-v20-latin-500.woff2') format('woff2'), 38 | url('./ubuntu-v20-latin-500.woff') format('woff'); 39 | } 40 | 41 | /* ubuntu-700 - latin */ 42 | @font-face { 43 | font-family: Ubuntu; 44 | font-style: normal; 45 | font-weight: 700; 46 | font-display: swap; 47 | src: local(''), url('./ubuntu-v20-latin-700.woff2') format('woff2'), 48 | url('./ubuntu-v20-latin-700.woff') format('woff'); 49 | } 50 | 51 | /* ubuntu-700italic - latin */ 52 | @font-face { 53 | font-family: Ubuntu; 54 | font-style: italic; 55 | font-weight: 700; 56 | font-display: swap; 57 | src: local(''), url('./ubuntu-v20-latin-700italic.woff2') format('woff2'), 58 | url('./ubuntu-v20-latin-700italic.woff') format('woff'); 59 | } 60 | -------------------------------------------------------------------------------- /example-vite/public/fonts/vesper/vesper-libre-v19-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/vesper/vesper-libre-v19-latin-regular.woff -------------------------------------------------------------------------------- /example-vite/public/fonts/vesper/vesper-libre-v19-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/fonts/vesper/vesper-libre-v19-latin-regular.woff2 -------------------------------------------------------------------------------- /example-vite/public/fonts/vesper/vesper.css: -------------------------------------------------------------------------------- 1 | /* vesper-libre-regular - latin */ 2 | @font-face { 3 | font-family: 'Vesper Libre'; 4 | font-style: normal; 5 | font-weight: 400; 6 | font-display: swap; 7 | src: local(''), url('./vesper-libre-v19-latin-regular.woff2') format('woff2'), 8 | url('./vesper-libre-v19-latin-regular.woff') format('woff'); 9 | } 10 | -------------------------------------------------------------------------------- /example-vite/public/images/characters/Binaryville-Portman.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 22 | 23 | 24 | 26 | 27 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 48 | 49 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 69 | 70 | 71 | 72 | 73 | 75 | 77 | 78 | 79 | 80 | 82 | 83 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 93 | 94 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 105 | 106 | 107 | 108 | 109 | 111 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 143 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /example-vite/public/images/characters/Lil-Monsters-Blade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/Lil-Monsters-Blade.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/Lil-Monsters-Melville.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/Lil-Monsters-Melville.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/Lil-Monsters-Mingle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/Lil-Monsters-Mingle.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/Lil-Monsters-Yodel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/Lil-Monsters-Yodel.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/Stargazers-Gill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 23 | 24 | 26 | 27 | 28 | 31 | 33 | 34 | 36 | 37 | 39 | 42 | 44 | 45 | 47 | 48 | 49 | 50 | 51 | 54 | 55 | 56 | 57 | 58 | 59 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 75 | 76 | 77 | 78 | 79 | 80 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 113 | 115 | 130 | 132 | 133 | 134 | 135 | 137 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 153 | 154 | 155 | 156 | 158 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /example-vite/public/images/characters/Stargazers-Trisaphron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 19 | 20 | 22 | 24 | 25 | 28 | 31 | 32 | 34 | 36 | 39 | 40 | 42 | 43 | 44 | 45 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 64 | 66 | 71 | 72 | 73 | 75 | 77 | 79 | 80 | 82 | 83 | 84 | 85 | 86 | 89 | 90 | 94 | 98 | 99 | -------------------------------------------------------------------------------- /example-vite/public/images/characters/Tech-Heroes-CloudMaster.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 23 | 24 | 25 | 26 | 29 | 32 | 37 | 40 | 44 | 47 | 48 | 49 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 62 | 64 | 66 | 69 | 80 | 81 | 84 | 86 | 88 | 91 | 93 | 94 | 96 | 100 | 101 | 102 | 106 | 107 | 109 | 111 | 115 | 116 | 117 | 121 | 122 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 134 | 136 | 137 | 139 | 141 | 142 | -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Belle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Belle.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Bubbles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Bubbles.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Cosmo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Cosmo.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Delores.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Delores.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Dolly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Dolly.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Eileen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Eileen.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Elton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Elton.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Fred.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Fred.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Levi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Levi.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Portman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Portman.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Rex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Rex.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Rivet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Rivet.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Sergeant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Sergeant.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Binaryville-Spring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Binaryville-Spring.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Blade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Blade.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Blade@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Blade@2x.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Blade@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Blade@3x.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Melville.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Melville.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Melville@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Melville@2x.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Melville@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Melville@3x.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Mingle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Mingle.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Mingle@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Mingle@2x.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Mingle@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Mingle@3x.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Yodel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Yodel.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Yodel@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Yodel@2x.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Lil-Monsters-Yodel@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Lil-Monsters-Yodel@3x.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Stargazers-Charmaine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Stargazers-Charmaine.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Stargazers-Gill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Stargazers-Gill.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Stargazers-Gill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Stargazers-Mindigo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Stargazers-Mindigo.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Stargazers-Trisaphron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Stargazers-Trisaphron.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Stargazers-Trisaphron.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Tech-Heroes-Caped-Coder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Tech-Heroes-Caped-Coder.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Tech-Heroes-CloudMaster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Tech-Heroes-CloudMaster.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Tech-Heroes-Commander-Zoom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Tech-Heroes-Commander-Zoom.png -------------------------------------------------------------------------------- /example-vite/public/images/characters/avatar-Tech-Heroes-The-ArchiTech.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/characters/avatar-Tech-Heroes-The-ArchiTech.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/android-icon-144x144.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/android-icon-192x192.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/android-icon-36x36.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/android-icon-48x48.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/android-icon-72x72.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/android-icon-96x96.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon-114x114.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon-120x120.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon-144x144.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon-152x152.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon-180x180.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon-57x57.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon-60x60.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon-72x72.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon-76x76.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/apple-icon.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/favicon-96x96.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "images/favicons/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "images/favicons/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "images/favicons/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "images/favicons/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "images/favicons/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "images/favicons/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /example-vite/public/images/favicons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/ms-icon-144x144.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/ms-icon-150x150.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/ms-icon-310x310.png -------------------------------------------------------------------------------- /example-vite/public/images/favicons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/favicons/ms-icon-70x70.png -------------------------------------------------------------------------------- /example-vite/public/images/hero-big-star.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/hero-big-star.jpg -------------------------------------------------------------------------------- /example-vite/public/images/hero-big-star@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/hero-big-star@2x.jpg -------------------------------------------------------------------------------- /example-vite/public/images/hero-big-star@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/hero-big-star@3x.jpg -------------------------------------------------------------------------------- /example-vite/public/images/hero-gifts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/hero-gifts.jpg -------------------------------------------------------------------------------- /example-vite/public/images/hero-gifts@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/hero-gifts@2x.jpg -------------------------------------------------------------------------------- /example-vite/public/images/hero-gifts@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/hero-gifts@3x.jpg -------------------------------------------------------------------------------- /example-vite/public/images/hero-sale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/hero-sale.jpg -------------------------------------------------------------------------------- /example-vite/public/images/hero-sale@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/hero-sale@2x.jpg -------------------------------------------------------------------------------- /example-vite/public/images/hero-sale@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/pair-programming-with-ai-4401992/dc98d938146fd1da1784455fc16e21fb78ecb3f0/example-vite/public/images/hero-sale@3x.jpg -------------------------------------------------------------------------------- /example-vite/public/images/icon-arrow-right-grape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-chevron-left-purpleviolet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-chevron-left-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-facebook-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-instagram-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-rating-star-purpleviolet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-search-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-search-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-shopping-cart-v01-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-shopping-cart-v01-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-twitter-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-user-v01-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-user-v01-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-xmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/icon-youtube-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/logo-Stargazers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 18 | 43 | 71 | 72 | -------------------------------------------------------------------------------- /example-vite/public/images/logo-Tech-Heroes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 12 | 18 | 19 | 21 | 22 | 34 | 35 | -------------------------------------------------------------------------------- /example-vite/public/images/logo-big-star-H-purple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/logo-big-star-H.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/logomark-big-star-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/public/images/quote-tail-top-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example-vite/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Layout from './components/Layout'; 3 | import '../public/css/reset.css'; 4 | import '../public/fonts/roboto/roboto.css'; 5 | import '../public/fonts/ubuntu/ubuntu.css'; 6 | import '../public/fonts/vesper/vesper.css'; 7 | import '../public/css/base.css'; 8 | import '../public/css/common.css'; 9 | 10 | class App extends Component { 11 | render() { 12 | return ; 13 | } 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /example-vite/src/components/Banner.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles for the home page Splide banner. 3 | **/ 4 | #hero { 5 | position: relative; 6 | margin-bottom: 61px; 7 | height: 460px; 8 | } 9 | 10 | .splide__arrows { 11 | display: flex; 12 | } 13 | 14 | .splide__arrow, 15 | .splide__arrow:disabled { 16 | height: 100%; 17 | opacity: 0; 18 | width: 66px; 19 | border-radius: 0; 20 | } 21 | 22 | .splide__arrow--prev { 23 | left: 0; 24 | } 25 | 26 | .splide__arrow--next { 27 | right: 0; 28 | transform: rotate(180deg); 29 | top: 0%; 30 | } 31 | 32 | #hero:hover .splide__arrow { 33 | opacity: 1; 34 | } 35 | 36 | .splide__arrow > img { 37 | display: block; 38 | padding: 0 24px 0 23px; 39 | width: 100%; 40 | height: 100%; 41 | background-color: rgba(0, 0, 0, 0.2); 42 | } 43 | 44 | .splide__arrow:is(:hover, :focus) > img { 45 | background-color: rgba(0, 0, 0, 0.3); 46 | } 47 | 48 | .splide__track { 49 | height: 100%; 50 | } 51 | 52 | .splide__slide { 53 | padding: 0 var(--padding-inline-center-content); 54 | height: 100%; 55 | } 56 | 57 | .splide__slide.opaque { 58 | opacity: 1 !important; 59 | } 60 | 61 | .splide__slide > .wrapper { 62 | position: absolute; 63 | left: calc( 64 | var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.034 65 | ); 66 | z-index: 2; 67 | display: flex; 68 | flex-direction: column; 69 | align-items: center; 70 | width: 483px; 71 | text-align: center; 72 | } 73 | 74 | .splide__slide h2 { 75 | color: inherit; 76 | font-style: italic; 77 | font-size: 6.6rem; 78 | line-height: 1.1489; 79 | } 80 | 81 | .wrapper > p { 82 | font-weight: 400; 83 | font-size: 2.6rem; 84 | line-height: 1.1488; 85 | } 86 | 87 | .splide__slide .wrapper > .button { 88 | min-width: 282px; 89 | } 90 | 91 | .splide__pagination { 92 | position: absolute; 93 | bottom: 20px; 94 | left: 0; 95 | gap: 14px; 96 | width: 100%; 97 | } 98 | 99 | .splide__pagination__page { 100 | display: block; 101 | width: 16px; 102 | height: 16px; 103 | background-color: rgba(102, 102, 102, 0.3); 104 | border-radius: 50%; 105 | } 106 | 107 | :is(:hover, :focus, .is-active).splide__pagination__page { 108 | background-color: var(--color-grape); 109 | } 110 | 111 | /* Big Star */ 112 | 113 | .big-star { 114 | background-color: var(--color-whitesmoke); 115 | } 116 | 117 | .big-star > .wrapper { 118 | top: 77px; 119 | left: calc( 120 | var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 121 | 0.1195 122 | ); 123 | width: 298px; 124 | } 125 | 126 | .big-star .wrapper > img { 127 | margin-bottom: 47px; 128 | } 129 | 130 | .big-star > img { 131 | position: absolute; 132 | top: 72px; 133 | left: calc( 134 | var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.549 135 | ); 136 | } 137 | 138 | /* Sale */ 139 | 140 | .sale { 141 | color: #000; 142 | background-color: var(--color-gold); 143 | } 144 | 145 | .sale > .wrapper { 146 | top: 105px; 147 | } 148 | 149 | .sale .wrapper > p { 150 | margin-top: 1.2rem; 151 | } 152 | 153 | .sale .wrapper > .button { 154 | margin-top: 62px; 155 | } 156 | 157 | .sale > img { 158 | position: absolute; 159 | top: 47px; 160 | left: calc( 161 | var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.543 162 | ); 163 | } 164 | 165 | /* Gifts */ 166 | 167 | .gifts { 168 | color: #fff; 169 | background-color: var(--color-violet); 170 | } 171 | 172 | .gifts > .wrapper { 173 | top: 99px; 174 | left: calc( 175 | var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.009 176 | ); 177 | width: 541px; 178 | } 179 | 180 | .gifts h2 { 181 | font-size: 5.6rem; 182 | } 183 | 184 | .gifts .wrapper > p { 185 | margin-top: 1.4rem; 186 | max-width: 340px; 187 | } 188 | 189 | .gifts .wrapper p > br { 190 | display: none; 191 | } 192 | 193 | .gifts .wrapper > .button { 194 | margin-top: 48px; 195 | } 196 | 197 | .gifts > img { 198 | position: absolute; 199 | top: -57px; 200 | left: calc( 201 | var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.521 202 | ); 203 | } 204 | 205 | @media (max-width: 991px) { 206 | /* 1. hero */ 207 | 208 | #hero { 209 | margin-bottom: 40px; 210 | height: 640px; 211 | } 212 | 213 | .splide__arrow { 214 | display: none; 215 | } 216 | 217 | .splide__slide { 218 | display: flex; 219 | flex-direction: column; 220 | justify-content: center; 221 | align-items: center; 222 | } 223 | 224 | .splide__slide.opaque { 225 | opacity: 1 !important; 226 | } 227 | 228 | .splide__slide > .wrapper { 229 | position: static; 230 | width: auto; 231 | } 232 | 233 | .splide__slide h2 { 234 | font-size: 5.8rem; 235 | line-height: 1.17; 236 | } 237 | 238 | .wrapper > p { 239 | font-size: 1.8rem; 240 | line-height: 1.1667; 241 | } 242 | 243 | .splide__slide .wrapper > .button { 244 | width: min(282px, 100%); 245 | min-width: 0; 246 | } 247 | 248 | /* Big Star */ 249 | 250 | .big-star { 251 | padding-bottom: 32px; 252 | } 253 | 254 | .big-star > .wrapper { 255 | margin-top: 46px; 256 | margin-top: 0; 257 | width: auto; 258 | } 259 | 260 | .big-star > img { 261 | position: static; 262 | margin-top: 30px; 263 | width: min(335px, 100%); 264 | height: auto; 265 | } 266 | 267 | /* Sale */ 268 | 269 | .sale { 270 | padding-bottom: 66px; 271 | } 272 | 273 | .sale > .wrapper { 274 | margin-top: 31px; 275 | } 276 | 277 | .sale .wrapper > p { 278 | margin-top: 1rem; 279 | } 280 | 281 | .sale .wrapper > .button { 282 | margin-top: 40px; 283 | } 284 | 285 | .sale > img { 286 | position: static; 287 | margin-top: 30px; 288 | width: min(335px, 100%); 289 | height: auto; 290 | } 291 | 292 | /* Gifts */ 293 | 294 | .gifts { 295 | padding-bottom: 36px; 296 | } 297 | 298 | .gifts .wrapper > p { 299 | margin-top: 1.1rem; 300 | } 301 | 302 | .gifts .wrapper p > br { 303 | display: inline; 304 | } 305 | 306 | .gifts .wrapper > .button { 307 | margin-top: 19px; 308 | } 309 | 310 | .gifts > img { 311 | position: static; 312 | margin: 5px -178px 0 0; 313 | max-width: 436px; 314 | height: auto; 315 | } 316 | } 317 | -------------------------------------------------------------------------------- /example-vite/src/components/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Splide, SplideSlide, SplideTrack } from '@splidejs/react-splide'; 3 | import Image from './Image'; 4 | import '../../node_modules/@splidejs/react-splide/dist/css/splide-core.min.css'; 5 | import '../../node_modules/@splidejs/react-splide/dist/css/splide.min.css'; 6 | import './Banner.css'; 7 | 8 | export const Banner = () => { 9 | return ( 10 | 11 | 12 | 13 |
14 | 19 | 20 | Shop now 21 | 22 |
23 | 28 | 29 | 30 |
31 |

Seasonal Sale!

32 |

Enjoy up to 20% off select items.

33 | 34 | See items on sale 35 | 36 |
37 | 42 | 43 | 44 |
45 |

Gifts for Everyone!

46 |

47 | Shop our collections 48 |
to find that perfect collectible. 49 |

50 | 51 | Shop now 52 | 53 |
54 | 59 | 60 | 61 |
62 | 70 | 78 |
79 | 80 | ); 81 | }; 82 | 83 | export default Banner; 84 | -------------------------------------------------------------------------------- /example-vite/src/components/Bulk.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const Bulk = () => { 4 | return <>; 5 | }; 6 | 7 | export default Bulk; 8 | -------------------------------------------------------------------------------- /example-vite/src/components/Collection.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import CollectionItem from './CollectionItem'; 4 | import Image from './Image'; 5 | import styles from './Collection.module.css'; 6 | 7 | export const Collection = ({ data }) => { 8 | return ( 9 |
10 |
11 | {data.header.logo.alt} 21 |

{data.header.title}

22 | 27 | {data.header.button.href}{' '} 28 | 31 | 32 |
33 |
34 | {data.charList.map((character) => { 35 | return ; 36 | })} 37 |
38 |
39 | ); 40 | }; 41 | 42 | Collection.propTypes = { 43 | data: PropTypes.object.isRequired 44 | }; 45 | 46 | export default Collection; 47 | -------------------------------------------------------------------------------- /example-vite/src/components/Collection.module.css: -------------------------------------------------------------------------------- 1 | /* collections 2 | ------------------------------------------------------- */ 3 | 4 | .collection { 5 | position: relative; 6 | padding: 40px var(--padding-inline-center-content) 31px; 7 | } 8 | 9 | .collection + .collection { 10 | padding-top: 61px; 11 | } 12 | 13 | .collection + .collection::before { 14 | content: ''; 15 | position: absolute; 16 | top: 0; 17 | left: 50%; 18 | margin-left: calc(-1 * min(1440px, 100%) / 2); 19 | width: min(1440px, 100%); 20 | border-top: 1px solid #ececec; 21 | } 22 | 23 | .collection > header { 24 | display: flex; 25 | flex-wrap: wrap; 26 | justify-content: space-between; 27 | align-items: center; 28 | row-gap: 20px; 29 | margin-bottom: 19px; 30 | width: 100%; 31 | } 32 | 33 | .collection.tech-heroes > header { 34 | margin-bottom: 42px; 35 | } 36 | 37 | .collection.binaryville > header > img { 38 | margin-right: 70px; 39 | } 40 | 41 | .collection.lil-monsters > header > img { 42 | margin-right: 70px; 43 | } 44 | 45 | .collection.stargazers > header > img { 46 | margin: 0 101px 0 30px; 47 | } 48 | 49 | .collection.tech-heroes > header > img { 50 | margin-right: 70px; 51 | } 52 | 53 | .collection h1 { 54 | margin: 0 auto 1px 0; 55 | padding-right: 20px; 56 | font-size: 4.8rem; 57 | line-height: 1.1458; 58 | } 59 | 60 | .collection header > .button { 61 | min-width: 242px; 62 | } 63 | 64 | /* character list 65 | ------------------------------------------------------- */ 66 | 67 | .char-list { 68 | display: grid; 69 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 70 | gap: 20px; 71 | } 72 | 73 | .char-list > div { 74 | position: relative; 75 | display: flex; 76 | flex-direction: column; 77 | align-items: center; 78 | padding: 20px; 79 | line-height: 1.149; 80 | text-align: center; 81 | border-radius: 6px; 82 | } 83 | 84 | .char-list > div:is(:hover, :focus-within) { 85 | background-color: #ebebeb; 86 | } 87 | 88 | .char-list dt { 89 | margin-top: 2.1rem; 90 | font-weight: 700; 91 | font-size: 2rem; 92 | } 93 | 94 | .char-list .title { 95 | margin: 0 -21px; 96 | font-weight: 400; 97 | font-size: 2rem; 98 | } 99 | 100 | .char-list .avatar { 101 | order: -1; 102 | display: flex; 103 | justify-content: center; 104 | } 105 | 106 | .char-list .desc { 107 | display: none; 108 | } 109 | 110 | .char-list dd > a { 111 | --color-link-background-hover: transparent; 112 | position: absolute; 113 | top: 0; 114 | left: 0; 115 | width: 100%; 116 | height: 100%; 117 | overflow: hidden; 118 | text-indent: -5000px; 119 | } 120 | 121 | .char-list .modal-opener { 122 | --color-background-hover: #fff; 123 | position: absolute; 124 | top: 175px; 125 | margin-left: -71px; 126 | width: 142px; 127 | opacity: 0; 128 | background-color: #fff; 129 | } 130 | 131 | .char-list > div:is(:hover, :focus-within) .modal-opener { 132 | opacity: 1; 133 | } 134 | 135 | /* responsive ( 991px) 136 | ------------------------------------------------------- */ 137 | 138 | @media (max-width: 991px) { 139 | /* 2. collections */ 140 | 141 | .collection { 142 | padding-bottom: 28px; 143 | } 144 | 145 | .collection + .collection { 146 | padding-top: 41px; 147 | } 148 | 149 | .collection > header { 150 | flex-direction: column; 151 | align-items: center; 152 | margin-bottom: 17px; 153 | } 154 | 155 | .collection.tech-heroes > header { 156 | margin-bottom: 19px; 157 | } 158 | 159 | .collection > header > img { 160 | margin-right: 0 !important; 161 | margin-left: 0 !important; 162 | } 163 | 164 | .collection h1 { 165 | margin-top: -1px; 166 | margin-right: 0; 167 | padding-right: 0; 168 | font-size: 2.8rem; 169 | } 170 | 171 | .collection header > .button { 172 | margin-top: -2px; 173 | } 174 | 175 | .char-list { 176 | grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 177 | row-gap: 14px; 178 | column-gap: 15px; 179 | } 180 | 181 | .char-list > div { 182 | padding: 15px; 183 | } 184 | 185 | .char-list dt { 186 | margin-top: 1.2rem; 187 | font-size: 1.4rem; 188 | } 189 | 190 | .char-list .title { 191 | margin-right: -15px; 192 | margin-left: -15px; 193 | font-size: 1.4rem; 194 | } 195 | 196 | .char-list .avatar > img { 197 | width: 130px; 198 | height: 130px; 199 | } 200 | 201 | .char-list .modal-opener { 202 | display: none; 203 | } 204 | 205 | #quick-view-backdrop { 206 | display: none; 207 | } 208 | } 209 | -------------------------------------------------------------------------------- /example-vite/src/components/CollectionItem.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Image from './Image'; 4 | import styles from './Collection.module.css'; 5 | 6 | export const CollectionItem = ({ data }) => { 7 | return ( 8 |
9 |
{data.name}
10 |
{data.title}
11 |
12 | {data.avatar.alt} 22 |
23 |
{data.desc}
24 |
25 | See bio and products 26 |
27 |
28 | ); 29 | }; 30 | 31 | export default CollectionItem; 32 | 33 | CollectionItem.propTypes = { 34 | data: PropTypes.object.isRequired 35 | }; 36 | -------------------------------------------------------------------------------- /example-vite/src/components/Collections.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import data from '../../data/collections-data.json'; 3 | import Collection from './Collection'; 4 | 5 | export const Collections = () => { 6 | return ( 7 | <> 8 | {data.collections.map((collection) => { 9 | return ; 10 | })} 11 | 12 | ); 13 | }; 14 | 15 | export default Collections; 16 | -------------------------------------------------------------------------------- /example-vite/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Image from './Image'; 3 | import styles from './Footer.module.css'; 4 | 5 | export const Footer = () => { 6 | return ( 7 | 92 | ); 93 | }; 94 | 95 | export default Footer; 96 | -------------------------------------------------------------------------------- /example-vite/src/components/Footer.module.css: -------------------------------------------------------------------------------- 1 | /* 8. content info 2 | ------------------------------------------------------- */ 3 | 4 | #continfo { 5 | --color-link-background-hover: transparent; 6 | position: relative; 7 | margin-top: 100px; 8 | padding: 44px var(--padding-inline-center-content) 46px; 9 | background-color: #312d32; 10 | } 11 | 12 | #continfo nav { 13 | --text-deco-line: none; 14 | position: absolute; 15 | top: 64px; 16 | right: var(--padding-inline-center-content); 17 | } 18 | 19 | #continfo nav > ul { 20 | --color-link-static: rgba(255, 255, 255, 0.6); 21 | --color-link-hover: #fff; 22 | display: flex; 23 | column-gap: 51px; 24 | font-weight: 700; 25 | font-size: 1.8rem; 26 | } 27 | 28 | #continfo > figure { 29 | position: absolute; 30 | top: 132px; 31 | right: var(--padding-inline-center-content); 32 | } 33 | 34 | #continfo figcaption { 35 | position: absolute; 36 | left: -5000px; 37 | } 38 | 39 | #continfo figure > ul { 40 | display: flex; 41 | column-gap: 30px; 42 | } 43 | 44 | #continfo figure li > a { 45 | /* social links */ 46 | display: flex; 47 | opacity: 0.5; 48 | } 49 | 50 | #continfo figure li > a:is(:hover, :focus) { 51 | opacity: 1; 52 | } 53 | 54 | #continfo > img { 55 | display: block; 56 | margin-bottom: 24px; 57 | } 58 | 59 | #continfo > p { 60 | --color-link-static: #fff; 61 | --color-link-hover: #fff; 62 | --text-deco-color-static: currentcolor; 63 | --text-deco-color-hover: transparent; 64 | margin-right: 300px; 65 | color: #fff; 66 | font-size: 1.4rem; 67 | } 68 | 69 | #continfo p + p { 70 | margin-top: 1.1rem; 71 | } 72 | 73 | /* responsive ( 991px) 74 | ------------------------------------------------------- */ 75 | 76 | @media (max-width: 991px) { 77 | #continfo { 78 | display: flex; 79 | flex-direction: column; 80 | margin-top: 45px; 81 | padding-bottom: 54px; 82 | } 83 | 84 | #continfo nav { 85 | position: static; 86 | align-self: center; 87 | order: 10; 88 | width: min(336px, 100%); 89 | } 90 | 91 | #continfo nav > ul { 92 | justify-content: space-between; 93 | column-gap: 20px; 94 | margin-top: 3.1rem; 95 | font-size: 1.4rem; 96 | } 97 | 98 | #continfo > figure { 99 | position: static; 100 | align-self: center; 101 | order: 11; 102 | margin-top: 2.9rem; 103 | } 104 | 105 | #continfo > p { 106 | margin-right: 0; 107 | font-size: 1.2rem; 108 | } 109 | 110 | #continfo p + p { 111 | margin-top: 1rem; 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /example-vite/src/components/Head.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Helmet from 'react-helmet'; 3 | 4 | export const Head = () => { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | Big Star Collectibles 12 | 13 | 14 | ); 15 | }; 16 | 17 | export default Head; 18 | -------------------------------------------------------------------------------- /example-vite/src/components/Header.module.css: -------------------------------------------------------------------------------- 1 | /* banner 2 | ------------------------------------------------------- */ 3 | 4 | #banner { 5 | --text-deco-line: none; 6 | --color-link-background-hover: transparent; 7 | position: relative; 8 | z-index: 10; 9 | display: flex; 10 | align-items: center; 11 | column-gap: 10px; 12 | padding: 0 30px 0 40px; 13 | min-height: 80px; 14 | background-color: var(--color-purpleviolet); 15 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16); 16 | } 17 | 18 | #banner > a { 19 | position: relative; 20 | display: flex; 21 | } 22 | 23 | #banner nav { 24 | align-self: stretch; 25 | display: flex; 26 | margin: 0 1px 0 auto; 27 | } 28 | 29 | #banner nav::before { 30 | content: ''; 31 | position: absolute; 32 | top: 100%; 33 | left: 0; 34 | opacity: var(--opacity-wrapper-bg, 0); 35 | width: 100%; 36 | height: var(--height-wrapper-bg); 37 | pointer-events: none; 38 | background-color: rgba(255, 255, 255, 0.96); 39 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16); 40 | transition-property: opacity, height; 41 | transition-duration: var(--trans-dur); 42 | } 43 | 44 | #banner nav > ul { 45 | display: flex; 46 | } 47 | 48 | #banner nav > ul > li { 49 | display: flex; 50 | } 51 | 52 | #banner nav > ul > li > a { 53 | --pos-left-bottom-bar: 1rem; 54 | --width-bottom-bar: calc(100% - 2rem); 55 | --color-link-static: rgba(255, 255, 255, 0.72); 56 | --color-link-hover: #fff; 57 | position: relative; 58 | display: flex; 59 | align-items: center; 60 | padding: 0 2rem 0.1rem; 61 | font-weight: 500; 62 | font-size: 1.8rem; 63 | } 64 | 65 | #banner nav > ul > li:is(:hover, :focus-within, .active) > a:not(:only-child) { 66 | color: var(--color-link-hover); 67 | } 68 | 69 | #banner nav > ul > li > a[aria-current] { 70 | color: var(--color-link-hover); 71 | } 72 | 73 | #banner nav > ul > li > a:not(:only-child)::before, 74 | #banner nav ~ a::before, 75 | :is(#banner, #search-widget) > button::before { 76 | content: ''; 77 | position: absolute; 78 | bottom: 0; 79 | left: var(--pos-left-bottom-bar, 0); 80 | opacity: 0; 81 | width: var(--width-bottom-bar, 100%); 82 | border-top: 5px solid #fff; 83 | transition-property: opacity; 84 | transition-duration: var(--trans-dur); 85 | } 86 | 87 | #banner nav ~ a:is(:hover, :focus)::before, 88 | :is(#banner, #search-widget) > button:is(:hover, :focus)::before { 89 | opacity: 1; 90 | } 91 | 92 | #banner nav > ul > li.active > a:not(:only-child)::before { 93 | opacity: 1; 94 | } 95 | 96 | #banner nav li > .wrapper { 97 | position: absolute; 98 | top: 100%; 99 | left: 0; 100 | display: flex; 101 | justify-content: flex-end; 102 | column-gap: var(--width-gutter); 103 | opacity: 0; 104 | padding: 30px var(--padding-inline-center-content) 34px; 105 | width: 100%; 106 | pointer-events: none; 107 | } 108 | 109 | #banner nav li.active > .wrapper { 110 | z-index: 1; 111 | opacity: 1; 112 | } 113 | 114 | #banner nav .wrapper > figure { 115 | width: calc((100% - 2 * var(--width-gutter)) / 3); 116 | } 117 | 118 | #banner nav .wrapper > figure > figcaption { 119 | padding: 0 10px 1.5rem; 120 | color: var(--color-heading); 121 | font-weight: 400; 122 | font-size: 2rem; 123 | border-bottom: 1px solid var(--color-border); 124 | } 125 | 126 | #banner nav .wrapper > figure > ul { 127 | --color-link-static: var(--color-body); 128 | --color-link-hover: var(--color-purpleviolet); 129 | display: grid; 130 | grid-auto-flow: column; 131 | grid-template-rows: repeat(5, 1fr); 132 | grid-template-columns: repeat(2, calc((100% - 12px) / 2)); 133 | column-gap: 12px; 134 | margin-top: 1rem; 135 | } 136 | 137 | #banner nav .wrapper > figure > ul > li > a { 138 | display: block; 139 | padding: 0.6rem 1rem 1rem; 140 | font-size: 2rem; 141 | border-radius: 4px; 142 | } 143 | 144 | #banner nav .wrapper > figure > ul > li > a:is(:hover, :focus) { 145 | background-color: var(--color-whitesmoke); 146 | } 147 | 148 | #banner nav li > figure > figcaption { 149 | position: absolute; 150 | left: -5000px; 151 | } 152 | 153 | #banner nav li > figure > ul { 154 | display: flex; 155 | column-gap: 20px; 156 | padding: 5px 0 0 10px; 157 | } 158 | 159 | #banner nav li > figure li > a { 160 | /* social links */ 161 | display: flex; 162 | fill: #666; 163 | } 164 | 165 | #banner nav li > figure a:is(:hover, :focus) > svg { 166 | fill: #191919; 167 | } 168 | 169 | #banner nav > button { 170 | /* mobile nav panel opener */ 171 | display: none; 172 | } 173 | 174 | #banner nav ~ a, 175 | #banner > button { 176 | position: relative; 177 | align-self: stretch; 178 | display: flex; 179 | align-items: center; 180 | padding: 0 1rem; 181 | } 182 | 183 | #search-widget { 184 | position: relative; 185 | align-self: stretch; 186 | display: flex; 187 | align-items: center; 188 | } 189 | 190 | #search-widget > button { 191 | position: relative; 192 | align-self: stretch; 193 | display: flex; 194 | align-items: center; 195 | padding: 0 1rem; 196 | } 197 | 198 | #search-popup { 199 | position: absolute; 200 | right: -4px; 201 | display: flex; 202 | align-items: center; 203 | opacity: 0; 204 | pointer-events: none; 205 | height: 100%; 206 | } 207 | 208 | #search-popup.active { 209 | opacity: 1; 210 | pointer-events: auto; 211 | } 212 | 213 | #search-popup form > input { 214 | padding: 0 183px 0 19px; 215 | width: 552px; 216 | height: 54px; 217 | color: var(--color-dark); 218 | font-weight: 400; 219 | font-size: 2.2rem; 220 | background-color: #fff; 221 | border: 1px solid var(--color-border); 222 | border-radius: 6px; 223 | } 224 | 225 | #search-popup form > button { 226 | position: absolute; 227 | top: calc(50% - 19px); 228 | right: 64px; 229 | padding: 0 10px 1px; 230 | min-width: 104px; 231 | height: 38px; 232 | color: var(--color-grape); 233 | font-weight: 500; 234 | font-size: 2rem; 235 | border: 2px solid; 236 | border-radius: 36px; 237 | } 238 | 239 | #search-popup form > button:is(:hover, :focus) { 240 | background-color: var(--color-whitesmoke); 241 | } 242 | 243 | #search-popup > button { 244 | position: absolute; 245 | top: calc(50% - 13px); 246 | right: 19px; 247 | display: flex; 248 | opacity: 0.9; 249 | } 250 | 251 | #banner button .num { 252 | position: absolute; 253 | left: 32%; 254 | margin-top: -40px; 255 | padding: 0.3rem 0.4rem 0.1rem; 256 | min-width: 26px; 257 | color: #000; 258 | font-weight: 500; 259 | font-size: 10px; 260 | line-height: 1; 261 | text-align: center; 262 | background-color: var(--color-gold); 263 | border-radius: 20px; 264 | } 265 | 266 | #nav-panel { 267 | display: none; 268 | } 269 | 270 | /* responsive (1024px) 271 | ------------------------------------------------------- */ 272 | 273 | @media (max-width: 1024px) { 274 | #banner nav .arrow { 275 | display: none; 276 | } 277 | } 278 | 279 | @media (max-width: 991px) { 280 | /* 6. banner */ 281 | 282 | #banner { 283 | padding-right: 20px; 284 | padding-left: 20px; 285 | } 286 | 287 | #banner::before { 288 | content: 'abc'; 289 | position: absolute; 290 | top: -5000px; 291 | visibility: hidden; 292 | font-weight: 500; 293 | } 294 | 295 | #banner nav { 296 | align-self: center; 297 | margin-right: 0; 298 | } 299 | 300 | #banner nav::before { 301 | content: none; 302 | } 303 | 304 | #banner nav > ul { 305 | display: none; 306 | } 307 | 308 | #banner nav > button { 309 | display: flex; 310 | } 311 | 312 | #banner nav ~ a, 313 | #banner > button { 314 | display: none; 315 | } 316 | 317 | #search-widget { 318 | display: none; 319 | } 320 | 321 | #nav-panel { 322 | --color-link-static: var(--color-heading); 323 | --color-link-hover: var(--color-heading); 324 | --text-deco-line: none; 325 | --color-link-background-hover: transparent; 326 | position: fixed; 327 | top: 0; 328 | right: 0; 329 | z-index: 100; 330 | display: block; 331 | padding: 64px 30px 33px; 332 | width: 300px; 333 | height: 100%; 334 | overflow: auto; 335 | background-color: var(--color-whitesmoke); 336 | transform: translateX(100%); 337 | transition-property: transform; 338 | } 339 | 340 | .active > #nav-panel { 341 | transform: none; 342 | } 343 | 344 | #nav-panel > button { 345 | /* Close */ 346 | position: absolute; 347 | top: 27px; 348 | right: 20px; 349 | display: flex; 350 | opacity: 0.9; 351 | } 352 | 353 | #nav-panel > ul { 354 | margin-bottom: 29px; 355 | padding-bottom: 25px; 356 | border-bottom: 1px solid var(--color-border); 357 | } 358 | 359 | #nav-panel > ul > li { 360 | margin: 0 -30px; 361 | padding: 0 30px; 362 | } 363 | 364 | #nav-panel > ul > li.active { 365 | background-color: #fff; 366 | } 367 | 368 | #nav-panel > ul > li > a { 369 | display: flex; 370 | justify-content: space-between; 371 | align-items: center; 372 | padding: 10px 0; 373 | font-weight: 500; 374 | font-size: 1.8rem; 375 | } 376 | 377 | #nav-panel > ul > li > a[aria-expanded='true'] { 378 | color: var(--color-purpleviolet); 379 | fill: var(--color-purpleviolet); 380 | } 381 | 382 | #nav-panel a > .icon-chevron-right { 383 | position: relative; 384 | top: 0.1rem; 385 | transition-property: fill, transform; 386 | transition-duration: 350ms; 387 | } 388 | 389 | #nav-panel [aria-expanded='true'] > .icon-chevron-right { 390 | transform: rotate(90deg); 391 | } 392 | 393 | #nav-panel li > .wrapper { 394 | --color-link-static: var(--color-body); 395 | --color-link-hover: var(--color-body); 396 | font-size: 1.6rem; 397 | transition-property: height; 398 | transition-duration: 350ms; 399 | } 400 | 401 | #nav-panel .wrapper > figure:first-child { 402 | padding-top: 0.6rem; 403 | } 404 | 405 | #nav-panel .wrapper > figure + figure { 406 | padding-top: 1.8rem; 407 | } 408 | 409 | #nav-panel .wrapper > figure:last-child { 410 | padding-bottom: 2.9rem; 411 | } 412 | 413 | #nav-panel .wrapper > figure > figcaption { 414 | margin-bottom: 1.6rem; 415 | padding-bottom: 1rem; 416 | color: var(--color-heading); 417 | font-weight: 400; 418 | border-bottom: 1px solid var(--color-border); 419 | } 420 | 421 | #nav-panel .wrapper > figure > figcaption { 422 | margin-bottom: 0.9rem; 423 | padding-bottom: 1rem; 424 | color: var(--color-heading); 425 | font-weight: 400; 426 | border-bottom: 1px solid var(--color-border); 427 | } 428 | 429 | #nav-panel .wrapper > figure > ul > li > a { 430 | display: block; 431 | padding: 0.7rem 0; 432 | } 433 | 434 | #nav-panel .wrapper .arrow { 435 | position: relative; 436 | top: 0.15rem; 437 | } 438 | 439 | #nav-panel li > figure > figcaption { 440 | position: absolute; 441 | left: -5000px; 442 | } 443 | 444 | #nav-panel li > figure > ul { 445 | display: flex; 446 | column-gap: 20px; 447 | margin-top: 1.3rem; 448 | } 449 | 450 | #nav-panel li > figure a { 451 | /* social links */ 452 | display: flex; 453 | fill: #666; 454 | } 455 | 456 | #nav-panel > a, 457 | #search-widget-mobile > button { 458 | display: flex; 459 | align-items: center; 460 | padding: 0.7rem 0; 461 | width: 100%; 462 | color: var(--color-heading); 463 | font-weight: 500; 464 | font-size: 1.8rem; 465 | } 466 | 467 | #nav-panel > :is(a, #search-widget-mobile) + a { 468 | margin-top: 0.6rem; 469 | } 470 | 471 | :is(#nav-panel > a, #search-widget-mobile > button) > img { 472 | margin-right: 16px; 473 | } 474 | 475 | #nav-panel > a > small { 476 | font-weight: 300; 477 | } 478 | 479 | #nav-panel > a > small::before { 480 | content: '\00a0'; 481 | } 482 | 483 | #search-widget-mobile { 484 | position: relative; 485 | } 486 | 487 | #search-popup-mobile { 488 | position: absolute; 489 | top: -3px; 490 | left: 0; 491 | display: flex; 492 | align-items: center; 493 | opacity: 0; 494 | pointer-events: none; 495 | } 496 | 497 | #search-popup-mobile.active { 498 | opacity: 1; 499 | pointer-events: auto; 500 | } 501 | 502 | #search-popup-mobile form > input { 503 | padding: 0 65px 0 17px; 504 | width: 100%; 505 | height: 44px; 506 | color: var(--color-dark); 507 | font-weight: 500; 508 | font-size: 1.8rem; 509 | background-color: #fff; 510 | border: 1px solid var(--color-border); 511 | border-radius: 6px; 512 | } 513 | 514 | #search-popup-mobile form > button { 515 | position: absolute; 516 | top: calc(50% - 16px); 517 | right: 10px; 518 | padding: 0 10px 1px; 519 | width: 48px; 520 | height: 32px; 521 | color: var(--color-grape); 522 | font-weight: 500; 523 | font-size: 2rem; 524 | border: 2px solid; 525 | border-radius: 36px; 526 | } 527 | } 528 | -------------------------------------------------------------------------------- /example-vite/src/components/Image.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const dynImg = (imgData, folder, type) => { 5 | let requestURI; 6 | if (folder) { 7 | requestURI = `${folder}/${imgData.root}.${type}`; 8 | } else { 9 | requestURI = `${imgData.root}.${type}`; 10 | } 11 | return new URL(`../../public/images/${requestURI}`, import.meta.url); 12 | }; 13 | 14 | export const Image = ({ imgData, folder, type }) => { 15 | return ( 16 | {imgData.alt 22 | ); 23 | }; 24 | 25 | export default Image; 26 | 27 | Image.propTypes = { 28 | imgData: PropTypes.object.isRequired, 29 | width: PropTypes.number, 30 | height: PropTypes.number, 31 | alt: PropTypes.string, 32 | folder: PropTypes.string, 33 | type: PropTypes.string.isRequired 34 | }; 35 | -------------------------------------------------------------------------------- /example-vite/src/components/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Head from './Head'; 3 | import Header from './Header'; 4 | import Main from './Main'; 5 | import Collections from './Collections'; 6 | import Footer from './Footer'; 7 | import styles from './Layout.module.css'; 8 | // import '../../public/css/home.css'; 9 | 10 | export const Layout = () => { 11 | return ( 12 | <> 13 | 14 |
15 | Skip to main content 16 |
17 |
18 |
19 | 20 |