Testimonials section added

Functionalities/Extract-Zip/main.js

@@ -22,6 +22,7 @@ navbar.innerHTML = `<nav>
     <li><a class="btn active" href="../../index.html#home">Home</a></li>
     <li><a class="btn" href="../../index.html#about">About</a></li>
     <li><a class="btn" href="../../index.html#service">Services</a></li>
+    <li><a class="btn" href="../../index.html#testi">Testimonials</a></li>
     <li><a class="btn" href="../../contact.html">Contact</a></li>
 </ul>
 </div>

Functionalities/Img-to-Pdf/main.js

@@ -22,6 +22,7 @@ navbar.innerHTML = `<nav>
     <li><a class="btn active" href="../../index.html#home">Home</a></li>
     <li><a class="btn" href="../../index.html#about">About</a></li>
     <li><a class="btn" href="../../index.html#service">Services</a></li>
+    <li><a class="btn" href="../../index.html#testi">Testimonials</a></li>
     <li><a class="btn" href="../../contact.html">Contact</a></li>
 </ul>
 </div>

Functionalities/Resize-Image/main.js

@@ -22,6 +22,7 @@ navbar.innerHTML = `<nav>
     <li><a class="btn active" href="../../index.html#home">Home</a></li>
     <li><a class="btn" href="../../index.html#about">About</a></li>
     <li><a class="btn" href="../../index.html#service">Services</a></li>
+    <li><a class="btn" href="../../index.html#testi">Testimonials</a></li>
     <li><a class="btn" href="../../contact.html">Contact</a></li>
 </ul>
 </div>

Functionalities/Text-to-pdf/main.js

@@ -22,6 +22,7 @@ navbar.innerHTML = `<nav>
     <li><a class="btn active" href="../../index.html#home">Home</a></li>
     <li><a class="btn" href="../../index.html#about">About</a></li>
     <li><a class="btn" href="../../index.html#service">Services</a></li>
+    <li><a class="btn" href="../../index.html#testi">Testimonials</a></li>
     <li><a class="btn" href="../../contact.html">Contact</a></li>
 </ul>
 </div>

Functionalities/Word-to-Pdf/main.js

