├── .github
    └── ISSUE_TEMPLATE
    │   └── bug_report.md
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── css
    ├── linkedin.css
    ├── style.css
    └── udemy.css
├── font
    ├── ArnoPro-BoldDisplay.otf
    ├── applied-sans-pro-cufonfonts.zip
    └── applied-sans-pro-cufonfonts
    │   ├── AppliedSansProBdIt.TTF
    │   ├── AppliedSansProBlk.TTF
    │   ├── AppliedSansProBlkCn.TTF
    │   ├── AppliedSansProBlkIt.TTF
    │   ├── AppliedSansProBold.TTF
    │   ├── AppliedSansProCnBd.TTF
    │   ├── AppliedSansProCnBdIt.TTF
    │   ├── AppliedSansProCnBlkIt.TTF
    │   ├── AppliedSansProCnLight.TTF
    │   ├── AppliedSansProCnLtIt.TTF
    │   ├── AppliedSansProCnRg.TTF
    │   ├── AppliedSansProCnRgIt.TTF
    │   ├── AppliedSansProCnTh.TTF
    │   ├── AppliedSansProCnThIt.TTF
    │   ├── AppliedSansProCnUltBlk.TTF
    │   ├── AppliedSansProCnUltBlkIt.TTF
    │   ├── AppliedSansProCnUltLt.TTF
    │   ├── AppliedSansProCnUltLtIt.TTF
    │   ├── AppliedSansProLight.TTF
    │   ├── AppliedSansProLtIt.TTF
    │   ├── AppliedSansProMdCn.TTF
    │   ├── AppliedSansProMdCnIt.TTF
    │   ├── AppliedSansProMdIt.TTF
    │   ├── AppliedSansProMedium.TTF
    │   ├── AppliedSansProRg.TTF
    │   ├── AppliedSansProRgIt.TTF
    │   ├── AppliedSansProTh.TTF
    │   ├── AppliedSansProThIt.TTF
    │   ├── AppliedSansProUltBlk.TTF
    │   ├── AppliedSansProUltBlkIt.TTF
    │   ├── AppliedSansProUltLt.TTF
    │   └── AppliedSansProUltLtIt.TTF
├── img
    ├── BG.jpg
    ├── BG.mp4
    ├── Learning.png
    ├── LinkedIn left-2.png
    ├── LinkedIn left.png
    ├── Sign1.JPG
    ├── Sign2.JPG
    ├── icon.png
    ├── lid.jpg
    ├── linkedin.png
    ├── ud.jpg
    ├── udemy-logo.png
    └── udemy.png
├── index.html
├── js
    ├── linkedin.js
    └── udemy.js
├── linkedin.html
└── udemy.html


/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | .
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior,  harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   
 3 |   ![GitHub repo size](https://img.shields.io/github/repo-size/devpayoub/Certificate-Generator)
 4 |   ![GitHub stars](https://img.shields.io/github/stars/devpayoub/Certificate-Generator?style=social)
 5 |   <br />
 6 |   <br />
 7 | 
 8 |   <h2 align="center">Certificate Generator</h2>
 9 | 
10 |   Certificate Generator ,<br /> A Online Application That Can Help You To Generator Udemy and Linkedin Generator .
11 |     <br /><a href="https://certificate-generator.celebritytravel.net/"><strong>➥ Live Demo</strong></a>
12 | 
13 | </div>
14 | 
15 | <br />
16 | 
17 | ## Demo Screeshots
18 | ### Udemy Generated Certificate Sample
19 | 
20 | ![Desktop Demo](./img/ud.jpg "Desktop Demo")
21 | 
22 | ### Udemy Generated Certificate Sample
23 | 
24 | ![Desktop Demo](./img/lid.jpg "Desktop Demo")
25 | 
26 | 
27 | ### Run Locally
28 | 
29 | To run **Certificate Generator** locally, run this command on your git bash:
30 | 
31 | Linux and macOS:
32 | 
33 | ```bash
34 | sudo git clone https://github.com/devpayoub/Certificate-Generator.git
35 | ```
36 | 
37 | Windows:
38 | 
39 | ```bash
40 | git clone https://github.com/devpayoub/Certificate-Generator.git
41 | ```
42 | 
43 | ### Contact
44 | 
45 | If you want to contact with me you can reach me at [Facebook](https://www.facebook.com/EminemTB).
46 | 
47 | ## Credits :
48 | ```
49 | This Script is free to distribute, modify and use with the condition that credit is provided to the creator (@devpayoub) and is not for commercial use.
50 | Email : trabelsi.ayoub1998@gmail.com
51 | ```
52 | 


--------------------------------------------------------------------------------
/css/linkedin.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 | }
  5 | .main-content {
  6 |   display: flex;
  7 |   flex-flow: row nowrap;
  8 |   height: 740px;
  9 |   width: inherit;
 10 |   border: 6px solid rgb(177, 177, 177);
 11 | }
 12 | 
 13 | #certificate {
 14 |   display: none;
 15 |   width: 1180px;
 16 |   height: inherit;
 17 |   background-color: white;
 18 | }
 19 | .left-side {
 20 |   width: 25%;
 21 | }
 22 | 
 23 | .container {
 24 |   display: flex;
 25 |   flex-flow: column nowrap;
 26 |   justify-content: center;
 27 |   align-items: center;
 28 | }
 29 | 
 30 | .left-side > img {
 31 |   height: 740px;
 32 | }
 33 | .outer {
 34 |   border: 20px solid white;
 35 | }
 36 | .light-br {
 37 |   border: 3px solid rgba(177, 177, 177, 0.746);
 38 |   padding: 4px;
 39 | }
 40 | .dark-br {
 41 |   border: 15px solid rgba(135, 135, 135, 0.81);
 42 |   padding: 8px;
 43 | }
 44 | .right-content {
 45 |   margin-top: 90px;
 46 |   margin-left: 20px;
 47 |   width: 62%;
 48 |   font-family: "Lato", sans-serif;
 49 |   font-size: 18px;
 50 |   color: #737373;
 51 |   font-weight: 300;
 52 | }
 53 | 
 54 | #logo {
 55 |   height: 24px;
 56 |   margin-left: 9px;
 57 | }
 58 | #sign {
 59 |   height: 67px;
 60 | }
 61 | 
 62 | .congrats,
 63 | .course-name,
 64 | .para,
 65 | .authority,
 66 | .certificate-id {
 67 |   margin-left: 40px;
 68 | }
 69 | 
 70 | .congrats > h3 {
 71 |   font-size: 23px;
 72 |   font-weight: 300;
 73 |   margin-top: 0px;
 74 | }
 75 | 
 76 | .congrats > h2 {
 77 |   font-weight: 300;
 78 |   margin-top: 3px;
 79 |   margin-bottom: 0px;
 80 | }
 81 | .course-name {
 82 |   color: #6e6f6e;
 83 |   margin-top: 45px;
 84 | }
 85 | .course-name > h1 {
 86 |   margin: 0;
 87 | }
 88 | .completion {
 89 |   display: flex;
 90 |   align-items: center;
 91 |   color: #707071;
 92 | }
 93 | .completion > h3 {
 94 |   margin-top: 5px;
 95 |   margin-bottom: 0px;
 96 |   font-size: 20px;
 97 |   font-weight: 400;
 98 | }
 99 | 
