Merge pull request #105 from AdityaSinha2305/newFeature

feat: contribution guidelines
AdityaSinha2305 · Oct 30, 2024 · cfd509a · cfd509a
2 parents 86e4861 + 895c7a3
commit cfd509a
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 0 deletions.
diff --git a/about.html b/about.html
@@ -54,6 +54,40 @@ <h2 class="project-features-title">Project Features</h2>
           </li>
         </ul>
       </div>
+
+      <div class="contribution-guide">
+        <h2>How to Contribute</h2>
+        <ol>
+          <li>
+            <span class="step">1.</span> Fork & Star⭐ this repository:
+            <pre><code>https://github.com/AdityaSinha2305/ForkTheCaptcha.git</code></pre>
+          </li>
+          <li>
+            <span class="step">2.</span> Clone the forked repository:
+            <pre><code>git clone https://github.com/your-username/ForkTheCaptcha.git</code></pre>
+          </li>
+          <li>
+            <span class="step">3.</span> Navigate to project directory:
+            <pre><code>cd ForkTheCaptcha</code></pre>
+          </li>
+          <li>
+            <span class="step">4.</span> Create a new branch:
+            <pre><code>git checkout -b your-feature-branch</code></pre>
+          </li>
+          <li>
+            <span class="step">5.</span> Make your changes and commit:
+            <pre><code>git add .</code></pre>
+            <pre><code>git commit -m "Proper commit message"</code></pre>
+          </li>
+          <li>
+            <span class="step">6.</span> Push your fork:
+            <pre><code>git push origin your-feature-branch</code></pre>
+          </li>
+          <li>
+            <span class="step">7.</span> Open a pull request, and we’ll review it!
+          </li>
+        </ol>
+      </div>
     </div>
 
     <footer>

diff --git a/styles/about.css b/styles/about.css
@@ -243,3 +243,74 @@ footer {
     padding: 60px 15px;
   }
 }
+
+
+
+/* Contribution code css */
+
+body {
+  background-color: #f9f9f9;
+  display: flex;          /* makes the body a flex container */
+  justify-content: center;      /* horizontally centers the content within the body */
+  align-items: center;        /* vertically centers the content */
+  min-height: 100vh;          /* ensures that the body fills the full viewport height, so the div stays centered on the screen. */
+  margin: 0;
+}
+
+.contribution-guide {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  max-width: 800px;
+  width: 90%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin-top: 85px;
+  margin-bottom: 40px;
+}
+
+h2 {
+  color: #333;
+  font-size: 24px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+ol {
+  list-style-type: none;
+}
+
+li {
+  margin-bottom: 15px;
+  line-height: 1.6;
+}
+
+.step {
+  color: #3b82f6;
+  font-weight: bold;
+  font-size: 1.2em;
+  margin-right: 5px;
+}
+
+
+pre {
+  background-color: #eef2ff;
+  padding: 8px;
+  border-radius: 5px;
+  margin-top: 5px;
+  color: #3b82f6;
+  font-family: "Courier New", Courier, monospace;
+  overflow-x: auto;
+}
+
+code {
+  background-color: #f3f3f3;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #d31775;
+  font-family: "Courier New", Courier, monospace;
+}
+
+/* 
+pre code {
+  color: inherit;
+} */