More changes

index.html

@@ -18,7 +18,7 @@ <h1><img src="Images/1.png" id="sitelogo" alt="website logo">RAFAY</h1>
             <ul class="menu">
                 <li><a href="#about">ABOUT</a></li>
                 <li><a href="#skill">SKILLS</a></li>
-                <li><a href="#exp">EXPERIENCE</a></li>
+                <li><a href="#technologies">EXPERIENCE</a></li>
                 <li><a href="#contact">CONTACT ME</a></li>
             </ul>
         </nav>
@@ -63,23 +63,35 @@ <h2>About Me</h2>
             <h2>Skills</h2>
             </div>
             <div class="allcards">
-              <div class="card">Python</div>
+              <div class="card" id="python">Python</div>
 
 
-              <div class="card">Java</div>
+              <div class="card" id="java">Java</div>
 
 
-              <div class="card">WordPress</div>
+              <div class="card" id="wordpress">WordPress</div>
 
 
-              <div class="card">HTML | CSS | JS</div>
+              <div class="card" id="htmlcss">HTML | CSS | JS</div>
 
 
             </div>
         </section>
 
-        <section class="experience" id="exp">
-            <h2></h2>
+        <section class="technologies" id="technologies">
+            <div>
+              <h2>Technologies</h2>
+            </div>
+            <div class="slider-container">
+              <div class="slider">
+                  <div class="slide"><img src="Images/Logos/1.png" alt="C++"></div>
+                  <div class="slide"><img src="Images/Logos/2.png" alt="Python"></div>
+                  <div class="slide"><img src="Images/Logos/3.png" alt="Java"></div>
+                  <div class="slide"><img src="Images/Logos/4.png" alt="JavaScript"></div>
+                  <div class="slide"><img src="Images/Logos/5.png" alt="HTML"></div>
+                  <div class="slide"><img src="Images/Logos/6.png" alt="CSS"></div>
+              </div>
+          </div>
         </section>
 
 

script.js

@@ -92,4 +92,37 @@ document.addEventListener("DOMContentLoaded", function() {
       return false;
     }
   });
-
+
+
+  document.addEventListener("DOMContentLoaded", function() {
+    const slider = document.querySelector('.slider');
+    const slides = Array.from(slider.children);
+    const slideWidth = slides[0].getBoundingClientRect().width;
+
+    // Clone the slides to create an infinite loop
+    slides.forEach(slide => {
+        const clone = slide.cloneNode(true);
+        slider.appendChild(clone);
+    });
+
+    let currentIndex = 0;
+
+    function moveSlider() {
+        currentIndex++;
+        if (currentIndex >= slides.length) {
+            slider.style.transition = 'none';
+            slider.style.transform = 'translateX(0)';
+            currentIndex = 0;
+            setTimeout(() => {
+                slider.style.transition = 'transform 1s linear';
+                moveSlider();
+            }, 20);
+        } else {
+            slider.style.transform = `translateX(-${slideWidth * currentIndex}px)`;
+            setTimeout(moveSlider, 2000); // Adjust the speed (in milliseconds) as needed
+        }
+    }
+
+    slider.style.transition = 'transform 1s linear';
+    setTimeout(moveSlider, 2000);
+});

styles.css

@@ -228,8 +228,24 @@ nav ul li a:hover {
   transition: all 0.5s;
 }
 
-.card:hover:after {
+/* .card:hover:after {
   content: "HELLO";
+} */
+
+#python:hover:after{
+  content:"Python";
+}
+
+#java:hover:after{
+  content:"Java";
+}
+
+#wordpress:hover:after{
+  content:"Wordpress";
+}
+
+#htmlcss:hover:after{
+  content:"HTML";
 }
 
 .skills div h2{
@@ -558,6 +574,57 @@ ul {
 }
 
 
+/*Technologies*/
+.technologies{
+  padding: 6.7% 6.7%;
+}
+
+.technologies div h2{
+  color: white;
+  border-bottom: 2px solid #DA2032;
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+}
+
+.slider-container {
+  width: 80%;
+  overflow: hidden;
+  background-color:black;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  padding: 20px;
+  margin-left:120px;
+  margin-top:50px;
+}
+
+.slider {
+  display: flex;
+  animation: slide 20s linear infinite;
+}
+
+.slide {
+  min-width: 150px;
+  margin: 0 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.slide img {
+  max-width: 100%;
+  max-height: 100px;
+}
+
+@keyframes slide {
+  0% {
+      transform: translateX(0);
+  }
+  100% {
+      transform: translateX(calc(-150px * 6)); /* Adjust based on number of slides */
+  }
+}
+
+
 /*footer*/
 footer{
   display: flex;