100 | .para > h2 {
101 |   margin-top: 30px;
102 |   color: #707071;
103 |   font-size: 17px;
104 |   font-weight: 400;
105 | }
106 | .authority {
107 |   margin-top: 15px;
108 |   font-size: 12.6px;
109 | 
110 |   font-weight: 300;
111 |   display: flex;
112 |   color: #707071;
113 |   align-items: flex-end;
114 | }
115 | 
116 | .vl {
117 |   border: 1px solid #d0d0d1;
118 |   height: 70px;
119 | }
120 | 
121 | .part-1 > h3,
122 | .part-2 > h3 {
123 |   margin: 0;
124 |   font-size: 17px;
125 |   font-weight: 500;
126 | }
127 | .certificate-id {
128 |   margin-top: 140px;
129 |   font-size: 13px;
130 | }
131 | 
132 | #clength {
133 |   margin-left: 11px;
134 | }
135 | 
136 | /* Form's Designing */
137 | 
138 | #form {
139 |   padding: 50px;
140 |   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
141 |     rgba(0, 0, 0, 0.16) 0px 30px 60px -30px;
142 |   font-family: "Montserrat", sans-serif;
143 |   border-radius: 10px;
144 |   font-size: 20px;
145 |   background-color: white;
146 | }
147 | 
148 | .first-name,
149 | .last-name,
150 | .date,
151 | .length,
152 | .course,
153 | .teacher {
154 |   margin-top: 30px;
155 | }
156 | 
157 | label {
158 |   margin-top: 25px;
159 | }
160 | 
161 | input {
162 |   background-color: transparent;
163 |   border: none;
164 |   font-size: 18px;
165 |   width: 300px;
166 |   border-bottom: 1px solid rgba(128, 128, 128, 0.563);
167 | }
168 | #Generate,
169 | #download {
170 |   cursor: pointer;
171 |   color: white;
172 |   border: none;
173 |   border-radius: 6px;
174 |   font-family: "Montserrat", sans-serif;
175 |   width: 250px;
176 |   background-color: rgba(0, 0, 255, 0.496);
177 |   height: 50px;
178 |   transition: all 0.3s;
179 | }
180 | .btn {
181 |   margin-top: 25px;
182 |   display: flex;
183 |   justify-content: center;
184 | }
185 | .container {
186 |   display: flex;
187 |   flex-flow: column;
188 |   justify-content: center;
189 |   align-items: center;
190 |   height: 100vh;
191 |   background-color: #dbdbdbc3;
192 | }
193 | #download {
194 |   display: none;
195 | }
196 | 
197 | #Generate:hover,
198 | #download:hover {
199 |   background-color: rgba(0, 0, 255, 0.694);
200 | }
201 | /* Media Queries */
202 | 
203 | @media (max-width: 500px) {
204 |   #form {
205 |     font-size: 14px;
206 |     padding: 22px;
207 |   }
208 |   input {
209 |     font-size: 12px;
210 |   }
211 |   #download {
212 |     font-size: 40px;
213 |     height: 165px;
214 |   }
215 | }
216 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   color: white;
 3 | }
 4 | 
 5 | .btn {
 6 |   background-color: transparent;
 7 |   color: black;
 8 |   width: 50%;
 9 |   margin-top: 25px;
10 |   background: rgba(255, 255, 255, 0.15);
11 |   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
12 |   backdrop-filter: blur(5.5px);
13 |   -webkit-backdrop-filter: blur(5.5px);
14 |   border-radius: 10px;
15 |   border: 1px solid rgba(255, 255, 255, 0.18);
16 | }
17 | 
18 | h1 {
19 |   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
20 | }
21 | 
22 | h3 {
23 |   margin-top: 25px;
24 |   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
25 | }
26 | 
27 | .dropdown-menu {
28 |   width: 50%;
29 |   text-align: center;
30 |   background: rgba(255, 255, 255, 0.15);
31 |   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
32 |   backdrop-filter: blur(5.5px);
33 |   -webkit-backdrop-filter: blur(5.5px);
34 |   border-radius: 10px;
35 |   border: 1px solid rgba(255, 255, 255, 0.18);
36 | }
37 | 
38 | .dropdown-item {
39 |   white-space: pre-wrap;
40 | }
41 | 
42 | .enter {
43 |   font-family: "Montserrat", sans-serif;
44 |   border-radius: 8px;
45 |   padding: 100px;
46 |   text-align: center;
47 |   background: rgba(255, 255, 255, 0.15);
48 |   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
49 |   backdrop-filter: blur(5.5px);
50 |   -webkit-backdrop-filter: blur(5.5px);
51 |   border-radius: 10px;
52 |   border: 1px solid rgba(255, 255, 255, 0.18);
53 | }
54 | 
55 | .container {
56 |   height: 100vh;
57 |   display: flex;
58 |   align-items: center;
59 |   justify-content: center;
60 | }
61 | 
62 | #background-video {
63 |   width: 100vw;
64 |   height: 100vh;
65 |   object-fit: cover;
66 |   position: fixed;
67 |   opacity: 0.8;
68 |   left: 0;
69 |   right: 0;
70 |   top: 0;
71 |   bottom: 0;
72 |   z-index: -1;
73 | }
74 | 
75 | .alert > strong {
76 |   color: red;
77 |   background-color: transparent;
78 | }
79 | .alert-warning {
80 |   --bs-alert-color: #664d03;
81 |   --bs-alert-bg: #fff3cdb5;
82 |   --bs-alert-border-color: #ffecb500;
83 | }
84 | /* Media Queries */
85 | 
86 | @media (max-width: 500px) {
87 |   .enter > h1,
88 |   .enter > h3 {
89 |     font-size: 20px;
90 |   }
91 | 
92 |   .btn {
93 |     width: 85%;
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/css/udemy.css:
--------------------------------------------------------------------------------
  1 | /* Certificate Designing */
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 | }
  7 | 
  8 | #course-name {
  9 |   font-family: " Arno Pro Display ", "Times New Roman", Times, serif;
 10 |   /* src: url("../font/ArnoPro-BoldDisplay.otf"); */
 11 |   font-weight: bold;
 12 |   font-size: 80px;
 13 |   margin-top: 12px;
 14 |   color: rgb(28, 28, 28);
 15 | }
 16 | 
 17 | #certificate {
 18 |   display: none;
 19 |   flex-direction: column;
 20 |   padding: 60px;
 21 |   padding-top: 20px;
 22 |   padding-bottom: 40px;
 23 |   height: fit-content;
 24 |   width: 1280px;
 25 |   /* background-color: rgba(200, 194, 194, 0.073); */
 26 | }
 27 | 
 28 | .container {
 29 |   display: flex;
 30 |   flex-flow: column;
 31 |   justify-content: center;
 32 |   align-items: center;
 33 |   height: 100vh;
 34 |   background-color: #dbdbdbc3;
 35 | }
 36 | 
 37 | .logo {
 38 |   display: flex;
 39 |   align-items: center;
 40 |   width: auto;
 41 | }
 42 | 
 43 | .right-side {
 44 |   font-size: 14px;
 45 |   font-family: "DistrictProW01-Medium", sans-serif;
 46 |   color: rgba(107, 107, 107, 0.879);
 47 |   text-align: right;
 48 |   padding-left: 620px;
 49 | }
 50 | .right-side > div {
 51 |   margin-top: 10px;
 52 | }
 53 | #udemy-logo {
 54 |   height: 120px;
 55 | }
 56 | 
 57 | .content {
 58 |   font-family: "Montserrat", sans-serif;
 59 |   font-weight: bolder;
 60 |   margin-top: 70px;
 61 | }
 62 | 
 63 | .content > h4,
 64 | .user > h4 {
 65 |   font-family: "DistrictProW01-Medium", sans-serif;
 66 |   font-weight: 400;
 67 |   font-size: 20px;
 68 |   margin-top: 18px;
 69 | }
 70 | 
 71 | .content > h3 {
 72 |   color: rgba(100, 100, 100, 0.899);
 73 |   letter-spacing: 1.5px;
 74 | }
 75 | 
 76 | .content > h1 {
 77 |   margin: 0;
 78 | }
 79 | 
 80 | .content > h4 > b,
 81 | .user > h4 > b {
 82 |   font-family: "Poppins", sans-serif;
 83 |   color: rgb(28, 28, 28);
 84 |   font-size: 20px;
 85 | }
 86 | 
 87 | .user > h1 {
 88 |   font-size: 42px;
 89 |   font-family: "Poppins", sans-serif;
 90 |   color: rgb(28, 28, 28);
 91 |   font-weight: bolder;
 92 | }
 93 | 
 94 | .user {
 95 |   margin-top: 170px;
 96 | }
 97 | 
 98 | .user > h4 {
 99 |   margin: 0;
100 | }
101 | 
102 | #download {
103 |   margin-top: 20px;
104 |   display: none;
105 | }
106 | 
107 | .btn {
108 |   margin-top: 25px;
109 |   display: flex;
110 |   justify-content: center;
111 | }
112 | 
113 | #Generate,
114 | #download {
115 |   cursor: pointer;
116 |   color: white;
117 |   border: none;
118 |   border-radius: 6px;
119 |   font-family: "Montserrat", sans-serif;
120 |   width: 250px;
121 |   background-color: rgba(0, 0, 255, 0.496);
122 |   height: 50px;
123 |   transition: all 0.3s;
124 | }
125 | 
126 | #Generate:hover,
127 | #download:hover {
128 |   background-color: rgba(0, 0, 255, 0.694);
129 | }
130 | 
131 | .alert > strong {
132 |   color: red;
133 |   background-color: transparent;
134 | }
135 | .alert-warning {
136 |   --bs-alert-color: #664d03;
137 |   --bs-alert-bg: #fff3cdb5;
138 |   --bs-alert-border-color: #ffecb500;
139 | }
140 | 
141 | /* Media Queries */
142 | 
143 | @media (max-width: 500px) {
144 |   #form {
145 |     font-size: 14px;
146 |     padding: 22px;
147 |   }
148 |   input {
149 |     font-size: 12px;
150 |   }
151 |   #download {
152 |     font-size: 40px;
153 |     height: 165px;
154 |   }
155 | }
156 | 
157 | /* Here Comes the form's designing */
158 | 
159 | #form {
160 |   padding: 50px;
161 |   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
162 |     rgba(0, 0, 0, 0.16) 0px 30px 60px -30px;
163 |   font-family: "Montserrat", sans-serif;
164 |   border-radius: 10px;
165 |   font-size: 20px;
166 |   background-color: white;
167 | }
168 | 
169 | .first-name,
170 | .last-name,
171 | .date,
172 | .length,
173 | .course,
174 | .teacher {
175 |   margin-top: 30px;
176 | }
177 | 
178 | #course {
179 |   margin-top: 15px;
180 |   font-size: 20px;
181 |   font-family: sans-serif;
182 |   padding: 10px;
183 |   border: 1px solid rgba(128, 128, 128, 0.563);
184 |   outline: none;
185 | }
186 | 
187 | label {
188 |   margin-top: 25px;
189 | }
190 | 
191 | input {
192 |   background-color: transparent;
193 |   border: none;
194 |   font-size: 18px;
195 |   width: 300px;
196 |   border-bottom: 1px solid rgba(128, 128, 128, 0.563);
197 | }
198 | 


