Merge pull request #10 from rajdesai17/aboutus-section

transformed the basic HTML structure of your Experience Certificate G…
ChromeGaming · Jun 22, 2024 · f7536f1 · f7536f1
2 parents 5f61191 + 379bf90
commit f7536f1
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,33 @@
  <script src="https://kit.fontawesome.com/2815a7015d.js" crossorigin="anonymous"></script>
 </head>
 <body>
+ <div class="container">
+ <div id="about-us">
+ <strong><h1>About us</h1></strong>
+ <p>created this Experience Certificate Generator to simplify the process of creating professional certificates for employment verification. This free tool allows you to quickly generate a certificate with your information, saving you time and effort.</p>
+ <p>Feel free to try it out and let us know what you think!</p>
+ </div>
+ <h1>Experience Certificate Generator</h1>
+ <form id="certificateForm">
+ <label for="employeeName">Employee Name:</label>
+ <input type="text" id="employeeName" required>
+
+ <label for="companyName">Company Name:</label>
+ <input type="text" id="companyName" required>
+
+ <label for="duration">Duration:</label>
+ <input type="text" id="duration" required>
+
+ <label for="designation">Designation:</label>
+ <input type="text" id="designation" required>
+
+ <button type="submit">Generate Certificate</button>
+ </form>
+
+ <div id="certificateOutput" class="certificate-preview hidden">
+ <h2>Experience Certificate</h2>
+ <div id="certificateContent"></div>
+ <button id="downloadBtn" class="hidden">Download</button>
  <div class="container">
  <h1>Experience Certificate Generator</h1>
  <form>

diff --git a/styles.css b/styles.css
@@ -10,6 +10,69 @@ body {
 }
 
 .container {
+ max-width: 500px;
+ margin: 0 auto;
+ padding: 20px;
+ }
+
+ h1 {
+ text-align: center;
+ }
+
+ form {
+ margin-bottom: 20px;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 5px;
+ }
+
+ input[type="text"] {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ margin-bottom: 10px;
+ }
+
+ button {
+ background-color: #4CAF50;
+ color: white;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+
+ .certificate-preview {
+ margin-top: 20px;
+ border: 1px solid #ccc;
+ padding: 20px;
+ font-family: Arial, sans-serif;
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ #certificateContent {
+ margin-bottom: 20px;
+ }
+
+ #downloadBtn {
+ margin-top: 10px;
+ }
+ #about-us{
+ text-align: center;
+ background-color: #f5f5f5; /* Light gray background example */
+ padding: 20px; /* Add some padding for better separation */
+ margin-bottom: 20px; /* Add some margin below the section */
+ border-radius: 50px; /* Add rounded corners with 5px radius */
+ }
+ #about-us h2{
+ font-weight: bold;
+}
  background: #ffffff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);