Merge branch 'develop' into Move-NumbersCounter-section-logic-to-numb…

…ersCounterContainer.js-#140
front-end-by-rimantas · May 3, 2022 · 9187e65 · 9187e65
2 parents 98d5e4d + 9616f87
commit 9187e65
Show file tree

Hide file tree

Showing 14 changed files with 175 additions and 28 deletions.
diff --git a/css/components/heading.css b/css/components/heading.css
@@ -22,6 +22,7 @@
 
 .section-title.page-name {
   font-size: 48px;
+  margin: 0;
 }
 
 p.section-description {

diff --git a/css/components/pageName.css b/css/components/pageName.css
@@ -17,3 +17,14 @@
   font-size: 14px;
   font-weight: 300;
 }
+
+#pageName {
+  padding: 0;
+  margin-top: 70px;
+}
+
+.container > .background-spacing {
+  padding: 90px 0px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
diff --git a/css/components/testimonials.css b/css/components/testimonials.css
@@ -0,0 +1,64 @@
+.testimonials-slider-content {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.testimonials-card {
+  overflow: hidden;
+  margin: 20px;
+  background-color: var(--secondary-color);
+}
+
+.testimonials-content {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: 25px 30px 12px 30px;
+}
+
+.testimonials-content:hover .section-smaller {
+  color: var(--primary-color);
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.testimonials-content .section-smaller {
+  color: var(--fourth-color);
+}
+
+.testimonials-content .testimonials-img {
+  border-radius: 50%;
+  width: 30px;
+}
+
+.testimonials-actions {
+  position: absolute;
+  bottom: -45px;
+  right: 45%;
+}
+
+@media (min-width: 1025px) {
+  .testimonials-actions {
+    right: -45px;
+    top: 40%;
+  }
+}
+@media (min-width: 1025px) {
+  .carousel-btn {
+    display: block;
+  }
+}
+.carousel-btn {
+  padding: 14px;
+  background-color: var(--secondary-color);
+  box-shadow: -10px 10px 30px 0px rgb(203, 202, 202);
+  border: 0.5px solid var(--secondary-color);
+}
+.carousel-btn:hover {
+  background-color: var(--primary-color);
+  transition: 0.3s ease;
+  cursor: pointer;
+  color: var(--secondary-color);
+}
diff --git a/css/pages/about.css b/css/pages/about.css
@@ -9,6 +9,7 @@
 @import '../components/form.css';
 @import '../components/hover.css';
 @import '../components/heading.css';
+@import '../components/testimonials.css';
 @import '../components/carousel.css';
 
 /* sections */

diff --git a/css/pages/home.css b/css/pages/home.css
@@ -43,6 +43,7 @@
 /* end of LatestFeaturedProjects */
 
 /* Testimonials */
+@import '../components/testimonials.css';
 /* end of Testimonials */
 
 /* Plans */

diff --git a/css/pages/services.css b/css/pages/services.css
@@ -32,6 +32,7 @@
 /* end of Plans */
 
 /* Testimonials */
+@import '../components/testimonials.css';
 /* end of Testimonials */
 
 /* FOOTER */

diff --git a/js/components/sections/footerSection.js b/js/components/sections/footerSection.js
@@ -1,5 +1,5 @@
 const footerSection = (selector) => {
-  const DOM = document.querySelector(selector)
+  const DOM = document.querySelector(selector);
   DOM.innerHTML = `
   <div class="row">
         <div class="col-12 col-sm-6 col-lg-5">
@@ -18,7 +18,7 @@ const footerSection = (selector) => {
         <div class="col-12 col-sm-6 col-lg-5">
           <h4 class="section-smaller">Newsletter</h4>
           <p class="section-description">Stay updated with our latest trends</p>
-          <form class="col-12 col-md-6 ml-lg-1">
+          <form id="forma" class="col-12 col-md-6 ml-lg-1">
             <input
               class="email"
               type="email"
@@ -46,7 +46,12 @@ const footerSection = (selector) => {
             ><i class="fa-brands fa-behance"></i
           ></a>
         </div>
-      </div>`
-}
+      </div>`;
 
-export { footerSection }
+  document.addEventListener('submit', (e) => {
+    e.preventDefault();
+    formDOM.querySelector('input').value = '';
+  });
+};
+
+export { footerSection };
diff --git a/js/components/sections/pageNameSection.js b/js/components/sections/pageNameSection.js
@@ -13,7 +13,7 @@ const pageNameSection = (selector) => {
     pageName = 'Contact Us';
   }
   DOM.innerHTML = `
-  <div class="row">
+  <div class="row background-spacing">
         <div class="flex-center">
           <h1 class="section-title page-name">${pageName}</h1>
           <div class="inline">
@@ -23,7 +23,7 @@ const pageNameSection = (selector) => {
           </div>
         </div>
       </div>
-  `
-}
+  `;
+};
 
-export { pageNameSection }
+export { pageNameSection };
diff --git a/js/components/sections/projectsSection.js b/js/components/sections/projectsSection.js
@@ -2,7 +2,7 @@ import { featuredProjectsList } from '../../components/featuredProjectsList.js/f
 import { featuredProjectsData } from '../../data/featuredProjectsData.js';
 
 const projectsSection = (selector) => {
-  const DOM = document.querySelector(selector)
+  const DOM = document.querySelector(selector);
   let imgPath = '';
   if (document.URL.includes('pages')) {
     imgPath = '../.';
@@ -26,21 +26,28 @@ const projectsSection = (selector) => {
         <a class="sub-header filter" href="#projects">PRINTING</a>
       </div>
     </div>
-    <div id="featuredProjects_block" class="row">${featuredProjectsList('#featuredProjects_block', featuredProjectsData, imgPath)}</div> `;
+    <div id="featuredProjects_block" class="row">${featuredProjectsList(
+      '#featuredProjects_block',
+      featuredProjectsData,
+      imgPath
+    )}</div> `;
 
   // const animationAdd = (block) => {
   //   block.classList.add('animation');
   //   setTimeout(function () {
   //   block.classList.remove('animation');
   //   }, 500);
   // };
-  
-  const elementsList =  document.getElementsByClassName("filter");
+
+  const elementsList = document.getElementsByClassName('filter');
   for (let i = 0; i < elementsList.length; i++) {
-    elementsList[i].addEventListener("click", function() {
-      const dabartinis = document.getElementsByClassName("active-filter");
-      dabartinis[0].className = dabartinis[0].className.replace("active-filter", "");
-      this.className += " active-filter";
+    elementsList[i].addEventListener('click', function () {
+      const dabartinis = document.getElementsByClassName('active-filter');
+      dabartinis[0].className = dabartinis[0].className.replace(
+        'active-filter',
+        ''
+      );
+      this.className += ' active-filter';
 
       function projectsFilter(card) {
         const featurai = document.getElementsByClassName('filter-card');
@@ -58,7 +65,7 @@ const projectsSection = (selector) => {
         }
       }
 
-      const aktyvus = document.querySelector(".active-filter");
+      const aktyvus = document.querySelector('.active-filter');
       if (aktyvus.innerHTML.includes('VECTOR')) {
         projectsFilter('vector');
       } else if (aktyvus.innerHTML.includes('RASTER')) {
@@ -76,6 +83,6 @@ const projectsSection = (selector) => {
       }
     });
   }
-}
+};
 
-export { projectsSection }
+export { projectsSection };
diff --git a/js/components/sections/testimonialsSection.js b/js/components/sections/testimonialsSection.js
@@ -1,5 +1,12 @@
+import { testimonialsList } from '../../components/testimonialsList/testimonialsList.js';
+import { testimonialsData } from '../../data/testimonialsData.js';
+
 const testimonialsSection = (selector) => {
   const DOM = document.querySelector(selector);
+  let imgPath = '';
+  if (document.URL.includes('pages')) {
+    imgPath = '../.';
+  }
   DOM.innerHTML = `
       <div class="row">
         <div class="col-12 col-md-10 col-lg-8 ml-md-1 ml-lg-2 center">
@@ -9,7 +16,11 @@ const testimonialsSection = (selector) => {
             it. Ask any chain smoker or even a person.
           </p>
         </div>
-        <div class="col-12">SLIDER/CAROUSEL</div>
-      </div>`
-}
-export { testimonialsSection }
+        <div class="col-12 testimonials-slider-content">${testimonialsList(
+          '#testimonials_block',
+          testimonialsData,
+          imgPath
+        )}</div>
+      </div>`;
+};
+export { testimonialsSection };
diff --git a/js/components/testimonialsList/testimonialsList.js b/js/components/testimonialsList/testimonialsList.js
@@ -0,0 +1,31 @@
+function testimonialsList(selector, data, imgPath) {
+  const DOM = document.querySelector(selector);
+  let html = `<div class="testimonials-actions">
+  <span class="lnr lnr-arrow-up carousel-btn"></span>
+  <span class="lnr lnr-arrow-down carousel-btn"></span>
+</div>`;
+  for (const item of data) {
+    html += `<div class="col-12 testimonials-slider-content">
+      <div class="testimonials-card">
+        <div class="testimonials-content">
+          <img
+            src="${imgPath}./img/blog-${item.picture}-img.webp"
+            alt="author"
+            class="testimonials-img"
+          />
+          <p class="section-description">
+          ${item.text}
+          </p>
+          <h3 class="section-smaller">${item.feedbackProvider}</h3>
+          <p class="section-description">${item.job}</p>
+        </div>
+      </div>
+    </div>
+    `;
+  }
+  if (DOM) {
+    DOM.innerHTML = html;
+  }
+  return html;
+}
+export { testimonialsList };
diff --git a/js/data/testimonialsData.js b/js/data/testimonialsData.js
@@ -0,0 +1,15 @@
+const testimonialsData = [
+  {
+    picture: 'author',
+    text: 'Do you want to be even more successful? Learn to love learning and growth. The more effort you put into improving your skills, the bigger the payoff you.',
+    feedbackProvider: 'Harriet Maxwell',
+    job: 'CEO at Google',
+  },
+  {
+    picture: 'author2',
+    text: 'A purpose is the eternal condition for success. Every former smoker can tell you just how hard it is to stop smoking cigarettes. However.',
+    feedbackProvider: 'Carolyn Craig',
+    job: 'CEO at Facebook',
+  },
+];
+export { testimonialsData };
diff --git a/js/pages/about.js b/js/pages/about.js
@@ -2,8 +2,8 @@
 import { aboutSection } from '../components/sections/aboutSection.js';
 import { footerSection } from '../components/sections/footerSection.js';
 import { headerSection } from '../components/sections/headerSection.js';
-import { testimonialsSection } from '../components/sections/testimonialsSection.js'
-import { sponsorsSection } from '../components/sections/sponsorsSection.js'
+import { testimonialsSection } from '../components/sections/testimonialsSection.js';
+import { sponsorsSection } from '../components/sections/sponsorsSection.js';
 import { pageNameSection } from '../components/sections/pageNameSection.js';
 // components execution
 
@@ -29,7 +29,6 @@ aboutSection('#about');
 /* My Qualifications end  */
 
 /* Testimonials  */
-testimonialsSection('#testimonials');
 /* end of Testimonials  */
 
 /* Sponsors  */

diff --git a/js/pages/services.js b/js/pages/services.js
@@ -14,7 +14,7 @@ import { footerSection } from '../components/sections/footerSection.js';
 import { numbersCounterContainer } from '../components/sections/numberCounterSection.js';
 import { plansSection } from '../components/sections/plansSection.js';
 import { testimonialsSection } from '../components/sections/testimonialsSection.js';
-import { servicesSection } from '../components/sections/serviceSection.js'
+import { servicesSection } from '../components/sections/serviceSection.js';
 import { pageNameSection } from '../components/sections/pageNameSection.js';
 // components execution