--------------------------------------------------------------------------------
/font/ArnoPro-BoldDisplay.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/ArnoPro-BoldDisplay.otf


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts.zip


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProBdIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProBdIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProBlk.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProBlk.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProBlkCn.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProBlkCn.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProBlkIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProBlkIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProBold.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProBold.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnBd.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnBd.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnBdIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnBdIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnBlkIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnBlkIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnLight.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnLight.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnLtIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnLtIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnRg.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnRg.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnRgIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnRgIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnTh.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnTh.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnThIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnThIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnUltBlk.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnUltBlk.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnUltBlkIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnUltBlkIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnUltLt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnUltLt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProCnUltLtIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProCnUltLtIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProLight.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProLight.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProLtIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProLtIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProMdCn.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProMdCn.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProMdCnIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProMdCnIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProMdIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProMdIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProMedium.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProMedium.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProRg.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProRg.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProRgIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProRgIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProTh.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProTh.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProThIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProThIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProUltBlk.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProUltBlk.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProUltBlkIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProUltBlkIt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProUltLt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProUltLt.TTF


--------------------------------------------------------------------------------
/font/applied-sans-pro-cufonfonts/AppliedSansProUltLtIt.TTF:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/font/applied-sans-pro-cufonfonts/AppliedSansProUltLtIt.TTF


--------------------------------------------------------------------------------
/img/BG.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/BG.jpg


--------------------------------------------------------------------------------
/img/BG.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/BG.mp4


--------------------------------------------------------------------------------
/img/Learning.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/Learning.png


--------------------------------------------------------------------------------
/img/LinkedIn left-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/LinkedIn left-2.png


--------------------------------------------------------------------------------
/img/LinkedIn left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/LinkedIn left.png


--------------------------------------------------------------------------------
/img/Sign1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/Sign1.JPG


--------------------------------------------------------------------------------
/img/Sign2.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/Sign2.JPG


--------------------------------------------------------------------------------
/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/icon.png


--------------------------------------------------------------------------------
/img/lid.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/lid.jpg


--------------------------------------------------------------------------------
/img/linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/linkedin.png


--------------------------------------------------------------------------------
/img/ud.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/ud.jpg


--------------------------------------------------------------------------------
/img/udemy-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/udemy-logo.png


--------------------------------------------------------------------------------
/img/udemy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devpayoub/Certificate-Generator/2825de084f835c675eeb74eb18e3087d49afe655/img/udemy.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <!--
 4 | Designed and Developed By Ayoub Trabelsi
 5 | Github:/devpayoub
 6 | Email:trabelsi.ayoub1998@gmail.com
 7 | -->
 8 | <head>
 9 |     <meta charset="utf-8">
