Merge pull request #1456 from thevijayshankersharma/contributers

Update index.html with Contributors Section and Design Changes
jfmartinz · Jun 26, 2024 · a605d1a · a605d1a
2 parents 6f0997f + 20961ed
commit a605d1a
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 254 deletions.
diff --git a/new-website/contributor.html b/new-website/contributor.html
diff --git a/new-website/contributors.css b/new-website/contributors.css
@@ -1,3 +1,8 @@
+.contributor-card:hover{
+  transition: 0.5s;
+transform: scale(1.20);
+}
+
 ::before,
 ::after {
   box-sizing: border-box;
@@ -49,11 +54,11 @@ h1 {
   }
 
   #contributor {
-    margin: 0;
-    padding: 50px 0;
+    width: 90%;
+    max-width: 1000px;
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
   }
   .loading{

diff --git a/new-website/index.html b/new-website/index.html
@@ -16,6 +16,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="loading.css">
+    <link rel="stylesheet" href="contributors.css">
     <link rel="stylesheet" href="about.css">
 
 
@@ -32,10 +33,6 @@
 </head>
 
 <body class="bg-white dark:bg-black dark:text-white">
-    <!-- Loading Spinner -->
-    <div id="loading-spinner" class="loading-spinner">
-        <div class="spinner"></div>
-    </div>
     <!-- Progress Bar -->
     <div id="progressBar"></div>
     <script>
@@ -77,8 +74,6 @@
         href="#about">About</a>
     <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
         href="#resources">Resources</a>
-        <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-        href="contributor.html">Contributors</a>
     <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
         href="#organization">Organization</a>
     <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
@@ -255,6 +250,20 @@ <h1 class="title dark:text-white" id="organization">Organization</h1>
         </div>
     </div>
 
+    <div class="contribtors-container">
+        <div class="contribtors-content">
+            <div class="title-container">
+                <i class="fas fa-link link-icon"></i>
+                <h1 class="title dark:text-white" id="contributor-title">Contributors</h1>
+            </div>
+            <p>
+                ResourceHub thrives thanks to our amazing contributors <br> who continually enhance and support the project. We are br deeply grateful for their invaluable efforts.
+            </p>
+        </div>
+        <div id="loading1"></div>
+        <div id="contributor" class="contributor-container"></div>
+    </div>
+
 
     <!-- FAQ Section -->
     <div  id="faq" class="faq-container">
@@ -363,6 +372,7 @@ <h2 class="footer-title">ResourceHub</h2>
         });
     </script>
     <script src="particles.js"></script>
+    <script src="contibuters.js"></script>
     <script src="home.js"></script>
     <script src="Resourse.js"></script>
     <script>
@@ -389,10 +399,6 @@ <h2 class="footer-title">ResourceHub</h2>
             checkButtonVisibility();
         });
 
-        // Hide the loading spinner once the page has fully loaded
-        window.addEventListener('load', function() {
-            document.getElementById('loading-spinner').style.display = 'none';
-        });
 
         document.querySelectorAll('.faq-question').forEach(item => {
             item.addEventListener('click', (event) => {

diff --git a/new-website/style.css b/new-website/style.css
@@ -7,36 +7,6 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
 
-/* Loading Spinner Styles */
-.loading-spinner {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-}
-
-.spinner {
-  border: 8px solid #f3f3f3; /* Light grey */
-  border-top: 8px solid #3498db; /* Blue */
-  border-radius: 50%;
-  width: 60px;
-  height: 60px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-
-
 ::-webkit-scrollbar {
   width: 8.5px;
 }
@@ -1159,6 +1129,11 @@ body{
   background-color: #5f615f;
   color: white;
 }
+
+.dark .contribtors-container {
+  background-color: black;
+}
+
 .dark .slider + .slider-label .slider-circle::before{
   content: '🌙' !important;
 
@@ -1180,6 +1155,28 @@ body{
 
 /* Add these styles to the end of your existing style.css file */
 
+.contribtors-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 90%;
+  max-width: 1000px;
+  background-color: #ffffff;
+  padding: 20px;
+  margin: 40px auto; /* Adjust as needed */
+}
+
+.contribtors-container{
+  display: block;
+}
+
+.contribtors-content {
+  flex: 1;
+  max-width: 600px;
+  padding-right: 20px;
+
+}
+
 .about-section {
   background-color: white;
   padding: 40px;