@@ -22,6 +22,7 @@ navbar.innerHTML = `<nav>
     <li><a class="btn active" href="../../index.html#home">Home</a></li>
     <li><a class="btn" href="../../index.html#about">About</a></li>
     <li><a class="btn" href="../../index.html#service">Services</a></li>
+    <li><a class="btn" href="../../index.html#testi">Testimonials</a></li>
     <li><a class="btn" href="../../contact.html">Contact</a></li>
 </ul>
 </div>

css/homepage.css

@@ -635,7 +635,6 @@ footer {
 }
 footer h3 {
   font-size: 20px;
-
   padding: 10px;
   margin: 2px;
   text-align: center;
@@ -649,6 +648,100 @@ footer h3 {
   margin-top: 40px;
   margin-left: 20px;
 }
+/* testimonils stylng  */
+.testi{
+  margin-top: 100px;
+}
+.hero{
+  background: #222;
+  height: 120vh;
+  width: 100%;
+  position: relative;
+}
+.hero h1{
+  text-align: center;
+  padding-top: 80px;
+  font-size: 4rem;
+  color: #8a39e1;
+}
+.slide-row{
+  display: flex;
+  width: 3200px;
+  overflow-x:visible;
+  transition: all 0.5s;
+}
+.slide-col{
+  width: 800px;
+  height: 400px;
+  position: relative;
+}
+.user-img{
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+.user-img img{
+  height:100%;
+border-radius: 10px;
+
+}
+.user-text{
+  background-color: #8a39e1;
+  width: 520px;
+  height: 270px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 10px;
+  color: #fff;
+  padding: 45px;
+  box-sizing:border-box;
+  z-index: 2;
+}
+.user-text p{
+  font-size: 18px;
+  line-height: 24px;
+}
+.user-text h3{
+  margin: 35px 0px 5px;
+  color: #FBB31C;
+}
+.container{
+  margin-top: 40px;
+  width: 800px;
+  height: 400px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) ;
+}
+.indicator{
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -50px;
+}
+.btn2{
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+  margin: 4px;
+  border-radius: 10px;
+  background-color: #8a39e1;
+  cursor: pointer;
+  transition: all 0.5s;
+}
+.active2{
+  width: 45px;
+}
+.testimonial{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 
 @media only screen and (max-width: 960px) {
   main .row {

index.html

@@ -60,14 +60,14 @@ <h2>About 📑</h2>
         several sites is over! Come to Student-Portal, choose your action tool, drop your file, get the work done,
         download the same. And it's done. Yeah! It's that simple. <br>
         Hope you liked our work. In case of any queries, feel free to mail us. <br> </p>
-       <span class="mail"><a href="mailto:insertemailhere@xyz.com">Email</a>.</span>
+       <span class="mail"><a href="mailto:insertemailhere@xyz.com">Email</a></span>
 
 
       </div>
     </div>
 </section>
     <!-- Services section  -->
-    <section id="service" class="service">
+<section id="service" class="service">
     <div id="services">
       <main data-aos="fade-left">
         <div class="tools-heading">
@@ -95,11 +95,94 @@ <h2>Our services<span class="toolsicon">⚙️</span></h2>
             <button><a href="./Functionalities/Resize-Image/index.html">Resize Image</a></button>
           </div>
         </div>
-      </div>
     </main>
   </div>
 </section>
 
+<!-- testimonials section  -->
+<section id="testi" class="testi">
+<div class="hero">
+  <h1>Testimonials</h1>
+
+<div class="container">
+  <div class="indicator">
+    <span class="btn2 active2"></span>
+    <span class="btn2"></span>
+    <span class="btn2"></span>
+    <span class="btn2"></span>
+  </div>
+  <div class="testimonial">
+   <div class="slide-row" id="slide">
+    <div class="slide-col">
+      <div class="user-text">
+        <p>
+          Joseph Francis "Joey" Tribbiani Jr., was one of the main characters on Friends (1994–2004) and the title character in the spin-off Joey (2004–2006). He was portrayed by Matt LeBlanc.
+        </p>
+        <h3>
+          Joey tribbiani
+        </h3>
+        <p>Actor</p>
+      </div>
+      <div class="user-img">
+        <img src="./images/person3.png" alt="">
+      </div>
+
+    </div>
+    <div class="slide-col">
+      <div class="user-text">
+        <p>
+          Monica E. Geller is a fictional character on the popular U.S. television sitcom Friends (1994–2004), played by Courteney Cox.
+        </p>
+        <h3>
+          Monika Geller
+        </h3>
+        <p>Actor</p>
+      </div>
+      <div class="user-img">
+        <img src="./images/person1.png" alt="">
+      </div>
+
+    </div>
+    <div class="slide-col">
+      <div class="user-text">
+        <p>
+          Chandler works in statistical analysis and data reconfiguration. 
+        </p>
+        <h3>
+          Chandler Bing
+        </h3>
+        <p>Actor</p>
+      </div>
+      <div class="user-img">
+        <img src="./images/person4.png" alt="">
+      </div>
+
+    </div>
+    <div class="slide-col">
+      <div class="user-text">
+        <p>
+          Rachel Lyman Field (September 19, 1894 – March 15, 1942) was an American novelist, poet, and children's fiction writer.
+        </p>
+        <h3>
+          Rachel feild
+        </h3>
+        <p>Novelist</p>
+      </div>
+      <div class="user-img">
+        <img src="./images/person2.png" alt="">
+      </div>
+
+    </div>
+  </div>
+</div>
+</div>
+
+
+</div>
+
+</section>
+
+
     <!-- Footer part  -->
     <footer>
 
@@ -114,6 +197,40 @@ <h2>Our services<span class="toolsicon">⚙️</span></h2>
       <div class="author">Student-Portal@copyright2022</div>
     </footer>
 
+<!-- script for testimonials  -->
+<script>
+  var btn2 = document.getElementsByClassName("btn2");
+  var slide = document.getElementById("slide");
+btn2[0].onclick = function(){
+  slide.style.transform ="translateX(0px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[1].onclick = function(){
+  slide.style.transform ="translateX(-800px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[2].onclick = function(){
+  slide.style.transform ="translateX(-1600px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[3].onclick = function(){
+  slide.style.transform ="translateX(-2400px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+</script>
+
     <!-- Javascript  -->
     <script src="./js/script.js"></script>
 

js/contact.js

@@ -23,6 +23,7 @@ navbar.innerHTML = `<nav>
     <li><a class="btn" href="./index.html#home">Home</a></li>
     <li><a class="btn"  href="./index.html#about-section">About</a></li>
     <li><a class="btn" href="./index.html#services">Services</a></li>
+    <li><a class="btn" href="./index.html#testi">Testimonials</a></li>
     <li><a class="btn active" href="./contact.html">Contact</a></li>
 </ul>
 </div>

js/script.js

@@ -23,6 +23,7 @@ navbar.innerHTML = `<nav>
     <li><a class="btn active" href="./index.html#home">Home</a></li>
     <li><a class="btn"  href="./index.html#about-section">About</a></li>
     <li><a class="btn" href="./index.html#services">Services</a></li>
+    <li><a class="btn" href="./index.html#testi">Testimonials</a></li>
     <li><a class="btn" href="./contact.html">Contact</a></li>
 </ul>
 </div>