10 |     <meta name="viewport" content="width=device-width, initial-scale=1">
11 |     <title>Certificate Generator</title>
12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
13 |         integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
14 |     <link rel="stylesheet" href="css/style.css">
15 |     <!-- Font -->
16 |     <link rel="preconnect" href="https://fonts.googleapis.com">
17 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18 |     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
19 |     <link rel="icon" type="image/x-icon" href="img/icon.png">
20 | </head>
21 | 
22 | <body>
23 |     <video id="background-video" autoplay loop muted poster="img/BG.mp4">
24 |         <source src="img/BG.mp4" type="video/mp4">
25 |     </video>
26 |     <div class="alert alert-warning alert-dismissible fade show" role="alert">
27 |         <strong>Important!</strong> This website is made for fun purpose only. Please don't use these generated
28 |         certificates in your professional work.
29 |         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
30 |     </div>
31 |     
32 |     <div class="container">
33 |         <div class="enter">
34 |             <h1>Hey! Welcome to Certificate Generator</h1>
35 |             <h3>Please select an Online Learning Platform 👇🏻 </h3>
36 |             <div class="dropdown">
37 |                 <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
38 |                     data-bs-toggle="dropdown" aria-expanded="false">
39 |                     Select
40 |                 </a><br><br><br><br><br><br>
41 |                 <div class="alert alert-warning alert-dismissible fade show" role="alert">
42 |                     <strong>PS :</strong> Designed and Developed By Ayoub Trabelsi
43 |                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
44 |                 </div>
45 |                 
46 |                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
47 |                     <li><a class="dropdown-item" href="udemy.html" target="_blank">Udemy</a></li>
48 |                     <li><a class="dropdown-item" href="linkedin.html" target="_blank">LinkedIn Learning</a></li>
49 | 
50 |                 </ul>
51 |             </div>
52 |         </div>
53 |     </div>
54 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
55 |         integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
56 |         crossorigin="anonymous"></script>
57 | </body>
58 | 
59 | </html>
60 | 


--------------------------------------------------------------------------------
/js/linkedin.js:
--------------------------------------------------------------------------------
  1 | let fname = document.getElementById("fname");
  2 | let lname = document.getElementById("lname");
  3 | let date = document.getElementById("date");
  4 | let length = document.getElementById("length");
  5 | let course = document.getElementById("course");
  6 | let form = document.getElementById("form");
  7 | let container = document.querySelector(".container");
  8 | 
  9 | let generate = document.getElementById("Generate");
 10 | generate.addEventListener("click", (e) => {
 11 |   let first_name = fname.value;
 12 |   let last_name = lname.value;
 13 |   let Date = date.value;
 14 |   let c_length = length.value;
 15 |   let course_name = course.value;
 16 |   e.preventDefault();
 17 |   fname.value = "";
 18 |   lname.value = "";
 19 |   course.value = "";
 20 |   date.value = "";
 21 |   length.value = "";
 22 | 
 23 |   form.style.display = "none";
 24 |   container.style.backgroundColor = "white";
 25 | 
 26 |   //Random Digits
 27 |   a = 1; //Min value
 28 |   b = 9; //Max Value
 29 |   let rand = a + (b - 1) * Math.random(); //Main Formula
 30 |   let rand2 = Math.round(rand);
 31 |   c = 1; //Min value
 32 |   d = 9; //Max Value
 33 |   let rand3 = c + (d - 1) * Math.random(); //Main Formula
 34 |   let rand4 = Math.round(rand3);
 35 | 
 36 |   let certificate = document.getElementById("certificate");
 37 |   certificate.style.display = "block";
 38 |   certificate.innerHTML = `<div class="outer">
 39 |   <div class="light-br">
 40 |       <div class="dark-br">
 41 |           <div class="main-content">
 42 |               <div class="left-side">
 43 |                   <img src="img/LinkedIn left-2.png" alt="">
 44 |               </div>
 45 |               <div class="right-content">
 46 |                   <div class="logo">
 47 |                       <img id="logo" src="img/Learning.png" alt="">
 48 |                   </div>
 49 |                   <div class="congrats">
 50 |                       <h2>Certificate of Completion</h2>
 51 |                       <h3>Congratulations, ${first_name} ${last_name}</h3>
 52 |                   </div>
 53 |                   <div class="course-name">
 54 |                       <h1>${course_name}</h1>
 55 |                       <div class="completion">
 56 |                           <h3>Course completed on ${Date}</h3>
 57 |                           <h3 id="clength">•&nbsp;&nbsp;${c_length}</h3>
 58 |                       </div>
 59 |                   </div>
 60 |                   <div class="para">
 61 |                       <h2>By continuing to learn, you have expanded your perspective, sharpened your
 62 |                           skills, and made yourself even more in demand.</h2>
 63 |                   </div>
 64 |                   <div class="authority">
 65 |                       <div class="part-1">
 66 |                           <img id="sign" src="img/Sign2.JPG" alt="">
 67 |                           <h3>VP, Learning Content at LinkedIn</h3>
 68 |                       </div>
 69 |                       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div
 70 |                           class="vl"></div>
 71 |                       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div
 72 |                           class="part-2">
 73 |                           <h3>LinkedIn Learning</h3>
 74 |                           <h3>1000 W Maude Ave</h3>
 75 |                           <h3>Sunnyvale, CA 94085</h3>
 76 |                       </div>
 77 |                   </div>
 78 |                   <div class="certificate-id">Certificate Id: AU${rand4}IZ${rand2}a${rand2}rPeUmO_IE${rand4}R${rand4}0L${rand4}ac${rand2}sN</div>
 79 |               </div>
 80 |           </div>
 81 |       </div>
 82 |   </div>
 83 |   </div>`;
 84 |   document.getElementById("download").style.display = "block";
 85 | });
 86 | 
 87 | //Download PDF
 88 | 
 89 | let download = document.getElementById("download");
 90 | download.addEventListener("click", () => {
 91 |   var opt = {
 92 |     margin: 1,
 93 |     filename: "LinkedIn-certificate.pdf",
 94 |     image: { type: "jpeg", quality: 0.98 },
 95 |     html2canvas: { scale: 2 },
 96 |     jsPDF: { unit: "px", format: "a2", orientation: "landscape" },
 97 |   };
 98 | 
 99 |   html2pdf().set(opt).from(certificate).save();
100 | });
101 | 


--------------------------------------------------------------------------------
/js/udemy.js:
--------------------------------------------------------------------------------
  1 | // Variables Declarations
  2 | let fname = document.getElementById("fname");
  3 | let lname = document.getElementById("lname");
  4 | let date = document.getElementById("date");
  5 | let length = document.getElementById("length");
  6 | let course = document.getElementById("course");
  7 | let teacher = document.getElementById("teacher");
  8 | let instruct = "Instructors";
  9 | let form = document.getElementById("form");
 10 | let container = document.querySelector(".container");
 11 | 
 12 | let certificate_no = "UC-3308c41b-93cb-485a-9ee3-450729f8ef73";
 13 | 
 14 | // Random Number Generation for Certificate Number & Reference Number
 15 | a = 400000; //Min value
 16 | b = 485000; //Max Value
 17 | let rand = a + (b - 1) * Math.random(); //Main Formula
 18 | let rand2 = Math.round(rand);
 19 | 
 20 | c = 30; //Min value
 21 | d = 90; //Max Value
 22 | let rand3 = c + (d - 1) * Math.random(); //Main Formula
 23 | let rand4 = Math.round(rand3);
 24 | 
 25 | e = 1; //Min value
 26 | f = 9; //Max Value
 27 | let rand5 = e + (f - 1) * Math.random(); //Main Formula
 28 | let rand6 = Math.round(rand5);
 29 | 
 30 | // Main Code Starts Here
 31 | let generate = document.getElementById("Generate");
 32 | generate.addEventListener("click", (e) => {
 33 |   e.preventDefault();
 34 |   let first_name = fname.value;
 35 |   let last_name = lname.value;
 36 |   let Date = date.value;
 37 |   let c_length = length.value;
 38 |   let course_name = course.value.replace(/\n/g, "<br>");
 39 |   let instructor = teacher.value;
 40 | 
 41 |   if (
 42 |     first_name === "" ||
 43 |     last_name === "" ||
 44 |     Date === "" ||
 45 |     c_length === "" ||
 46 |     course_name === "" ||
 47 |     instructor === ""
 48 |   ) {
 49 |     alert("Input fields can't be empty.");
 50 |   } else {
 51 |     if (instructor.includes(",")) {
 52 |       instruct = "Instructors";
 53 |     }
 54 |     fname.value = "";
 55 |     lname.value = "";
 56 |     course.value = "";
 57 |     date.value = "";
 58 |     teacher.value = "";
 59 |     length.value = "";
 60 | 
 61 |     form.style.display = "none";
 62 |     container.style.backgroundColor = "white";
 63 |     container.style.height = "auto";
 64 | 
 65 |     let certificate = document.getElementById("certificate");
 66 |     certificate.style.backgroundColor = "#f8f9fb";
 67 |     certificate.style.display = "flex";
 68 |     certificate.innerHTML = `<div class="logo">
 69 |     <img id="udemy-logo" src="img/udemy-logo.png" alt="">
 70 |     <div class="right-side">
 71 |                       <div class="c-no">Certificate no: UC-3308c41b-93cb-485a-9ee3-${rand2}f8ef${rand4}</div>
 72 |                       <div class="c-url">Certificate url: ude.my/UC-3308c41b-93cb-485a-9ee3-${rand2}f8ef${rand4}</div>
 73 |                       <div class="ref-no">Reference Number: 000${rand6}</div>
 74 |                   </div>
 75 |   </div>
 76 |   <div class="content">
 77 |     <h3>CERTIFICATE OF COMPLETION</h3>
 78 |     <h1 id="course-name">${course_name}</h1>
 79 |     <h4>${instruct}&nbsp;<b>${instructor}</b></h4>
 80 |   </div>
 81 |   <div class="user">
 82 |     <h1 id="name">${first_name} ${last_name}</h1>
 83 |     <h4>Date &nbsp;<b>${Date}</b></h4>
 84 |     <h4>Length &nbsp;<b>${c_length} total hours</b></h4>
 85 |   </div>
 86 |   `;
 87 |     document.getElementById("download").style.display = "block";
 88 |   }
 89 | });
 90 | 
 91 | //Download PDF
 92 | 
 93 | let download = document.getElementById("download");
 94 | download.addEventListener("click", () => {
 95 |   var opt = {
 96 |     margin: 1,
 97 |     filename: `Udemy-certificate.pdf`,
 98 |     image: { type: "jpeg", quality: 0.98 },
 99 |     html2canvas: { scale: 2 },
100 |     jsPDF: { unit: "px", format: "c2", orientation: "landscape" },
101 |   };
102 | 
103 |   html2pdf().set(opt).from(certificate).save();
104 | });
105 | 


--------------------------------------------------------------------------------
/linkedin.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <!--
  4 | Designed and Developed By Ayoub Trabelsi
  5 | Github:/devpayoub
  6 | Email:trabelsi.ayoub1998@gmail.com
  7 | -->
  8 | <head>
  9 |     <meta charset="UTF-8">
 10 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 11 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 12 |     <title>LinkedIn Learning Certificate Generator</title>
 13 |     <link rel="stylesheet" href="css/linkedin.css">
 14 |     <link rel="icon" type="image/x-icon" href="img/linkedin.png">
 15 | 
 16 |     <!-- Font -->
 17 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 18 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 19 |     <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
 20 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 21 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 22 |     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">
 23 | 
 24 | </head>
 25 | 
 26 | <body>
 27 |     <div class="container">
 28 |         <form action="#" id="form">
 29 |             <div class="first-name">
 30 |                 <label for="fname"> First Name: <br>
 31 |                     <input type="text" name="fname" id="fname">
 32 |                 </label>
 33 |             </div>
 34 |             <div class="last-name">
 35 |                 <label for="lname"> Last Name: <br>
 36 |                     <input type="text" name="lname" id="lname">
 37 |                 </label>
 38 |             </div>
 39 |             <div class="date">
 40 |                 <label for="date"> Date of Completion: <br>
 41 |                     <input type="text" name="date" id="date" placeholder="Example: Jan 25, 2000">
 42 |                 </label>
 43 |             </div>
 44 |             <div class="length">
 45 |                 <label for="length"> Length of Course: <br>
 46 |                     <input type="text" name="length" id="length" placeholder="Example: 1 hour 30 minutes">
 47 |                 </label>
 48 |             </div>
 49 |             <div class="course">
 50 |                 <label for="course"> Course Name: <br>
 51 |                     <input type="text" name="course" id="course">
 52 |                 </label>
 53 |             </div>
 54 |             <div class="btn">
 55 |                 <button id="Generate" type="submit">Generate</button>
 56 |             </div>
 57 |         </form>
 58 | 
 59 |         <div id="certificate">
 60 |             <!-- <div class="outer">
 61 |                 <div class="light-br">
 62 |                     <div class="dark-br">
 63 |                         <div class="main-content">
 64 |                             <div class="left-side">
 65 |                                 <img src="img/LinkedIn left-2.png" alt="">
 66 |                             </div>
 67 |                             <div class="right-content">
 68 |                                 <div class="logo">
 69 |                                     <img id="logo" src="img/Learning.png" alt="">
 70 |                                 </div>
 71 |                                 <div class="congrats">
 72 |                                     <h2>Certificate of Completion</h2>
 73 |                                     <h3>Congratulations, Shubhojeet Bera</h3>
 74 |                                 </div>
 75 |                                 <div class="course-name">
 76 |                                     <h1>MySQL Installation and Certification</h1>
 77 |                                     <div class="completion">
 78 |                                         <h3>Course completed on Sep 25, 2000 </h3>
 79 |                                         <li>1 hour 41 minutes</li>
 80 |                                     </div>
 81 |                                 </div>
 82 |                                 <div class="para">
 83 |                                     <h2>By continuing to learn, you have expanded your perspective, sharpened your
 84 |                                         skills, and made yourself even more in demand.</h2>
 85 |                                 </div>
 86 |                                 <div class="authority">
 87 |                                     <div class="part-1">
 88 |                                         <img id="sign" src="img/Sign2.JPG" alt="">
 89 |                                         <h3>VP, Learning Content at LinkedIn</h3>
 90 |                                     </div>
 91 |                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div
 92 |                                         class="vl"></div>
 93 |                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div
 94 |                                         class="part-2">
 95 |                                         <h3>LinkedIn Learning</h3>
 96 |                                         <h3>1000 W Maude Ave</h3>
 97 |                                         <h3>Sunnyvale, CA 94085</h3>
 98 |                                     </div>
 99 |                                 </div>
