Basic
31 |$19.99
32 |-
33 |
- 500 GB Storage 35 |
- 2 Users Allowed 37 |
- Send up to 3 GB 39 |
34 |
36 |
38 |
40 |
├── LICENSE ├── README.md ├── _config.yml ├── google7521b4b8a878888b.html ├── node_modules ├── .package-lock.json ├── @kwsites │ ├── file-exists │ │ ├── CHANGELOG.md │ │ ├── LICENSE │ │ ├── dist │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── index.js.map │ │ │ ├── src │ │ │ │ ├── index.d.ts │ │ │ │ ├── index.js │ │ │ │ └── index.js.map │ │ │ └── test │ │ │ │ ├── __mocks__ │ │ │ │ ├── fs.d.ts │ │ │ │ ├── fs.js │ │ │ │ └── fs.js.map │ │ │ │ ├── exists.spec.d.ts │ │ │ │ ├── exists.spec.js │ │ │ │ └── exists.spec.js.map │ │ ├── package.json │ │ └── readme.md │ └── promise-deferred │ │ ├── LICENSE │ │ ├── dist │ │ ├── index.d.ts │ │ ├── index.js │ │ └── index.js.map │ │ └── package.json ├── debug │ ├── LICENSE │ ├── README.md │ ├── package.json │ └── src │ │ ├── browser.js │ │ ├── common.js │ │ ├── index.js │ │ └── node.js ├── ms │ ├── index.js │ ├── license.md │ ├── package.json │ └── readme.md └── simple-git │ ├── dist │ ├── cjs │ │ ├── index.js │ │ └── index.js.map │ ├── esm │ │ ├── index.js │ │ ├── index.js.map │ │ └── package.json │ ├── src │ │ └── lib │ │ │ ├── api.d.ts │ │ │ ├── args │ │ │ ├── log-format.d.ts │ │ │ └── pathspec.d.ts │ │ │ ├── errors │ │ │ ├── git-construct-error.d.ts │ │ │ ├── git-error.d.ts │ │ │ ├── git-plugin-error.d.ts │ │ │ ├── git-response-error.d.ts │ │ │ └── task-configuration-error.d.ts │ │ │ ├── git-factory.d.ts │ │ │ ├── git-logger.d.ts │ │ │ ├── parsers │ │ │ ├── parse-branch-delete.d.ts │ │ │ ├── parse-branch.d.ts │ │ │ ├── parse-commit.d.ts │ │ │ ├── parse-diff-summary.d.ts │ │ │ ├── parse-fetch.d.ts │ │ │ ├── parse-list-log-summary.d.ts │ │ │ ├── parse-merge.d.ts │ │ │ ├── parse-move.d.ts │ │ │ ├── parse-pull.d.ts │ │ │ ├── parse-push.d.ts │ │ │ ├── parse-remote-messages.d.ts │ │ │ └── parse-remote-objects.d.ts │ │ │ ├── plugins │ │ │ ├── abort-plugin.d.ts │ │ │ ├── block-unsafe-operations-plugin.d.ts │ │ │ ├── command-config-prefixing-plugin.d.ts │ │ │ ├── completion-detection.plugin.d.ts │ │ │ ├── custom-binary.plugin.d.ts │ │ │ ├── error-detection.plugin.d.ts │ │ │ ├── index.d.ts │ │ │ ├── plugin-store.d.ts │ │ │ ├── progress-monitor-plugin.d.ts │ │ │ ├── simple-git-plugin.d.ts │ │ │ ├── spawn-options-plugin.d.ts │ │ │ ├── suffix-paths.plugin.d.ts │ │ │ └── timout-plugin.d.ts │ │ │ ├── responses │ │ │ ├── BranchDeleteSummary.d.ts │ │ │ ├── BranchSummary.d.ts │ │ │ ├── CheckIgnore.d.ts │ │ │ ├── CleanSummary.d.ts │ │ │ ├── ConfigList.d.ts │ │ │ ├── DiffSummary.d.ts │ │ │ ├── FileStatusSummary.d.ts │ │ │ ├── GetRemoteSummary.d.ts │ │ │ ├── InitSummary.d.ts │ │ │ ├── MergeSummary.d.ts │ │ │ ├── PullSummary.d.ts │ │ │ ├── StatusSummary.d.ts │ │ │ └── TagList.d.ts │ │ │ ├── runners │ │ │ ├── git-executor-chain.d.ts │ │ │ ├── git-executor.d.ts │ │ │ ├── promise-wrapped.d.ts │ │ │ ├── scheduler.d.ts │ │ │ └── tasks-pending-queue.d.ts │ │ │ ├── simple-git-api.d.ts │ │ │ ├── task-callback.d.ts │ │ │ ├── tasks │ │ │ ├── apply-patch.d.ts │ │ │ ├── branch.d.ts │ │ │ ├── change-working-directory.d.ts │ │ │ ├── check-ignore.d.ts │ │ │ ├── check-is-repo.d.ts │ │ │ ├── checkout.d.ts │ │ │ ├── clean.d.ts │ │ │ ├── clone.d.ts │ │ │ ├── commit.d.ts │ │ │ ├── config.d.ts │ │ │ ├── count-objects.d.ts │ │ │ ├── diff-name-status.d.ts │ │ │ ├── diff.d.ts │ │ │ ├── fetch.d.ts │ │ │ ├── first-commit.d.ts │ │ │ ├── grep.d.ts │ │ │ ├── hash-object.d.ts │ │ │ ├── init.d.ts │ │ │ ├── log.d.ts │ │ │ ├── merge.d.ts │ │ │ ├── move.d.ts │ │ │ ├── pull.d.ts │ │ │ ├── push.d.ts │ │ │ ├── remote.d.ts │ │ │ ├── reset.d.ts │ │ │ ├── show.d.ts │ │ │ ├── stash-list.d.ts │ │ │ ├── status.d.ts │ │ │ ├── sub-module.d.ts │ │ │ ├── tag.d.ts │ │ │ ├── task.d.ts │ │ │ └── version.d.ts │ │ │ ├── types │ │ │ ├── handlers.d.ts │ │ │ ├── index.d.ts │ │ │ └── tasks.d.ts │ │ │ └── utils │ │ │ ├── argument-filters.d.ts │ │ │ ├── exit-codes.d.ts │ │ │ ├── git-output-streams.d.ts │ │ │ ├── index.d.ts │ │ │ ├── line-parser.d.ts │ │ │ ├── simple-git-options.d.ts │ │ │ ├── task-options.d.ts │ │ │ ├── task-parser.d.ts │ │ │ └── util.d.ts │ └── typings │ │ ├── errors.d.ts │ │ ├── index.d.ts │ │ ├── response.d.ts │ │ ├── simple-git.d.ts │ │ └── types.d.ts │ ├── package.json │ ├── promise.js │ └── readme.md ├── package-lock.json ├── package.json ├── project-10_404_error_page ├── css │ └── index.css ├── img │ └── error.png ├── index.html └── js │ └── index.js ├── project-11_analog_clock ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-12_contact_form ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-13_profile_card ├── css │ └── index.css ├── img │ └── profile.jpg ├── index.html └── js │ └── index.js ├── project-14_music_loader ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-15_currrency_convertor ├── css │ └── index.css ├── index.html └── js │ ├── country.js │ └── index.js ├── project-16_pricing_component ├── app.js ├── images │ ├── bg-bottom.svg │ ├── bg-top.svg │ ├── favicon-32x32.png │ └── project-preview.png ├── index.html └── styles.css ├── project-17_remove_Signature_bg ├── favicon.png ├── images │ └── remove_bg.png ├── index.html ├── script.js └── styles.css ├── project-18_toggle_dark_light_mode ├── index.html ├── script.js └── style.css ├── project-19_weather_app ├── img │ ├── clear.png │ ├── clouds.png │ ├── demo.png │ ├── drizzle.png │ ├── haze.png │ ├── humidity.png │ ├── mist.png │ ├── rain.png │ ├── search.png │ ├── snow.png │ └── wind.png ├── index.html ├── script.js └── style.css ├── project-1_landing-page ├── css │ └── index.css ├── img │ ├── features.png │ └── hero-bg.svg ├── index.html ├── js │ └── index.js └── scss │ └── index.scss ├── project-20_bubble_game ├── index.html ├── index.js └── style.css ├── project-2_calculator ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-3_wavy_login_form ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-4_random_quote_generator ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-5_random_color_changer ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-6_qr_code_generator ├── css │ ├── index.css │ └── index.scss ├── index.html └── js │ └── index.js ├── project-7_stopwatch_timer ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-8_password_generator ├── css │ └── index.css ├── index.html └── js │ └── index.js ├── project-9_responsive_navbar ├── css │ └── index.css ├── index.html └── js │ └── index.js └── sitemap.xml /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Arman Idrisi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Projects 🌐 2 | 3 | [](https://github.com/ArmanIdrisi/frontend-projects/graphs/contributors) 4 | [](https://github.com/ArmanIdrisi/frontend-projects/commits/main) 5 | 6 | This repository contains a collection of frontend projects.Each project is built using HTML, CSS, and JavaScript. 7 | 8 | ## Projects 📂 9 | 10 |
# | 13 |Project Name | 14 |Link | 15 |
---|---|---|
01 | 18 |Landing Page | 19 |Click Here | 20 |
02 | 23 |Calculator | 24 |Click Here | 25 |
03 | 28 |Wavy Login Form | 29 |Click Here | 30 |
04 | 33 |Random Quote Generator | 34 |Click Here | 35 |
05 | 38 |Random Background Changer | 39 |Click Here | 40 |
06 | 43 |Qr Code Generator | 44 |Click Here | 45 |
07 | 48 |Stopwatch Timer | 49 |Click Here | 50 |
08 | 53 |Password Generator | 54 |Click Here | 55 |
09 | 58 |Responsive Navbar | 59 |Click Here | 60 |
10 | 63 |404 Error Page | 64 |Click Here | 65 |
11 | 68 |Analog Clock | 69 |Click Here | 70 |
12 | 73 |Contact Form | 74 |Click Here | 75 |
13 | 78 |Profile Card | 79 |Click Here | 80 |
14 | 83 |Music Preloader | 84 |Click Here | 85 |
15 | 88 |Currency Converter | 89 |Click Here | 90 |
16 | 93 |Pricing card | 94 |Click Here | 95 |
17 | 98 |Background Remover App | 99 |Click Here | 100 |
18 | 103 |Toggle Dark & Light Mode | 104 |Click Here | 105 |
19 | 108 |Weather App | 109 |Click Here | 110 |
20 | 113 |Bubble Game | 114 |Click Here | 115 |
Sorry! The Request Url Not Found On The Server
14 | 15 |₹99
28 |$199.99
`; 15 | profPrice.innerHTML = `$249.99
`; 16 | masterPrice.innerHTML = `$399.99
`; 17 | } else { 18 | toggleArea.classList.add("monthly"); 19 | toggleArea.classList.remove("anually"); 20 | basicPrice.innerHTML = `$19.99
`; 21 | profPrice.innerHTML = `$24.99
`; 22 | masterPrice.innerHTML = `$39.99
`; 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /project-16_pricing_component/images/bg-bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-16_pricing_component/images/bg-top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-16_pricing_component/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcat882/frontend-project/fdc2e47000234c3732c7826d13d817bc69b660b2/project-16_pricing_component/images/favicon-32x32.png -------------------------------------------------------------------------------- /project-16_pricing_component/images/project-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcat882/frontend-project/fdc2e47000234c3732c7826d13d817bc69b660b2/project-16_pricing_component/images/project-preview.png -------------------------------------------------------------------------------- /project-16_pricing_component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |$19.99
32 |$24.99
47 |$39.99
62 |21 | lorem ipsum dolor sit amet consectetur adipiscing elit 22 | namaste namaste 23 |
24 |Check Weather searching City Name
18 |Humidity
48 |Wind
58 |33 | deserunt minim velit pariatur exercitation laborum ipsum cillum aliqua 34 | dolor nisi ullamco sunt deserunt qui occaecat cupidatat quis ea id 35 | aliqua exercitation adipisicing officia amet eu fugiat aliquip culpa 36 | cillum 37 |
38 | 39 |Features
47 |Services
80 |87 | We have a very experienced team for app development, We offer 88 | you a very attractive user interface and functions for your 89 | application. 90 |
91 |98 | Need a website for your bussiness or personal use ? why are you 99 | waiting drop a project request now! 100 |
101 |108 | We provide you any type of technical services as you need, for 109 | more details please contact us 110 |
111 |Contact
119 |Loading...
`; 10 | // Send a request to the Quotable API to get a random quote 11 | let data = await fetch("https://api.quotable.io/random"); 12 | 13 | // Parse the response as JSON 14 | let json = await data.json(); 15 | 16 | // Set the text of the quote element to the content of the fetched quote 17 | QuoteElem.innerHTML = `${json.content}
`; 18 | }; 19 | 20 | // Add an event listener to the button element that triggers the fetchData function when clicked 21 | btn.addEventListener("click", fetchData); 22 | 23 | // Call the fetchData function once to initially populate the quote element with a random quote 24 | fetchData(); 25 | -------------------------------------------------------------------------------- /project-5_random_color_changer/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | background-color: #81d4fa; 7 | } 8 | .btn { 9 | background: white; 10 | border-radius: 60px; 11 | outline: none; 12 | border: none; 13 | padding: 6px; 14 | height: 60px; 15 | width: 50%; 16 | font-size: 18px; 17 | font-weight: bold; 18 | } 19 | .btn:hover, 20 | .btn:active { 21 | box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); 22 | } 23 | -------------------------------------------------------------------------------- /project-5_random_color_changer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |