├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── main.yml ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── NOTICE ├── README.md ├── app.py ├── docker-command-cheatsheet.txt ├── dockerfile ├── requirements.txt ├── static ├── browserconfig.xml ├── css │ ├── about.css │ ├── cart.css │ ├── character.css │ ├── collection.css │ ├── common.css │ ├── home.css │ ├── plugins.css │ └── product.css ├── favicon-original-512px.png ├── favicon.ico ├── fonts │ └── VesperLibre-Regular.ttf ├── 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 └── js │ ├── main.js │ └── plugins.js ├── templates ├── Cart.html ├── Character-Detail-Blade.html ├── Character-Detail-Delores.html ├── Characters-by-Collection.html ├── Contact-Us.html ├── Product-Detail.html ├── Product-List-Search-Results.html ├── Product-List.html ├── Static-About.html └── index.html └── test └── test.txt /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Codeowners for these exercise files: 2 | # * (asterisk) denotes "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 | -------------------------------------------------------------------------------- /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 | # Docker: Your First Project 2 | This is the repository for the LinkedIn Learning course `Docker: Your First Project`. The full course is available from [LinkedIn Learning][URL-lil-course]. 3 | 4 | ![Docker: Your First Project][URL-lil-thumbnail] 5 | 6 | Docker has a steep learning curve, but is required for most current development environments. Streamlining how you build, share, and run applications can increase your development team’s productivity and let developers focus on the code. This course with instructor Shelley Benhoff provides a step-by-step guide for developers to work with Docker locally. Join Shelley as she takes you through a real-world project and learn how to set up your development environment, write a Dockerfile, build and manage custom images, and run your Docker containers. 7 | 8 | ## Instructions 9 | This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add `/tree/BRANCH_NAME` to the URL to go to the branch you want to access. 10 | 11 | ## Branches 12 | The branches are structured to correspond to the videos in the course. The naming convention is `CHAPTER#_MOVIE#`. As an example, the branch named `02_03` corresponds to the second chapter and the third video in that chapter. 13 | Some branches will have a beginning and an end state. These are marked with the letters `b` for "beginning" and `e` for "end". The `b` branch contains the code as it is at the beginning of the movie. The `e` branch contains the code as it is at the end of the movie. The `main` branch holds the final state of the code when in the course. 14 | 15 | When switching from one exercise files branch to the next after making changes to the files, you may get a message like this: 16 | 17 | error: Your local changes to the following files would be overwritten by checkout: [files] 18 | Please commit your changes or stash them before you switch branches. 19 | Aborting 20 | 21 | To resolve this issue: 22 | 23 | Add changes to git using this command: git add . 24 | Commit changes using this command: git commit -m "some message" 25 | 26 | ## Installing 27 | 1. To use these exercise files, you must have the following installed: 28 | - Docker Desktop 29 | - VSCode 30 | - Git Bash 31 | 2. Clone this repository into your local machine using the Git Bash command `git clone https://github.com/LinkedInLearning/docker-your-first-project-4485003.git` 32 | 3. Switch between branches using the Git Bash command `git checkout CHAPTER#_MOVIE#` 33 | 4. View all available branches using the Git Bash command `git branch` 34 | 35 | ### Instructor 36 | Shelley Benhoff 37 | 38 | 39 | Senior Developer Experience Manager at Docker, Instructor, and Author 40 | 41 | Check out my other courses on [LinkedIn Learning][URL-instructor-home]. 42 | 43 | [URL-lil-course]: https://www.linkedin.com/learning/docker-your-first-project 44 | [URL-lil-thumbnail]: https://media.licdn.com/dms/image/D560DAQHjKrL64jLnaA/learning-public-crop_675_1200/0/1701991509593?e=2147483647&v=beta&t=VwonMpzrnmxJk07lG2SRqLwwR2gqj7vPCsJp51Ryu7k 45 | [URL-instructor-home]: https://www.linkedin.com/learning/instructors/shelley-benhoff 46 | 47 | -------------------------------------------------------------------------------- /app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask, render_template 2 | import os 3 | 4 | app = Flask(__name__) 5 | 6 | @app.route('/') 7 | def index(): 8 | return render_template('index.html') 9 | 10 | @app.route('/Cart.html') 11 | def cart(): 12 | return render_template('Cart.html') 13 | 14 | @app.route('/Character-Detail-Blade.html') 15 | def character_detail_blade(): 16 | return render_template('Character-Detail-Blade.html') 17 | 18 | @app.route('/Character-Detail-Delores.html') 19 | def character_detail_delores(): 20 | return render_template('Character-Detail-Delores.html') 21 | 22 | @app.route('/Characters-by-Collection.html') 23 | def characters_by_collection(): 24 | return render_template('Characters-by-Collection.html') 25 | 26 | @app.route('/Contact-Us.html') 27 | def contact_us(): 28 | return render_template('Contact-Us.html') 29 | 30 | @app.route('/Product-Detail.html') 31 | def product_detail(): 32 | return render_template('Product-Detail.html') 33 | 34 | @app.route('/Product-List-Search-Results.html') 35 | def product_list_search_results(): 36 | return render_template('Product-List-Search-Results.html') 37 | 38 | @app.route('/Product-List.html') 39 | def product_list(): 40 | return render_template('Product-List.html') 41 | 42 | @app.route('/Static-About.html') 43 | def static_about(): 44 | return render_template('Static-About.html') 45 | 46 | if __name__ == '__main__': 47 | port = int(os.environ.get('PORT', 5000)) 48 | app.run(debug=True, host='0.0.0.0', port=port) -------------------------------------------------------------------------------- /docker-command-cheatsheet.txt: -------------------------------------------------------------------------------- 1 | ************************************************************************ 2 | *** This document contains the URLs and commands used in this course *** 3 | ************************************************************************ 4 | 5 | *** 01_02 *** 6 | https://www.docker.com/products/docker-desktop/ 7 | 8 | https://code.visualstudio.com/download 9 | 10 | *** 01_03 *** 11 | https://github.com/LinkedInLearning/docker-your-first-project-4485003 12 | 13 | https://git-scm.com/downloads 14 | 15 | cd c:\projects\docker-your-first-project-4485003 16 | 17 | git clone https://github.com/LinkedInLearning/docker-your-first-project-4485003.git 18 | 19 | git checkout CHAPTER#_MOVIE# 20 | 21 | git branch 22 | 23 | *** 02_01 *** 24 | Code for this video is in the dockerfile 25 | 26 | *** 02_02 *** 27 | docker build [OPTIONS] PATH | URL | - 28 | 29 | https://docs.docker.com/engine/reference/commandline/build/ 30 | 31 | docker build . 32 | 33 | docker build -f [dockerfile] . 34 | 35 | docker build --force-rm=true . 36 | 37 | docker build --rm=true . 38 | 39 | docker build --no-cache . 40 | 41 | docker build --help 42 | 43 | *** 03_01 *** 44 | docker search python 45 | 46 | docker search --filter is-official=true python 47 | 48 | docker search --filter stars=100 python 49 | 50 | docker search --filter is-automated=true python 51 | 52 | docker search --filter is-official=true --filter stars=10 --filter is-automated=false python 53 | 54 | docker search --limit 4 python 55 | 56 | docker search --no-trunc python 57 | 58 | docker search --format "{{.Name}}: {{.Description}}" --no-trunc python 59 | 60 | docker search --format "table {{.Name}}\t{{.IsAutomated}}\t{{.IsOfficial}}\t{{.Description}}\t{{.StarCount}}" python 61 | 62 | docker search --format "table {{.Name}}\t{{.IsOfficial}}\t{{.Description}}\t{{.StarCount}}" --filter is-official=true --filter stars=10 --no-trunc python 63 | 64 | docker search --help 65 | 66 | docker image pull python 67 | 68 | https://hub.docker.com/_/python 69 | 70 | docker image pull python:3.12-rc-bookworm 71 | 72 | docker image pull --help 73 | 74 | *** 03_02 *** 75 | docker image ls [OPTIONS] [REPOSITORY[:TAG]] 76 | 77 | docker image ls --all 78 | 79 | docker image ls --no-trunc 80 | 81 | docker image ls --quiet 82 | 83 | docker image ls --digests 84 | 85 | docker image ls --filter reference=python* 86 | 87 | docker image ls --filter before=python 88 | 89 | docker image ls --filter since=python 90 | 91 | docker image ls --filter dangling=true 92 | 93 | docker image ls --filter label=python* 94 | 95 | docker image ls --format "table {{.ID}}\t{{.Repository}}\t{{.Tag}}\t{{.Size}}\t{{.CreatedSince}}\t{{.CreatedAt}}\t{{.Digest}}" 96 | 97 | docker image ls --help 98 | 99 | https://docs.docker.com/engine/reference/commandline/image_ls/ 100 | 101 | *** 03_03 *** 102 | docker build -t SOURCE_IMAGE[:TAG] . 103 | 104 | docker build -t big-star-collectibles . 105 | 106 | docker build --no-cache -t big-star-collectibles:v1 -t big-star-collectibles . 107 | 108 | docker image ls 109 | 110 | docker tag SOURCE_IMAGE[:TAG] TARGET_IMAGE[:TAG] 111 | 112 | docker tag big-star-collectibles:v1 big-star-collectibles:v1-python 113 | 114 | docker build --no-cache -t big-star-collectibles:v2 . 115 | 116 | docker tag SOURCE_IMAGE_ID TARGET_IMAGE[:TAG] 117 | 118 | LABEL = = = ... 119 | 120 | docker image ls --filter label="com.example.vendor"="Big Star Collectibles" 121 | 122 | *** 03_04 *** 123 | https://hub.docker.com/ 124 | 125 | docker login 126 | 127 | docker tag big-star-collectibles:v2 sbenhoff/big-star-collectibles-repo:big-star-collectibles 128 | 129 | docker push sbenhoff/big-star-collectibles-repo:big-star-collectibles 130 | 131 | docker pull sbenhoff/big-star-collectibles-repo:big-star-collectibles 132 | 133 | *** 03_05 *** 134 | docker image ls 135 | 136 | docker image inspect IMAGE_ID 137 | 138 | docker image inspect --format='{{json .Config.Labels}}' big-star-collectibles:v2 139 | 140 | *** 03_06 *** 141 | docker image ls 142 | 143 | docker rmi [OPTIONS] IMAGE [IMAGE...] 144 | 145 | docker rmi -f big-star-collectibles:v2 146 | 147 | docker rmi -f IMAGE_ID 148 | 149 | docker images --digests 150 | 151 | docker rmi -f sbenhoff/big-star-collectibles@[DIGEST] 152 | 153 | *** 04_01 *** 154 | https://docs.docker.com/engine/reference/commandline/run/ 155 | 156 | docker start [OPTIONS] CONTAINER [CONTAINER...] 157 | 158 | docker start big-star-collectibles:v2 159 | 160 | docker run [OPTIONS] IMAGE[:TAG] [COMMAND] [ARG...] 161 | 162 | docker run -it -d -p 5000:5000 -v ${PWD}:/app/code big-star-collectibles 163 | 164 | http://localhost:5000 165 | 166 | docker stop [OPTIONS] CONTAINER [CONTAINER...] 167 | 168 | docker stop big-star-collectibles:v2 169 | 170 | docker kill [OPTIONS] CONTAINER [CONTAINER...] 171 | 172 | docker kill big-star-collectibles:v2 173 | 174 | *** 04_02 *** 175 | https://docs.docker.com/engine/reference/commandline/ps/ 176 | 177 | docker ps [OPTIONS] 178 | 179 | docker ps 180 | 181 | docker ps -a 182 | 183 | docker ps -n 1 184 | 185 | docker ps -q 186 | 187 | docker ps -s 188 | 189 | docker ps -l 190 | 191 | docker ps --no-trunc 192 | 193 | docker ps --filter label="com.example.vendor"="Big Star Collectibles" 194 | 195 | docker ps -a --filter 'exited=0' 196 | 197 | docker ps --filter ancestor=big-star-collectibles 198 | 199 | docker ps --filter label="com.example.vendor"="Big Star Collectibles" --format json 200 | 201 | docker ps --filter label="com.example.vendor"="Big Star Collectibles" --format "table {{.ID}}\t{{.Names}}" 202 | 203 | * COMMON DOCKER CONTAINER EXIT CODES * 204 | Exit Code 0 Purposely stopped 205 | Exit Code 1 Application error 206 | Exit Code 125 Container failed to run error 207 | Exit Code 126 Command invoke error 208 | Exit Code 127 File or directory not found 209 | Exit Code 128 Invalid argument used on exit 210 | Exit Code 134 Abnormal termination (SIGABRT) 211 | Exit Code 137 Immediate termination (SIGKILL) 212 | Exit Code 139 Segmentation fault (SIGSEGV) 213 | Exit Code 143 Graceful termination (SIGTERM) 214 | Exit Code 255 Exit Status Out Of Range 215 | 216 | *** 04_03 *** 217 | https://docs.docker.com/engine/reference/commandline/inspect/ 218 | 219 | docker inspect [OPTIONS] NAME|ID [NAME|ID...] 220 | 221 | docker ps 222 | 223 | docker inspect [ID] 224 | 225 | docker inspect --format='{{.Config.Image}}' [NAME|ID] 226 | 227 | docker inspect --format='{{.Id}}' [NAME|ID] 228 | 229 | docker inspect --format='{{.LogPath}}' [NAME|ID] 230 | 231 | docker inspect --format='{{json .Config}}' [NAME|ID] 232 | 233 | *** 04_04 *** 234 | https://docs.docker.com/engine/reference/commandline/logs/ 235 | 236 | docker logs [OPTIONS] CONTAINER 237 | 238 | docker logs --tail 1000 -f [NAME|ID] 239 | 240 | docker logs --tail 1000 -f --details [NAME|ID] 241 | 242 | * UTC Format 243 | docker logs --tail 1000 -f --since 2023-12-01T01:00:00Z [NAME|ID] 244 | 245 | docker logs --tail 1000 -f --until 2023-12-01T01:00:00Z [NAME|ID] 246 | 247 | * Relative Format 248 | docker logs --tail 1000 -f --since 60 [NAME|ID] 249 | 250 | docker logs --tail 1000 -f --until 60 [NAME|ID] 251 | 252 | docker logs --tail 1000 -f --timestamps [NAME|ID] 253 | 254 | *** 04_05 *** 255 | docker volume create big-star-collectibles-vol 256 | 257 | docker volume ls 258 | 259 | docker volume inspect big-star-collectibles-vol 260 | 261 | docker run -it -d -p 5000:5000 -v big-star-collectibles-vol:/app/data sbenhoff/big-star-collectibles-repo:big-star-collectibles 262 | 263 | docker volume rm big-star-collectibles-vol 264 | 265 | docker run -it -d -p 5000:5000 -v "$(PWD)/test"/target:/app/test sbenhoff/big-star-collectibles-repo:big-star-collectibles 266 | 267 | docker run -it -d -p 5000:5000 --mount type=bind,source="$(PWD)/test",target=/app/test sbenhoff/big-star-collectibles-repo:big-star-collectibles 268 | 269 | *** 04_06 *** 270 | docker image prune 271 | 272 | docker image prune -a -f 273 | 274 | docker image prune -a -f --filter label="com.example.vendor"="Big Star Collectibles" 275 | 276 | docker container prune 277 | 278 | docker volume prune -f --filter label="com.example.vendor"="Big Star Collectibles" 279 | 280 | docker system prune --volumes -f -------------------------------------------------------------------------------- /dockerfile: -------------------------------------------------------------------------------- 1 | # Use an official Python runtime as the base image 2 | FROM python:3.12-rc-bookworm 3 | 4 | #VOLUME /app/data 5 | 6 | # Set the working directory in the container to /app 7 | WORKDIR /app 8 | 9 | # Copy the current directory contents into the container at /app 10 | COPY . /app 11 | 12 | # Install the required packages 13 | RUN pip install --no-cache-dir -r requirements.txt 14 | 15 | # Set the environment variable for Flask 16 | ENV FLASK_APP=app.py 17 | 18 | # Add labels to the image 19 | # LABEL Formatting Option 1 20 | LABEL "com.example.vendor"="Big Star Collectibles" 21 | LABEL version="1.0" 22 | LABEL description="The Big Star Collectibles Website \ 23 | using the Python base image." 24 | 25 | # LABEL Formatting Option 2 26 | # LABEL "com.example.vendor"="Big Star Collectibles" version="1.0" description="The Big Star Collectibles Website \ 27 | # using the Python base image." 28 | 29 | # LABEL Formatting Option 3 30 | # LABEL "com.example.vendor"="Big Star Collectibles" \ 31 | # version="1.0" \ 32 | # description="The Big Star Collectibles Website \ 33 | # using the Python base image." 34 | 35 | # Run the command to start the Flask application 36 | CMD ["flask", "run", "--host=0.0.0.0"] -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | Flask==2.3.3 -------------------------------------------------------------------------------- /static/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | #ffffff 9 | 10 | 11 | -------------------------------------------------------------------------------- /static/css/about.css: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------- 2 | 3 | Title : Big Star Collectibles 4 | Usage : about pages 5 | Edited: 2022-09-22 6 | 7 | ------------------------------------------------------- 8 | 9 | 1. wrapper 10 | 2. about pages content 11 | 2.1. Contact us 12 | 3. category navigation 13 | 4. responsive ( 991px) 14 | 15 | -------------------------------------------------------*/ 16 | 17 | 18 | 19 | /* 1. wrapper 20 | -------------------------------------------------------*/ 21 | 22 | #wrapper-about { 23 | display: flex; 24 | flex-direction: row-reverse; 25 | justify-content: space-between; 26 | align-items: flex-start; 27 | margin: 0 auto; 28 | padding: 100px 0 50px; 29 | width: var(--width-center-section); 30 | } 31 | 32 | 33 | 34 | /* 2. about pages content 35 | -------------------------------------------------------*/ 36 | 37 | #wrapper-about > section { 38 | width: calc(100% - 300px); 39 | } 40 | 41 | #wrapper-about > section:not(#contact) { 42 | font-size: 2rem; 43 | } 44 | 45 | #wrapper-about section:not(#contact) > img { 46 | display: block; 47 | margin: 0 auto 46px; 48 | text-align: center; 49 | } 50 | 51 | #wrapper-about > section h1 { 52 | font-weight: 400; 53 | font-size: 4rem; 54 | } 55 | 56 | #wrapper-about > section:not(#contact) h1 ~ h1 { 57 | margin-top: 5.5rem; 58 | } 59 | 60 | #wrapper-about > section:not(#contact) h1 ~ h1 + p { 61 | margin-top: 0.6rem; 62 | } 63 | 64 | #wrapper-about > section:not(#contact) > section:first-of-type, 65 | #wrapper-about > section:not(#contact) > h2:first-of-type { 66 | margin-top: -0.6rem; 67 | } 68 | 69 | #wrapper-about > section:not(#contact) h2 { 70 | margin-top: 5.2rem; 71 | font-weight: 300; 72 | font-size: 3.2rem; 73 | } 74 | 75 | #wrapper-about > section:not(#contact) p { 76 | margin-top: 0.9rem; 77 | } 78 | 79 | #wrapper-about > section:not(#contact) ul, 80 | #wrapper-about > section:not(#contact) ol { 81 | counter-reset: item-number; 82 | margin-top: 0.9rem; 83 | padding-left: 3rem; 84 | } 85 | 86 | #wrapper-about > section:not(#contact) li { 87 | position: relative; 88 | } 89 | 90 | #wrapper-about > section:not(#contact) ul > li::before { 91 | content: ""; 92 | position: absolute; 93 | top: 1rem; 94 | left: -1.8rem; 95 | width: 0.6rem; 96 | height: 0.6rem; 97 | background-color: var(--color-body); 98 | border-radius: 50%; 99 | clip-path: circle(50%); 100 | } 101 | 102 | #wrapper-about > section:not(#contact) ol > li::before { 103 | content: counter(item-number) "."; 104 | counter-increment: item-number; 105 | position: absolute; 106 | top: 0.09rem; 107 | right: calc(100% + 0.7rem); 108 | color: var(--color-dark); 109 | font-weight: 700; 110 | font-family: Roboto, sans-serif; 111 | text-align: right; 112 | } 113 | 114 | 115 | 116 | /* 2.1. Contact us 117 | -------------------------------------------------------*/ 118 | 119 | #contact { 120 | display: grid; 121 | grid-template-columns: 1fr 260px; 122 | grid-template-rows: auto 1fr; 123 | grid-template-areas: 124 | "left-col hq" 125 | "left-col retail"; 126 | column-gap: 40px; 127 | } 128 | 129 | #contact > .wrapper { 130 | grid-area: left-col; 131 | } 132 | 133 | #contact .wrapper > p { 134 | margin-top: 1.9rem; 135 | font-size: 2rem; 136 | } 137 | 138 | #contact form { 139 | margin-top: 4rem; 140 | } 141 | 142 | #contact form > div + div, 143 | #contact form > :is(div, fieldset) + fieldset { 144 | margin-top: 3rem; 145 | } 146 | 147 | #contact fieldset > div + div { 148 | margin-top: 1.1rem; 149 | } 150 | 151 | #contact label[for="upload"] { 152 | display: inline-block; 153 | margin-top: 56px; 154 | } 155 | 156 | #contact .drop-zone { 157 | display: flex; 158 | flex-direction: column; 159 | justify-content: center; 160 | align-items: center; 161 | margin-top: 1.4rem; 162 | padding: 24px 20px 20px; 163 | min-height: 140px; 164 | background-color: var(--color-whitesmoke); 165 | border: 1px dashed var(--color-border); 166 | border-radius: 6px; 167 | } 168 | 169 | #contact .dragged-over { 170 | background-color: #EBDAED; 171 | border-color: var(--color-purpleviolet); 172 | } 173 | 174 | #contact .drop-zone > p { 175 | font-weight: 500; 176 | font-size: 2rem; 177 | } 178 | 179 | #contact .drop-zone > .wrapper { 180 | position: relative; 181 | margin-top: 1.5rem; 182 | } 183 | 184 | #upload { 185 | position: absolute; 186 | top: 0; 187 | left: 0; 188 | opacity: 0; 189 | width: 100%; 190 | height: 100%; 191 | cursor: pointer; 192 | } 193 | 194 | #label-upload { 195 | display: flex; 196 | justify-content: center; 197 | align-items: center; 198 | padding: 0 20px 2px; 199 | min-width: 146px; 200 | min-height: 44px; 201 | font-weight: 400; 202 | font-size: 2rem; 203 | text-align: center; 204 | background-color: #EFEFEF; 205 | border: 1px solid #767676; 206 | border-radius: 4px; 207 | transition-property: color, background-color; 208 | } 209 | 210 | .wrapper:hover > #label-upload { 211 | color: var(--color-dark); 212 | border-color: var(--color-dark); 213 | } 214 | 215 | .wrapper:not(:hover) :focus:not(.no-outline) + #label-upload { 216 | box-shadow: 0 0 0 2px var(--color-dark); 217 | } 218 | 219 | #contact form .button { 220 | margin-top: 3.4rem; 221 | width: 100%; 222 | } 223 | 224 | #hq { 225 | grid-area: hq; 226 | } 227 | 228 | #hq h2 { 229 | position: absolute; 230 | left: -5000px; 231 | } 232 | 233 | #hq [itemprop="name"], 234 | #hq + section h2 { 235 | display: inline-block; 236 | margin-bottom: 1.1rem; 237 | color: var(--color-heading); 238 | font-weight: 500; 239 | font-size: 2.4rem; 240 | } 241 | 242 | #contact [itemprop="address"] { 243 | display: block; 244 | font-size: 2rem; 245 | } 246 | 247 | :is(#hq, #hq + section) a[href^="tel"] { 248 | --color-link-static: var(--color-body); 249 | font-size: 2rem; 250 | } 251 | 252 | #hq figure { 253 | --color-link-background-hover: transparent; 254 | margin-top: 2.9rem; 255 | padding: 1.2rem 0; 256 | border: solid var(--color-border); 257 | border-width: 1px 0; 258 | } 259 | 260 | #hq figcaption { 261 | color: var(--color-heading); 262 | font-weight: 500; 263 | font-size: 2rem; 264 | } 265 | 266 | #hq figure > ul { 267 | display: flex; 268 | column-gap: 30px; 269 | margin-top: 1.2rem; 270 | } 271 | 272 | #hq figure li > a { /* social links */ 273 | display: block; 274 | fill: #666; 275 | } 276 | 277 | #hq figure a:is(:hover, :focus) > svg { 278 | fill: #191919; 279 | } 280 | 281 | #hq + section { 282 | grid-area: retail; 283 | margin-top: 3.1rem; 284 | } 285 | 286 | #hq + section dt { 287 | color: var(--color-heading); 288 | font-weight: 400; 289 | font-size: 2rem; 290 | } 291 | 292 | #hq + section dl > div + div { 293 | margin-top: 2.5rem; 294 | } 295 | 296 | 297 | 298 | /* 3. category navigation 299 | -------------------------------------------------------*/ 300 | 301 | nav[aria-label="Category"] { 302 | --color-link-static: var(--color-dark); 303 | --color-link-hover: var(--color-purpleviolet); 304 | --text-deco-line: none; 305 | --color-link-background-hover: transparent; 306 | position: sticky; 307 | top: 50px; 308 | flex-shrink: 0; 309 | width: 260px; 310 | border-bottom: 1px solid #ccc; 311 | } 312 | 313 | [aria-label="Category"] li { 314 | border-top: 1px solid #ccc; 315 | } 316 | 317 | [aria-label="Category"] a { 318 | display: block; 319 | padding: 1.5rem 30px 1.6rem 0; 320 | cursor: pointer; 321 | font-size: 1.6rem; 322 | } 323 | 324 | [aria-label="Category"] a[aria-current] { 325 | font-weight: 500; 326 | } 327 | 328 | 329 | 330 | /* 4. responsive ( 991px) 331 | -------------------------------------------------------*/ 332 | 333 | @media (max-width: 991px) { 334 | 335 | /* 1. wrapper */ 336 | 337 | #wrapper-about { 338 | display: block; 339 | } 340 | 341 | 342 | /* 2. about pages content */ 343 | 344 | #wrapper-about > section { 345 | width: auto; 346 | } 347 | 348 | #wrapper-about > section:not(#contact) { 349 | font-size: 1.6rem; 350 | } 351 | 352 | #wrapper-about section:not(#contact) > img { 353 | margin-bottom: 45px; 354 | } 355 | 356 | #wrapper-about > section h1 { 357 | padding-bottom: 0.1rem; 358 | font-size: 3.6rem; 359 | } 360 | 361 | #wrapper-about > section:not(#contact) h1 ~ h1 { 362 | margin-top: 4.9rem; 363 | } 364 | 365 | #wrapper-about > section:not(#contact) h2 { 366 | margin-top: 4.7rem; 367 | font-size: 2.8rem; 368 | } 369 | 370 | #wrapper-about > section:not(#contact) ul, 371 | #wrapper-about > section:not(#contact) ol { 372 | padding-left: 2.4rem; 373 | } 374 | 375 | #wrapper-about > section:not(#contact) ul > li::before { 376 | top: 0.9rem; 377 | left: -1.4rem; 378 | width: 0.4rem; 379 | height: 0.4rem; 380 | } 381 | 382 | #wrapper-about > section:not(#contact) ol > li::before { 383 | right: calc(100% + 0.55rem); 384 | } 385 | 386 | 387 | /* 2.1. Contact us */ 388 | 389 | #contact { 390 | display: block; 391 | margin-top: -59px; 392 | } 393 | 394 | #contact .wrapper > h1 { 395 | font-size: 4rem; 396 | } 397 | 398 | #contact .wrapper > p { 399 | margin-top: 1.8rem; 400 | } 401 | 402 | #contact label[for="upload"] { 403 | margin-top: 64px; 404 | } 405 | 406 | #contact .drop-zone { 407 | padding-top: 16px; 408 | } 409 | 410 | #contact form .button { 411 | margin-top: 2.5rem; 412 | } 413 | 414 | #hq { 415 | grid-area: hq; 416 | margin-top: 10.1rem; 417 | } 418 | 419 | 420 | /* 3. category navigation */ 421 | 422 | nav[aria-label="Category"] { 423 | display: none; 424 | } 425 | 426 | } -------------------------------------------------------------------------------- /static/css/cart.css: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------- 2 | 3 | Title : Big Star Collectibles 4 | Usage : My Shopping Cart page 5 | Edited: 2022-09-10 6 | 7 | ------------------------------------------------------- 8 | 9 | 1. cart 10 | 2. responsive ( 991px) 11 | 3. responsive ( 767px) 12 | 13 | -------------------------------------------------------*/ 14 | 15 | 16 | 17 | /* 1. cart 18 | -------------------------------------------------------*/ 19 | 20 | #cart { 21 | margin: 0 auto; 22 | padding-top: 56px; 23 | width: var(--width-center-section); 24 | } 25 | 26 | #cart h1 { 27 | margin-bottom: 60px; 28 | padding-bottom: 3rem; 29 | font-weight: 400; 30 | font-size: 2.6rem; 31 | border-bottom: 1px solid var(--color-border); 32 | } 33 | 34 | #cart h1 > small { 35 | margin-left: 0.2rem; 36 | color: var(--color-gray); 37 | font-size: 2rem; 38 | } 39 | 40 | #cart > form { 41 | display: flex; 42 | justify-content: space-between; 43 | align-items: flex-start; 44 | } 45 | 46 | #cart table:first-of-type { /* Items in cart */ 47 | width: min(680px, 100% - 420px); 48 | } 49 | 50 | #cart table:first-of-type > caption { 51 | position: absolute; 52 | left: -5000px; 53 | } 54 | 55 | #cart thead { 56 | position: absolute; 57 | left: -5000px; 58 | } 59 | 60 | #cart table:first-of-type tbody > tr { 61 | display: grid; 62 | grid-template-columns: 160px 40px auto 40px 1fr; 63 | grid-template-rows: auto auto auto 1fr; 64 | grid-template-areas: 65 | "Image . Name . Total" 66 | "Image . Details . Total" 67 | "Image . Quantity . Total" 68 | "Image . Action . Total"; 69 | margin-bottom: 40px; 70 | } 71 | 72 | #cart tr .image { 73 | grid-area: Image; 74 | } 75 | 76 | #cart tr .image > a { 77 | position: relative; 78 | display: block; 79 | padding-top: 100%; 80 | width: 100%; 81 | overflow: hidden; 82 | background-color: var(--color-whitesmoke); 83 | border-radius: 4px; 84 | } 85 | 86 | #cart tr .image img { 87 | position: absolute; 88 | top: 0; 89 | left: 0; 90 | width: 100%; 91 | height: 100%; 92 | } 93 | 94 | #cart tr .name { 95 | --color-link-static: var(--color-heading); 96 | --color-link-hover: var(--color-heading); 97 | --text-deco-line: none; 98 | --color-link-background-hover: transparent; 99 | grid-area: Name; 100 | padding-top: 0.1rem; 101 | font-weight: 400; 102 | font-size: 2.6rem; 103 | } 104 | 105 | #cart tr .dets { 106 | grid-area: Details; 107 | margin-top: -0.3rem; 108 | font-size: 1.6rem; 109 | } 110 | 111 | #cart tr .qty { 112 | grid-area: Quantity; 113 | display: flex; 114 | align-items: center; 115 | padding-top: 2.1rem; 116 | font-size: 1.6rem; 117 | } 118 | 119 | #cart tr .qty::before { 120 | content: "Quantity:"; 121 | margin-right: 20px; 122 | font-weight: 700; 123 | font-size: 1.6rem; 124 | } 125 | 126 | #cart tr .total { 127 | grid-area: Total; 128 | color: var(--color-dark); 129 | font-weight: 400; 130 | font-size: 2.6rem; 131 | text-align: right; 132 | } 133 | 134 | #cart tr .action { 135 | grid-area: Action; 136 | padding-top: 0.7rem; 137 | font-size: 1.6rem; 138 | } 139 | 140 | #cart table + table { /* Order summary */ 141 | width: 380px; 142 | color: var(--color-heading); 143 | border-collapse: separate; 144 | border: solid var(--color-border); 145 | border-width: 0 1px 1px; 146 | border-radius: 0 0 4px 4px; 147 | } 148 | 149 | #cart table + table caption { 150 | padding: 20px 19px 0; 151 | font-weight: 400; 152 | font-size: 2.6rem; 153 | text-align: left; 154 | border: solid var(--color-border); 155 | border-width: 1px 1px 0; 156 | border-radius: 4px 4px 0 0; 157 | } 158 | 159 | #cart table + table caption::after { 160 | content: ""; 161 | display: block; 162 | margin: 1.1rem 0 20px; 163 | border-top: 1px solid var(--color-border); 164 | } 165 | 166 | #cart table + table tbody th { 167 | vertical-align: baseline; 168 | padding: 10px 0 10px 19px; 169 | font-weight: 300; 170 | font-size: 2rem; 171 | text-align: left; 172 | } 173 | 174 | #cart table + table th > small { 175 | display: block; 176 | font-size: 1.4rem; 177 | } 178 | 179 | #cart table + table tbody td { 180 | vertical-align: baseline; 181 | padding: 0 19px 0 9px; 182 | font-weight: 400; 183 | font-size: 2rem; 184 | text-align: right; 185 | } 186 | 187 | #cart table + table tfoot :first-child > th { 188 | vertical-align: top; 189 | padding: 18px 0 10px 19px; 190 | font-weight: 300; 191 | font-size: 2.6rem; 192 | text-align: left; 193 | } 194 | 195 | #cart table + table tfoot :first-child > td { 196 | vertical-align: top; 197 | padding: 18px 19px 18px 9px; 198 | font-weight: 400; 199 | font-size: 2.6rem; 200 | text-align: right; 201 | } 202 | 203 | #cart table + table tfoot :first-child > th::before, 204 | #cart table + table tfoot :first-child > td::before { 205 | content: ""; 206 | display: block; 207 | margin-bottom: 29px; 208 | border-top: 1px solid var(--color-border); 209 | } 210 | 211 | #cart table + table tfoot :first-child > th::before { 212 | margin-right: -22px; 213 | width: calc(100% + 22px); 214 | } 215 | 216 | #cart table + table tfoot :last-child > td { 217 | padding: 0 19px 35px; 218 | } 219 | 220 | #cart table + table tfoot :last-child > td::before { 221 | content: ""; 222 | display: block; 223 | margin: 9px 0 30px; 224 | border-top: 1px solid var(--color-border); 225 | } 226 | 227 | #cart table + table tfoot td > .button { 228 | width: 100%; 229 | } 230 | 231 | #cart table + table tfoot td > p { 232 | margin-top: 3rem; 233 | font-size: 2rem; 234 | text-align: center; 235 | } 236 | 237 | 238 | 239 | /* 2. responsive ( 991px) 240 | -------------------------------------------------------*/ 241 | 242 | @media (max-width: 991px) { 243 | 244 | /* 1. cart */ 245 | 246 | #cart { 247 | padding-top: 41px; 248 | padding-bottom: 61px; 249 | width: auto; 250 | } 251 | 252 | #cart h1 { 253 | margin-bottom: 30px; 254 | padding-right: var(--dist-min-cont-edge); 255 | padding-bottom: 1.8rem; 256 | padding-left: var(--dist-min-cont-edge); 257 | } 258 | 259 | #cart > form { 260 | display: block; 261 | } 262 | 263 | #cart table:first-of-type { /* Items in cart */ 264 | width: 100%; 265 | } 266 | 267 | #cart table:first-of-type tbody > tr { 268 | padding-right: var(--dist-min-cont-edge); 269 | padding-left: var(--dist-min-cont-edge); 270 | } 271 | 272 | #cart table + table { /* Order summary */ 273 | margin: 20px auto 0; 274 | width: var(--width-center-section); 275 | } 276 | 277 | } 278 | 279 | 280 | 281 | /* 3. responsive ( 767px) 282 | -------------------------------------------------------*/ 283 | 284 | @media (max-width: 767px) { 285 | 286 | /* 1. cart */ 287 | 288 | #cart table:first-of-type tbody > tr { 289 | margin-bottom: 27px; 290 | grid-template-columns: 80px 20px auto 20px 1fr; 291 | } 292 | 293 | #cart table:first-of-type tbody > tr + tr { 294 | padding-top: 30px; 295 | border-top: 1px solid var(--color-border); 296 | } 297 | 298 | #cart tr .name { 299 | padding-top: 0; 300 | font-size: 1.95rem; 301 | } 302 | 303 | #cart tr .dets { 304 | margin-top: 0.1rem; 305 | font-size: 1.2rem; 306 | } 307 | 308 | #cart tr .qty { 309 | padding-top: 1.4rem; 310 | } 311 | 312 | #cart tr .qty::before { 313 | margin-right: 15px; 314 | font-size: 1.2rem; 315 | } 316 | 317 | #cart tr .qty .qty-widget > svg { 318 | top: 0; 319 | width: 24px; 320 | height: 24px; 321 | } 322 | 323 | #cart tr .qty .qty-widget > input { 324 | width: 37px; 325 | height: 21px; 326 | font-size: 1.65rem; 327 | } 328 | 329 | #cart tr .total { 330 | font-size: 1.95rem; 331 | } 332 | 333 | #cart tr .action { 334 | padding-top: 0.9rem; 335 | font-size: 1.2rem; 336 | } 337 | 338 | #cart table + table { /* Order summary */ 339 | margin-top: 34px; 340 | } 341 | 342 | #cart table + table caption { 343 | padding-top: 18px; 344 | padding-right: 17px; 345 | padding-left: 17px; 346 | } 347 | 348 | #cart table + table caption::after { 349 | margin-top: 1.4rem; 350 | margin-bottom: 18px; 351 | } 352 | 353 | #cart table + table tbody th { 354 | padding-top: 9px; 355 | padding-bottom: 9px; 356 | padding-left: 17px; 357 | font-size: 1.7rem; 358 | } 359 | 360 | #cart table + table th > small { 361 | margin-top: -1px; 362 | font-size: 1.2rem; 363 | } 364 | 365 | #cart table + table tbody td { 366 | padding-right: 17px; 367 | font-size: 1.7rem; 368 | } 369 | 370 | #cart table + table tfoot :first-child > th { 371 | padding-top: 19px; 372 | padding-left: 17px; 373 | font-size: 2.2rem; 374 | } 375 | 376 | #cart table + table tfoot :first-child > td { 377 | padding-top: 19px; 378 | padding-right: 17px; 379 | font-size: 2.2rem; 380 | } 381 | 382 | #cart table + table tfoot :first-child > th::before, 383 | #cart table + table tfoot :first-child > td::before { 384 | margin-bottom: 24px; 385 | } 386 | 387 | #cart table + table tfoot :last-child > td { 388 | padding-right: 17px; 389 | padding-bottom: 36px; 390 | padding-left: 17px; 391 | } 392 | 393 | #cart table + table tfoot :last-child > td::before { 394 | margin-top: 7px; 395 | margin-bottom: 27px; 396 | } 397 | 398 | #cart table + table tfoot td > .button { 399 | font-size: 1.939rem; 400 | height: 53px; 401 | } 402 | 403 | #cart table + table tfoot td > p { 404 | margin-top: 2.7rem; 405 | font-size: 1.763rem; 406 | } 407 | 408 | } -------------------------------------------------------------------------------- /static/css/character.css: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------- 2 | 3 | Title : Big Star Collectibles 4 | Usage : character detail page 5 | Edited: 2022-09-09 6 | 7 | ------------------------------------------------------- 8 | 9 | 1. character 10 | 2. responsive (1024px) 11 | 3. responsive ( 991px) 12 | 13 | -------------------------------------------------------*/ 14 | 15 | 16 | 17 | /* 1. character 18 | -------------------------------------------------------*/ 19 | 20 | #character { 21 | position: relative; 22 | padding: 60px var(--padding-inline-center-content) 70px; 23 | min-height: 560px; 24 | background-color: var(--color-whitesmoke); 25 | } 26 | 27 | #character > .wrapper { 28 | position: absolute; 29 | bottom: 0; 30 | right: var(--padding-inline-center-content); 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | padding: 55px 0 55px 20px; 35 | width: calc((100% - 2 * var(--padding-inline-center-content)) * 0.33898); 36 | height: 100%; 37 | } 38 | 39 | #character .wrapper > img { 40 | max-height: 100%; 41 | } 42 | 43 | #character .wrapper > img[alt*="Blade"] { 44 | margin-bottom: 3%; 45 | padding-left: 3.29%; 46 | } 47 | 48 | #character blockquote { 49 | position: absolute; 50 | bottom: 147px; 51 | right: 100%; 52 | padding: 30px 30px 24px; 53 | width: 250px; 54 | min-height: 120px; 55 | color: var(--color-dark); 56 | font-size: 2.6rem; 57 | font-family: "Vesper Libre", serif; 58 | background-color: #fff; 59 | border-radius: 20px; 60 | } 61 | 62 | #character blockquote::before { 63 | content: ""; 64 | position: absolute; 65 | bottom: calc(100% - 1px); 66 | right: 0; 67 | width: 56px; 68 | height: 31px; 69 | background: 0 0 / 100% 100% no-repeat url(../images/quote-tail-top-right.svg); 70 | } 71 | 72 | #character > header { 73 | position: relative; 74 | margin-right: 33.898%; 75 | min-height: 102px; 76 | } 77 | 78 | #character header > img { 79 | position: absolute; 80 | right: 0; 81 | } 82 | 83 | #character header > img[alt*="Binaryville"] { 84 | top: -8px; 85 | } 86 | 87 | #character header > img[alt*="Monsters"] { 88 | top: 25px; 89 | } 90 | 91 | #character hgroup { 92 | margin-right: 220px; 93 | } 94 | 95 | #character h1 { 96 | font-weight: 400; 97 | font-size: 6rem; 98 | } 99 | 100 | #character hgroup > p { 101 | margin-top: 0.2rem; 102 | font-size: 2rem; 103 | } 104 | 105 | #character > p { 106 | margin: 1.1rem 33.898% 0 0; 107 | font-size: 1.6rem; 108 | } 109 | 110 | #character dl { 111 | display: table; 112 | margin-top: 3.1rem; 113 | font-size: 1.4rem; 114 | } 115 | 116 | #character dl > div { 117 | position: relative; 118 | display: table-row; 119 | } 120 | 121 | #character dl > div + div dt, 122 | #character dl > div + div dd { 123 | padding-top: 0.85rem; 124 | } 125 | 126 | #character dt { 127 | display: table-cell; 128 | padding-right: 20px; 129 | min-width: calc(18rem + 20px); 130 | font-weight: 400; 131 | color: var(--color-heading); 132 | } 133 | 134 | #character dt::after { 135 | content: ":"; 136 | } 137 | 138 | #character dd { 139 | display: table-cell; 140 | } 141 | 142 | 143 | 144 | /* 2. responsive (1024px) 145 | -------------------------------------------------------*/ 146 | 147 | @media (max-width: 1024px) { 148 | 149 | /* 1. character */ 150 | 151 | #character { 152 | padding-top: 0; 153 | } 154 | 155 | #character > .wrapper { 156 | position: relative; 157 | right: auto; 158 | margin-left: max(140px, 41.791%); 159 | padding-top: 60px; 160 | padding-bottom: 100px; 161 | padding-left: 0; 162 | width: auto; 163 | height: 550px; 164 | } 165 | 166 | #character blockquote { 167 | bottom: 200px; 168 | } 169 | 170 | #character > header { 171 | margin-right: 0; 172 | } 173 | 174 | #character hgroup { 175 | margin-right: 0; 176 | } 177 | 178 | #character > p { 179 | margin-right: 0; 180 | } 181 | 182 | } 183 | 184 | 185 | 186 | /* 3. responsive ( 991px) 187 | -------------------------------------------------------*/ 188 | 189 | @media (max-width: 991px) { 190 | 191 | /* 1. character */ 192 | 193 | #character { 194 | padding-top: 0; 195 | padding-bottom: 38px; 196 | } 197 | 198 | #character > .wrapper { 199 | margin-right: auto; 200 | margin-left: auto; 201 | padding-top: 30px; 202 | padding-bottom: 10px; 203 | padding-left: 166px; 204 | max-width: 335px; 205 | height: 240px; 206 | } 207 | 208 | #character .wrapper > img { 209 | padding-left: 0 !important; 210 | } 211 | 212 | #character blockquote { 213 | bottom: 68px; 214 | right: auto; 215 | left: 0; 216 | padding: 17px 17px 13px; 217 | width: 140px; 218 | min-height: 67px; 219 | font-size: 1.5rem; 220 | line-height: 1.275; 221 | border-radius: 12px; 222 | } 223 | 224 | #character blockquote::before { 225 | width: 32px; 226 | height: 18px; 227 | } 228 | 229 | #character > header { 230 | min-height: 0; 231 | } 232 | 233 | #character header > img { 234 | display: none; 235 | } 236 | 237 | #character hgroup { 238 | margin-right: 0; 239 | } 240 | 241 | #character h1 { 242 | font-size: 4.2rem; 243 | } 244 | 245 | #character hgroup > p { 246 | margin-top: 0.4rem; 247 | font-size: 1.6rem; 248 | } 249 | 250 | #character > p { 251 | margin-top: 1.2rem; 252 | font-size: 1.4rem; 253 | line-height: 1.3; 254 | } 255 | 256 | #character dt { 257 | padding-right: 17px; 258 | min-width: 0; 259 | } 260 | 261 | } -------------------------------------------------------------------------------- /static/css/collection.css: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------- 2 | 3 | Title : Big Star Collectibles 4 | Usage : characters by collection page 5 | Edited: 2022-09-07 6 | 7 | ------------------------------------------------------- 8 | 9 | 1. collection 10 | 2. responsive ( 991px) 11 | 12 | -------------------------------------------------------*/ 13 | 14 | 15 | 16 | /* 1. collection 17 | -------------------------------------------------------*/ 18 | 19 | #collection { 20 | --color-link-background-hover: transparent; 21 | margin: 0 auto; 22 | padding: 80px 0 31px; 23 | width: var(--width-center-section); 24 | } 25 | 26 | #collection > header { 27 | position: relative; 28 | display: flex; 29 | justify-content: center; 30 | } 31 | 32 | #collection nav { 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 100%; 38 | display: flex; 39 | justify-content: space-between; 40 | align-items: center; 41 | pointer-events: none; 42 | } 43 | 44 | #collection nav > a { 45 | display: flex; 46 | align-items: center; 47 | column-gap: 21px; 48 | pointer-events: auto; 49 | } 50 | 51 | #collection nav a > img:not([src*="chevron"]) { 52 | opacity: 0.4; 53 | } 54 | 55 | #collection nav a:is(:hover, :focus) > img:not([src*="chevron"]) { 56 | opacity: 1; 57 | } 58 | 59 | #collection nav a + a > img + img { /* the second left-pointing chevron */ 60 | transform: scaleX(-1); 61 | } 62 | 63 | #collection header + p { 64 | margin: 36px 0 53px; 65 | padding: 40px 60px; 66 | min-height: 19rem; 67 | color: #fff; 68 | font-size: 2rem; 69 | background-color: #312D32; 70 | border-radius: 8px; 71 | } 72 | 73 | 74 | 75 | /* 2. responsive ( 991px) 76 | -------------------------------------------------------*/ 77 | 78 | @media (max-width: 991px) { 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | } -------------------------------------------------------------------------------- /static/css/home.css: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------- 2 | 3 | Title : Big Star Collectibles 4 | Usage : homepage 5 | Edited: 2022-09-30 6 | 7 | ------------------------------------------------------- 8 | 9 | 1. hero 10 | 2. collections 11 | 3. responsive ( 991px) 12 | 13 | -------------------------------------------------------*/ 14 | 15 | 16 | 17 | /* 1. hero 18 | -------------------------------------------------------*/ 19 | 20 | #hero { 21 | position: relative; 22 | margin-bottom: 61px; 23 | height: 460px; 24 | } 25 | 26 | #hero .splide__arrow { 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | z-index: 5; 31 | opacity: 0; 32 | width: 66px; 33 | height: 100%; 34 | } 35 | 36 | #hero:hover .splide__arrow, 37 | #hero :focus-within > .splide__arrow { 38 | opacity: 1; 39 | } 40 | 41 | #hero .splide__arrow--next { 42 | left: auto; 43 | right: 0; 44 | transform: scaleX(-1); 45 | } 46 | 47 | #hero .splide__arrow > img { 48 | display: block; 49 | padding: 0 24px 0 23px; 50 | width: 100%; 51 | height: 100%; 52 | background-color: rgba(0, 0, 0, 0.2); 53 | } 54 | 55 | #hero .splide__arrow:is(:hover, :focus) > img { 56 | background-color: rgba(0, 0, 0, 0.3); 57 | } 58 | 59 | #hero .splide__track { 60 | height: 100%; 61 | } 62 | 63 | #hero .splide__slide { 64 | padding: 0 var(--padding-inline-center-content); 65 | height: 100%; 66 | } 67 | 68 | #hero .splide__slide.opaque { 69 | opacity: 1 !important; 70 | } 71 | 72 | #hero .splide__slide > .wrapper { 73 | position: absolute; 74 | left: calc(var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.034); 75 | z-index: 2; 76 | display: flex; 77 | flex-direction: column; 78 | align-items: center; 79 | width: 483px; 80 | text-align: center; 81 | } 82 | 83 | #hero .splide__slide h2 { 84 | color: inherit; 85 | font-style: italic; 86 | font-size: 6.6rem; 87 | line-height: 1.1489; 88 | } 89 | 90 | #hero .wrapper > p { 91 | font-weight: 400; 92 | font-size: 2.6rem; 93 | line-height: 1.1488; 94 | } 95 | 96 | #hero .splide__slide .wrapper > .button { 97 | min-width: 282px; 98 | } 99 | 100 | #hero .splide__pagination { 101 | position: absolute; 102 | bottom: 20px; 103 | left: 0; 104 | gap: 14px; 105 | width: 100%; 106 | } 107 | 108 | #hero .splide__pagination__page { 109 | display: block; 110 | width: 16px; 111 | height: 16px; 112 | background-color: rgba(102, 102, 102, 0.3); 113 | border-radius: 50%; 114 | } 115 | 116 | #hero :is(:hover, :focus, .is-active).splide__pagination__page { 117 | background-color: var(--color-grape); 118 | } 119 | 120 | 121 | /* Big Star */ 122 | 123 | #hero .big-star { 124 | background-color: var(--color-whitesmoke); 125 | } 126 | 127 | #hero .big-star > .wrapper { 128 | top: 77px; 129 | left: calc(var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.1195); 130 | width: 298px; 131 | } 132 | 133 | #hero .big-star .wrapper > img { 134 | margin-bottom: 47px; 135 | } 136 | 137 | #hero .big-star > img { 138 | position: absolute; 139 | top: 72px; 140 | left: calc(var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.549); 141 | } 142 | 143 | 144 | /* Sale */ 145 | 146 | #hero .sale { 147 | color: #000; 148 | background-color: var(--color-gold); 149 | } 150 | 151 | #hero .sale > .wrapper { 152 | top: 105px; 153 | } 154 | 155 | #hero .sale .wrapper > p { 156 | margin-top: 1.2rem; 157 | } 158 | 159 | #hero .sale .wrapper > .button { 160 | margin-top: 62px; 161 | } 162 | 163 | #hero .sale > img { 164 | position: absolute; 165 | top: 47px; 166 | left: calc(var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.543); 167 | } 168 | 169 | 170 | /* Gifts */ 171 | 172 | #hero .gifts { 173 | color: #fff; 174 | background-color: var(--color-violet); 175 | } 176 | 177 | #hero .gifts > .wrapper { 178 | top: 99px; 179 | left: calc(var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.009); 180 | width: 541px; 181 | } 182 | 183 | #hero .gifts h2 { 184 | font-size: 5.6rem; 185 | } 186 | 187 | #hero .gifts .wrapper > p { 188 | margin-top: 1.4rem; 189 | max-width: 340px; 190 | } 191 | 192 | #hero .gifts .wrapper p > br { 193 | display: none; 194 | } 195 | 196 | #hero .gifts .wrapper > .button { 197 | margin-top: 48px; 198 | } 199 | 200 | #hero .gifts > img { 201 | position: absolute; 202 | top: -57px; 203 | left: calc(var(--padding-inline-center-content) + (100% - 2 * var(--padding-inline-center-content)) * 0.521); 204 | } 205 | 206 | 207 | 208 | /* 2. collections 209 | -------------------------------------------------------*/ 210 | 211 | .collection { 212 | position: relative; 213 | padding: 40px var(--padding-inline-center-content) 31px; 214 | } 215 | 216 | .collection + .collection { 217 | padding-top: 61px; 218 | } 219 | 220 | .collection + .collection::before { 221 | content: ""; 222 | position: absolute; 223 | top: 0; 224 | left: 50%; 225 | margin-left: calc(-1 * min(1440px, 100%) / 2); 226 | width: min(1440px, 100%); 227 | border-top: 1px solid #ECECEC; 228 | } 229 | 230 | .collection > header { 231 | display: flex; 232 | flex-wrap: wrap; 233 | justify-content: space-between; 234 | align-items: center; 235 | row-gap: 20px; 236 | margin-bottom: 19px; 237 | width: 100%; 238 | } 239 | 240 | .collection.tech-heroes > header { 241 | margin-bottom: 42px; 242 | } 243 | 244 | .collection.binaryville > header > img { 245 | margin-right: 70px; 246 | } 247 | 248 | .collection.lil-monsters > header > img { 249 | margin-right: 70px; 250 | } 251 | 252 | .collection.stargazers > header > img { 253 | margin: 0 101px 0 30px; 254 | } 255 | 256 | .collection.tech-heroes > header > img { 257 | margin-right: 70px; 258 | } 259 | 260 | .collection h1 { 261 | margin: 0 auto 1px 0; 262 | padding-right: 20px; 263 | font-size: 4.8rem; 264 | line-height: 1.1458; 265 | } 266 | 267 | .collection header > .button { 268 | min-width: 242px; 269 | } 270 | 271 | 272 | 273 | /* 3. responsive ( 991px) 274 | -------------------------------------------------------*/ 275 | 276 | @media (max-width: 991px) { 277 | 278 | /* 1. hero */ 279 | 280 | #hero { 281 | margin-bottom: 40px; 282 | height: 640px; 283 | } 284 | 285 | #hero .splide__arrow { 286 | display: none; 287 | } 288 | 289 | #hero .splide__slide { 290 | display: flex; 291 | flex-direction: column; 292 | justify-content: center; 293 | align-items: center; 294 | } 295 | 296 | #hero .splide__slide.opaque { 297 | opacity: 1 !important; 298 | } 299 | 300 | #hero .splide__slide > .wrapper { 301 | position: static; 302 | width: auto; 303 | } 304 | 305 | #hero .splide__slide h2 { 306 | font-size: 5.8rem; 307 | line-height: 1.17; 308 | } 309 | 310 | #hero .wrapper > p { 311 | font-size: 1.8rem; 312 | line-height: 1.1667; 313 | } 314 | 315 | #hero .splide__slide .wrapper > .button { 316 | width: min(282px, 100%); 317 | min-width: 0; 318 | } 319 | 320 | /* Big Star */ 321 | 322 | #hero .big-star { 323 | padding-bottom: 32px; 324 | } 325 | 326 | #hero .big-star > .wrapper { 327 | margin-top: 46px; 328 | margin-top: 0; 329 | width: auto; 330 | } 331 | 332 | #hero .big-star > img { 333 | position: static; 334 | margin-top: 30px; 335 | width: min(335px, 100%); 336 | height: auto; 337 | } 338 | 339 | /* Sale */ 340 | 341 | #hero .sale { 342 | padding-bottom: 66px; 343 | } 344 | 345 | #hero .sale > .wrapper { 346 | margin-top: 31px; 347 | } 348 | 349 | #hero .sale .wrapper > p { 350 | margin-top: 1rem; 351 | } 352 | 353 | #hero .sale .wrapper > .button { 354 | margin-top: 40px; 355 | } 356 | 357 | #hero .sale > img { 358 | position: static; 359 | margin-top: 30px; 360 | width: min(335px, 100%); 361 | height: auto; 362 | } 363 | 364 | /* Gifts */ 365 | 366 | #hero .gifts { 367 | padding-bottom: 36px; 368 | } 369 | 370 | #hero .gifts .wrapper > p { 371 | margin-top: 1.1rem; 372 | } 373 | 374 | #hero .gifts .wrapper p > br { 375 | display: inline; 376 | } 377 | 378 | #hero .gifts .wrapper > .button { 379 | margin-top: 19px; 380 | } 381 | 382 | #hero .gifts > img { 383 | position: static; 384 | margin: 5px -178px 0 0; 385 | max-width: 436px; 386 | height: auto; 387 | } 388 | 389 | 390 | /* 2. collections */ 391 | 392 | .collection { 393 | padding-bottom: 28px; 394 | } 395 | 396 | .collection + .collection { 397 | padding-top: 41px; 398 | } 399 | 400 | .collection > header { 401 | flex-direction: column; 402 | align-items: center; 403 | margin-bottom: 17px; 404 | } 405 | 406 | .collection.tech-heroes > header { 407 | margin-bottom: 19px; 408 | } 409 | 410 | .collection > header > img { 411 | margin-right: 0 !important; 412 | margin-left: 0 !important; 413 | } 414 | 415 | .collection h1 { 416 | margin-top: -1px; 417 | margin-right: 0; 418 | padding-right: 0; 419 | font-size: 2.8rem; 420 | } 421 | 422 | .collection header > .button { 423 | margin-top: -2px; 424 | } 425 | 426 | } -------------------------------------------------------------------------------- /static/css/plugins.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Splide.js 3 | * Version : 4.0.7 4 | * License : MIT 5 | * Copyright: 2022 Naotoshi Fujita 6 | */ 7 | /* 8 | * splide-core.min.css 9 | */ 10 | @keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list{display:block}.splide__track--fade>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0} -------------------------------------------------------------------------------- /static/css/product.css: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------- 2 | 3 | Title : Big Star Collectibles 4 | Usage : product detail page 5 | Edited: 2022-09-30 6 | 7 | ------------------------------------------------------- 8 | 9 | 1. product 10 | 2. You might also like 11 | 3. responsive ( 991px) 12 | 13 | -------------------------------------------------------*/ 14 | 15 | 16 | 17 | /* 1. product 18 | -------------------------------------------------------*/ 19 | 20 | #product { 21 | position: relative; 22 | margin: 21px auto 0; 23 | display: flex; 24 | flex-direction: column; 25 | align-items: flex-end; 26 | padding-top: 40px; 27 | width: var(--width-center-section); 28 | min-height: 680px; 29 | border-top: 1px solid var(--color-border); 30 | } 31 | 32 | #product > header { 33 | width: 380px; 34 | } 35 | 36 | #product header > .wrapper { 37 | position: absolute; 38 | top: 40px; 39 | left: 0; 40 | width: min(680px, 100% - 420px); 41 | overflow: hidden; 42 | background-color: var(--color-whitesmoke); 43 | border-radius: 8px; 44 | } 45 | 46 | #product header > .wrapper::before { 47 | content: ""; 48 | display: block; 49 | padding-top: 100%; 50 | } 51 | 52 | #product header .wrapper > img { 53 | position: absolute; 54 | top: 0; 55 | left: 0; 56 | width: 100%; 57 | height: 100%; 58 | } 59 | 60 | #product h1 { 61 | padding-top: 1px; 62 | font-weight: 400; 63 | font-size: 4rem; 64 | } 65 | 66 | #product header > b { 67 | display: block; 68 | margin: 0.9rem 0 0.9rem; 69 | color: var(--color-dark); 70 | font-weight: 300; 71 | font-size: 3.2rem; 72 | } 73 | 74 | #product header .rating ~ p { 75 | margin-top: 1.6rem; 76 | font-size: 1.6rem; 77 | } 78 | 79 | #product > p { /* description */ 80 | margin-top: 3.9rem; 81 | padding-top: 4rem; 82 | width: 380px; 83 | font-size: 1.6rem; 84 | border-top: 1px solid var(--color-border); 85 | } 86 | 87 | #product form { 88 | margin-top: 3.9rem; 89 | padding-top: 2rem; 90 | width: 380px; 91 | border-top: 1px solid var(--color-border); 92 | } 93 | 94 | #product fieldset { 95 | display: flex; 96 | flex-wrap: wrap; 97 | gap: 20px; 98 | } 99 | 100 | #product legend { 101 | float: left; 102 | margin-bottom: 10px; 103 | width: 100%; 104 | font-weight: 700; 105 | font-size: 1.6rem; 106 | } 107 | 108 | #product fieldset > div { 109 | position: relative; 110 | width: 80px; 111 | } 112 | 113 | #product fieldset div > input { 114 | position: absolute; 115 | top: 0; 116 | left: 0; 117 | margin-top: 0; 118 | width: 80px; 119 | height: 80px; 120 | cursor: pointer; 121 | border-radius: 4px; 122 | } 123 | 124 | #product fieldset label { 125 | display: block; 126 | cursor: pointer; 127 | font-size: 1.4rem; 128 | text-align: center; 129 | } 130 | 131 | #product fieldset label::before { 132 | content: ""; 133 | position: absolute; 134 | top: 0; 135 | left: 0; 136 | opacity: 0; 137 | box-sizing: border-box; 138 | width: 80px; 139 | height: 80px; 140 | background-color: transparent; 141 | border: 1px solid; 142 | border-radius: 4px; 143 | transition-property: opacity; 144 | transition-duration: var(--trans-dur); 145 | } 146 | 147 | #product fieldset label:is(:hover, :checked + label)::before { 148 | opacity: 1; 149 | } 150 | 151 | #product fieldset label > img { 152 | display: block; 153 | margin-bottom: 11px; 154 | background-color: var(--color-whitesmoke); 155 | border-radius: 4px; 156 | } 157 | 158 | #product fieldset + div { /* Quantity */ 159 | display: flex; 160 | align-items: center; 161 | margin: 2.9rem 0 6rem; 162 | padding: 3.4rem 0 3.3rem; 163 | border-top: 1px solid var(--color-border); 164 | border-bottom: 1px solid var(--color-border); 165 | } 166 | 167 | #product fieldset + div > label { 168 | margin-right: auto; 169 | font-weight: 700; 170 | font-size: 1.6rem; 171 | } 172 | 173 | #product form .button { 174 | width: 100%; 175 | } 176 | 177 | 178 | 179 | /* 2. You might also like 180 | -------------------------------------------------------*/ 181 | 182 | #also { 183 | margin: 30px auto 0; 184 | padding-bottom: 56px; 185 | width: var(--width-center-section); 186 | } 187 | 188 | #also > h1 { 189 | margin-bottom: 40px; 190 | padding-bottom: 23px; 191 | font-weight: 300; 192 | font-size: 3.2rem; 193 | border-bottom: 1px solid var(--color-border); 194 | } 195 | 196 | 197 | 198 | /* 3. responsive ( 991px) 199 | -------------------------------------------------------*/ 200 | 201 | @media (max-width: 991px) { 202 | 203 | /* 1. product */ 204 | 205 | #product { 206 | display: block; 207 | padding-top: 30px; 208 | } 209 | 210 | #product > header { 211 | width: auto; 212 | } 213 | 214 | #product header > .wrapper { 215 | position: relative; 216 | top: auto; 217 | width: auto; 218 | border-radius: 4px; 219 | } 220 | 221 | #product h1 { 222 | margin-top: 3.1rem; 223 | padding-top: 0; 224 | } 225 | 226 | #product > p { /* description */ 227 | margin-right: calc(-1 * var(--dist-min-cont-edge)); 228 | margin-left: calc(-1 * var(--dist-min-cont-edge)); 229 | padding-right: var(--dist-min-cont-edge); 230 | padding-left: var(--dist-min-cont-edge); 231 | width: auto; 232 | } 233 | 234 | #product form { 235 | margin-right: calc(-1 * var(--dist-min-cont-edge)); 236 | margin-left: calc(-1 * var(--dist-min-cont-edge)); 237 | padding-right: var(--dist-min-cont-edge); 238 | padding-left: var(--dist-min-cont-edge); 239 | width: auto; 240 | } 241 | 242 | #product fieldset + div { /* Quantity */ 243 | margin-right: calc(-1 * var(--dist-min-cont-edge)); 244 | margin-left: calc(-1 * var(--dist-min-cont-edge)); 245 | padding-right: max(100% - 335px + var(--dist-min-cont-edge), var(--dist-min-cont-edge)); 246 | padding-left: var(--dist-min-cont-edge); 247 | } 248 | 249 | 250 | /* 2. You might also like */ 251 | 252 | #also { 253 | margin-top: 6rem; 254 | padding-bottom: 46px; 255 | } 256 | 257 | #also .prod-list { 258 | display: flex; 259 | margin-right: calc(-1 * var(--dist-min-cont-edge)); 260 | margin-left: calc(-1 * var(--dist-min-cont-edge)); 261 | overflow: auto; 262 | } 263 | 264 | #also .prod-list::before, 265 | #also .prod-list::after { 266 | content: ""; 267 | } 268 | 269 | #also .prod-list > div { 270 | flex-shrink: 0; 271 | width: 280px; 272 | } 273 | 274 | } -------------------------------------------------------------------------------- /static/favicon-original-512px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/favicon-original-512px.png -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/favicon.ico -------------------------------------------------------------------------------- /static/fonts/VesperLibre-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/fonts/VesperLibre-Regular.ttf -------------------------------------------------------------------------------- /static/images/characters/Binaryville-Elton.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 38 | 39 | 40 | 41 | 42 | 43 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 113 | 114 | 115 | 116 | 117 | 119 | 121 | 123 | 124 | 125 | 126 | 127 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 153 | 154 | 155 | 156 | 157 | 159 | 160 | 161 | 162 | 163 | 165 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 192 | 193 | 194 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 207 | 209 | 210 | 212 | 213 | 214 | 215 | 217 | 218 | 219 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 232 | 234 | 235 | 236 | 238 | 239 | 240 | 242 | 243 | 244 | -------------------------------------------------------------------------------- /static/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 | -------------------------------------------------------------------------------- /static/images/characters/Lil-Monsters-Blade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/Lil-Monsters-Blade.png -------------------------------------------------------------------------------- /static/images/characters/Lil-Monsters-Melville.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/Lil-Monsters-Melville.png -------------------------------------------------------------------------------- /static/images/characters/Lil-Monsters-Mingle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/Lil-Monsters-Mingle.png -------------------------------------------------------------------------------- /static/images/characters/Lil-Monsters-Yodel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/Lil-Monsters-Yodel.png -------------------------------------------------------------------------------- /static/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 | -------------------------------------------------------------------------------- /static/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 | -------------------------------------------------------------------------------- /static/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 | -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Belle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Belle.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Bubbles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Bubbles.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Cosmo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Cosmo.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Delores.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Delores.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Dolly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Dolly.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Eileen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Eileen.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Elton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Elton.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Fred.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Fred.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Levi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Levi.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Portman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Portman.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Rex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Rex.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Rivet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Rivet.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Sergeant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Sergeant.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Binaryville-Spring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Binaryville-Spring.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Blade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Blade.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Blade@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Blade@2x.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Blade@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Blade@3x.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Melville.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Melville.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Melville@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Melville@2x.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Melville@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Melville@3x.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Mingle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Mingle.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Mingle@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Mingle@2x.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Mingle@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Mingle@3x.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Yodel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Yodel.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Yodel@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Yodel@2x.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Lil-Monsters-Yodel@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Lil-Monsters-Yodel@3x.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Stargazers-Charmaine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Stargazers-Charmaine.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Stargazers-Gill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Stargazers-Gill.png -------------------------------------------------------------------------------- /static/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 | -------------------------------------------------------------------------------- /static/images/characters/avatar-Stargazers-Mindigo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Stargazers-Mindigo.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Stargazers-Trisaphron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Stargazers-Trisaphron.png -------------------------------------------------------------------------------- /static/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 | -------------------------------------------------------------------------------- /static/images/characters/avatar-Tech-Heroes-Caped-Coder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Tech-Heroes-Caped-Coder.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Tech-Heroes-CloudMaster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Tech-Heroes-CloudMaster.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Tech-Heroes-Commander-Zoom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Tech-Heroes-Commander-Zoom.png -------------------------------------------------------------------------------- /static/images/characters/avatar-Tech-Heroes-The-ArchiTech.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/characters/avatar-Tech-Heroes-The-ArchiTech.png -------------------------------------------------------------------------------- /static/images/favicons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/android-icon-144x144.png -------------------------------------------------------------------------------- /static/images/favicons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/android-icon-192x192.png -------------------------------------------------------------------------------- /static/images/favicons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/android-icon-36x36.png -------------------------------------------------------------------------------- /static/images/favicons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/android-icon-48x48.png -------------------------------------------------------------------------------- /static/images/favicons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/android-icon-72x72.png -------------------------------------------------------------------------------- /static/images/favicons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/android-icon-96x96.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon-114x114.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon-120x120.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon-144x144.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon-152x152.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon-180x180.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon-57x57.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon-60x60.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon-72x72.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon-76x76.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /static/images/favicons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/apple-icon.png -------------------------------------------------------------------------------- /static/images/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /static/images/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /static/images/favicons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/favicon-96x96.png -------------------------------------------------------------------------------- /static/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 | } -------------------------------------------------------------------------------- /static/images/favicons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/ms-icon-144x144.png -------------------------------------------------------------------------------- /static/images/favicons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/ms-icon-150x150.png -------------------------------------------------------------------------------- /static/images/favicons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/ms-icon-310x310.png -------------------------------------------------------------------------------- /static/images/favicons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/favicons/ms-icon-70x70.png -------------------------------------------------------------------------------- /static/images/hero-big-star.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/hero-big-star.jpg -------------------------------------------------------------------------------- /static/images/hero-big-star@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/hero-big-star@2x.jpg -------------------------------------------------------------------------------- /static/images/hero-big-star@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/hero-big-star@3x.jpg -------------------------------------------------------------------------------- /static/images/hero-gifts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/hero-gifts.jpg -------------------------------------------------------------------------------- /static/images/hero-gifts@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/hero-gifts@2x.jpg -------------------------------------------------------------------------------- /static/images/hero-gifts@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/hero-gifts@3x.jpg -------------------------------------------------------------------------------- /static/images/hero-sale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/hero-sale.jpg -------------------------------------------------------------------------------- /static/images/hero-sale@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/hero-sale@2x.jpg -------------------------------------------------------------------------------- /static/images/hero-sale@3x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/docker-your-first-project-4485003/1855d1b86c6ff000c01ef713396925faf9fcab40/static/images/hero-sale@3x.jpg -------------------------------------------------------------------------------- /static/images/icon-arrow-right-grape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/icon-chevron-left-purpleviolet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /static/images/icon-chevron-left-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/icon-facebook-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/icon-instagram-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/icon-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /static/images/icon-rating-star-purpleviolet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /static/images/icon-search-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /static/images/icon-search-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/icon-shopping-cart-v01-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /static/images/icon-shopping-cart-v01-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /static/images/icon-twitter-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/icon-user-v01-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /static/images/icon-user-v01-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/icon-xmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/icon-youtube-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/logo-Stargazers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 18 | 43 | 71 | 72 | -------------------------------------------------------------------------------- /static/images/logo-Tech-Heroes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 12 | 18 | 19 | 21 | 22 | 34 | 35 | -------------------------------------------------------------------------------- /static/images/logo-big-star-H-purple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/logo-big-star-H.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/logomark-big-star-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /static/images/quote-tail-top-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /test/test.txt: -------------------------------------------------------------------------------- 1 | This is a test text file. --------------------------------------------------------------------------------