100 |                                 <div class="certificate-id">Certificate Id: AU3IZ5a5rPeUmO_IE8R80L3ac5sN</div>
101 |                             </div>
102 |                         </div>
103 |                     </div>
104 |                 </div>
105 |             </div> -->
106 |         </div>
107 |         <button id="download">Download PDF</button>
108 |     </div>
109 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
110 |     <script src="js/linkedin.js"></script>
111 | 
112 | 
113 | </body>
114 | 
115 | </html>


--------------------------------------------------------------------------------
/udemy.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <!--
  4 | Designed and Developed By Ayoub Trabelsi
  5 | Github:/devpayoub
  6 | Email:trabelsi.ayoub1998@gmail.com
  7 | -->
  8 |   <head>
  9 |     <meta charset="utf-8" />
 10 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 11 |     <title>Udemy Certificate Generator</title>
 12 |     <link rel="stylesheet" href="css/udemy.css" />
 13 |     <link rel="icon" type="image/x-icon" href="img/udemy.png" />
 14 | 
 15 |     <!-- Font -->
 16 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 17 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 18 |     <link
 19 |       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap"
 20 |       rel="stylesheet"
 21 |     />
 22 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 23 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 24 |     <link
 25 |       href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
 26 |       rel="stylesheet"
 27 |     />
 28 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 29 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 30 |     <link
 31 |       href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
 32 |       rel="stylesheet"
 33 |     />
 34 |     <link
 35 |       href="//db.onlinewebfonts.com/c/7db56b18988b0db9d84b3bfd3d4f9b6b?family=DistrictProW01-Medium"
 36 |       rel="stylesheet"
 37 |       type="text/css"
 38 |     />
 39 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 40 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 41 |     <link
 42 |       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap"
 43 |       rel="stylesheet"
 44 |     />
 45 |     <link
 46 |       href="//db.onlinewebfonts.com/c/ceae0b0ba6ed654c11bebaa577938012?family=Arno+Pro+Display"
 47 |       rel="stylesheet"
 48 |       type="text/css"
 49 |     />
 50 |   </head>
 51 | 
 52 |   <body>
 53 |     <div class="container">
 54 |       <form action="#" id="form">
 55 |         <div class="first-name">
 56 |           <label for="fname">
 57 |             First Name: <br />
 58 |             <input type="text" name="fname" id="fname" required/>
 59 |           </label>
 60 |         </div>
 61 |         <div class="last-name">
 62 |           <label for="lname">
 63 |             Last Name: <br />
 64 |             <input type="text" name="lname" id="lname" required/>
 65 |           </label>
 66 |         </div>
 67 |         <div class="date">
 68 |           <label for="date">
 69 |             Date of Completion: <br />
 70 |             <input
 71 |               type="text"
 72 |               name="date"
 73 |               id="date"
 74 |               placeholder="Example: Jan. 25, 2000" required
 75 |             />
 76 |           </label>
 77 |         </div>
 78 |         <div class="length">
 79 |           <label for="length">
 80 |             Length of Course: <br />
 81 |             <input type="number" name="length" id="length" required/>
 82 |           </label>
 83 |         </div>
 84 |         <div class="course">
 85 |           <label for="course">Course Name:</label>
 86 |           <br />
 87 |           <textarea name="course" id="course" rows="2" cols="28" required></textarea>
 88 |         </div>
 89 | 
 90 |         <div class="teacher">
 91 |           <label for="teacher">
 92 |             Instructor's Name: <br />
 93 |             <input type="text" name="teacher" id="teacher" required/>
 94 |           </label>
 95 |         </div>
 96 |         <div class="btn">
 97 |           <button id="Generate" type="submit">Generate</button>
 98 |         </div>
 99 |       </form>
100 | 
101 |       <div id="certificate">
102 |         <!-- <div class="logo">
103 |                 <img id="udemy-logo" src="img/udemy-logo.png" alt="">
104 |                 <div class="right-side">
105 |                     <div class="c-no">Certificate no: </div>
106 |                     <div class="c-url">Certificate url: ude.my/</div>
107 |                     <div class="ref-no"></div>
108 |                 </div>
109 |             </div>
110 |             <div class="content">
111 |                 <h3>CERTIFICATE OF COMPLETION</h3>
112 |                 <h1 id="course-name">JavaScript - Basics to Advanced</h1>
113 |                 <h4>Instructors &nbsp;&nbsp;<b>Bhuvan Bam</b></h4>
114 |             </div>
115 |             <div class="user">
116 |                 <h1 id="name">Shubhojeet Bera</h1>
117 |                 <h4>Date &nbsp;<b>April 29, 20222</b></h4>
118 |                 <h4>Length &nbsp;<b>4 total hours</b></h4>
119 |             </div> -->
120 |       </div>
121 |       <button id="download">Download PDF</button>
122 |     </div>
123 | 
124 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
125 |     <script src="js/udemy.js"></script>
126 |     <script>
127 |         // Check if the site is opened on a mobile device
128 |         function isMobileDevice() {
129 |           return (
130 |             typeof window.orientation !== "undefined" ||
131 |             navigator.userAgent.indexOf("IEMobile") !== -1
132 |           );
133 |         }
134 |       
135 |         // Show alert if the site is opened on a mobile device
136 |         if (isMobileDevice()) {
137 |           alert("This site is best viewed on a desktop or laptop.");
138 |         }
139 |       </script>
140 |       
141 |   </body>
142 | </html>
143 | 


--------------------------------------------------------------------------------