From 652fbdcc188198ac28db65b31669b8ca33a34830 Mon Sep 17 00:00:00 2001
From: Eric Lay <ericlaytm@gmail.com>
Date: Mon, 25 Mar 2024 19:22:09 -0500
Subject: [PATCH] new destructr script

---
 Applight/js/destruct.js                  |  181 ++-
 Atlas/js/destruct.js                     |  181 ++-
 Browny/assets/js/destruct.js             |  181 ++-
 Browny/index.html                        |    2 +-
 Chain App Dev/assets/js/destruct.js      |  181 ++-
 ConvidMedic/index.html                   |    2 +-
 ConvidMedic/js/destruct.js               |  107 +-
 Digimedia/assets/js/destruct.js          |  181 ++-
 Drifolio-Bootstrap-master/js/destruct.js |  107 +-
 Industrial/index.html                    |    2 +-
 Industrial/js/destruct.js                |  181 ++-
 MedicalCare/js/destruct.js               |  107 +-
 ONEPage/index.html                       |  582 ++++----
 ONEPage/js/destruct.js                   |  107 +-
 Ogistic/index.html                       |    1 +
 Ogistic/js/destruct.js                   |  181 ++-
 Potoub/index.html                        |    2 +-
 Potoub/js/destruct.js                    |  181 ++-
 SBS/js/destruct.js                       |  107 +-
 Seo Dream/assets/js/destruct.js          |  181 ++-
 Space Dynamic/assets/js/destruct.js      |  181 ++-
 bootstrap-app/themes/js/destruct.js      |  107 +-
 king-of-pasta/js/destruct.js             |  107 +-
 lumia/index.html                         | 1672 +++++++++++++---------
 lumia/js/destruct.js                     |  107 +-
 mabur/index.html                         |    2 +-
 mabur/js/destruct.js                     |  107 +-
 meetup/js/destruct.js                    |  107 +-
 superfresh/index.html                    |  808 ++++++-----
 superfresh/js/destruct.js                |  107 +-
 wildflat/index.html                      |    6 +-
 wildflat/js/destruct.js                  |  107 +-
 32 files changed, 4240 insertions(+), 1933 deletions(-)

diff --git a/Applight/js/destruct.js b/Applight/js/destruct.js
index d98966b..7d887cc 100644
--- a/Applight/js/destruct.js
+++ b/Applight/js/destruct.js
@@ -1,47 +1,134 @@
-let lastScrollTop = 0;
-
-window.addEventListener(
-  "scroll",
-  function () {
-    let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
-
-    if (st > lastScrollTop) {
-      // downscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(-1)";
-      }
-    } else {
-      // upscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(1)";
-      }
-    }
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
-style.innerHTML = `
-  @keyframes melt {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(100px); opacity: 0; }
-  }
-  .melting {
-    animation: melt 2s linear forwards;
-  }
-`;
-document.head.appendChild(style);
-
-// Function to add 'melting' class to all text nodes
-function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
-  });
-}
-
-// Add event listener to the page
-document.addEventListener('click', meltText);
+//--------------Flip the img tags when scrolling --------------------//
+
+let lastScrollTop = 0;
+
+window.addEventListener(
+  "scroll",
+  function () {
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+    let elements = document.body.getElementsByTagName("img");
+
+    if (st > lastScrollTop) {
+      // downscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(-1)";
+      }
+    } else {
+      // upscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(1)";
+      }
+    }
+    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+  },
+  false
+);
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
+style.innerHTML = `
+  @keyframes melt {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(100px); opacity: 0; }
+  }
+  .melting {
+    animation: melt 2s linear forwards;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
+function meltText() {
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
+  });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
+}
+
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/Atlas/js/destruct.js b/Atlas/js/destruct.js
index d98966b..7d887cc 100644
--- a/Atlas/js/destruct.js
+++ b/Atlas/js/destruct.js
@@ -1,47 +1,134 @@
-let lastScrollTop = 0;
-
-window.addEventListener(
-  "scroll",
-  function () {
-    let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
-
-    if (st > lastScrollTop) {
-      // downscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(-1)";
-      }
-    } else {
-      // upscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(1)";
-      }
-    }
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
-style.innerHTML = `
-  @keyframes melt {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(100px); opacity: 0; }
-  }
-  .melting {
-    animation: melt 2s linear forwards;
-  }
-`;
-document.head.appendChild(style);
-
-// Function to add 'melting' class to all text nodes
-function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
-  });
-}
-
-// Add event listener to the page
-document.addEventListener('click', meltText);
+//--------------Flip the img tags when scrolling --------------------//
+
+let lastScrollTop = 0;
+
+window.addEventListener(
+  "scroll",
+  function () {
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+    let elements = document.body.getElementsByTagName("img");
+
+    if (st > lastScrollTop) {
+      // downscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(-1)";
+      }
+    } else {
+      // upscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(1)";
+      }
+    }
+    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+  },
+  false
+);
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
+style.innerHTML = `
+  @keyframes melt {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(100px); opacity: 0; }
+  }
+  .melting {
+    animation: melt 2s linear forwards;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
+function meltText() {
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
+  });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
+}
+
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/Browny/assets/js/destruct.js b/Browny/assets/js/destruct.js
index d98966b..7d887cc 100644
--- a/Browny/assets/js/destruct.js
+++ b/Browny/assets/js/destruct.js
@@ -1,47 +1,134 @@
-let lastScrollTop = 0;
-
-window.addEventListener(
-  "scroll",
-  function () {
-    let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
-
-    if (st > lastScrollTop) {
-      // downscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(-1)";
-      }
-    } else {
-      // upscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(1)";
-      }
-    }
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
-style.innerHTML = `
-  @keyframes melt {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(100px); opacity: 0; }
-  }
-  .melting {
-    animation: melt 2s linear forwards;
-  }
-`;
-document.head.appendChild(style);
-
-// Function to add 'melting' class to all text nodes
-function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
-  });
-}
-
-// Add event listener to the page
-document.addEventListener('click', meltText);
+//--------------Flip the img tags when scrolling --------------------//
+
+let lastScrollTop = 0;
+
+window.addEventListener(
+  "scroll",
+  function () {
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+    let elements = document.body.getElementsByTagName("img");
+
+    if (st > lastScrollTop) {
+      // downscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(-1)";
+      }
+    } else {
+      // upscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(1)";
+      }
+    }
+    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+  },
+  false
+);
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
+style.innerHTML = `
+  @keyframes melt {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(100px); opacity: 0; }
+  }
+  .melting {
+    animation: melt 2s linear forwards;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
+function meltText() {
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
+  });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
+}
+
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/Browny/index.html b/Browny/index.html
index ba7b828..37bb268 100644
--- a/Browny/index.html
+++ b/Browny/index.html
@@ -854,7 +854,7 @@
 										<div class="row">
 											<div class="col-sm-12">
 												<div class="form-group">
-													<textarea class="form-control" rows="8" id="comment" placeholder="Message" ></textarea>
+													<textarea class="form-control" rows="8" id="message" placeholder="Message" ></textarea>
 												</div><!--/.form-group-->
 											</div><!--/.col-->
 										</div><!--/.row-->
diff --git a/Chain App Dev/assets/js/destruct.js b/Chain App Dev/assets/js/destruct.js
index d98966b..7d887cc 100644
--- a/Chain App Dev/assets/js/destruct.js	
+++ b/Chain App Dev/assets/js/destruct.js	
@@ -1,47 +1,134 @@
-let lastScrollTop = 0;
-
-window.addEventListener(
-  "scroll",
-  function () {
-    let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
-
-    if (st > lastScrollTop) {
-      // downscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(-1)";
-      }
-    } else {
-      // upscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(1)";
-      }
-    }
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
-style.innerHTML = `
-  @keyframes melt {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(100px); opacity: 0; }
-  }
-  .melting {
-    animation: melt 2s linear forwards;
-  }
-`;
-document.head.appendChild(style);
-
-// Function to add 'melting' class to all text nodes
-function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
-  });
-}
-
-// Add event listener to the page
-document.addEventListener('click', meltText);
+//--------------Flip the img tags when scrolling --------------------//
+
+let lastScrollTop = 0;
+
+window.addEventListener(
+  "scroll",
+  function () {
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+    let elements = document.body.getElementsByTagName("img");
+
+    if (st > lastScrollTop) {
+      // downscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(-1)";
+      }
+    } else {
+      // upscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(1)";
+      }
+    }
+    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+  },
+  false
+);
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
+style.innerHTML = `
+  @keyframes melt {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(100px); opacity: 0; }
+  }
+  .melting {
+    animation: melt 2s linear forwards;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
+function meltText() {
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
+  });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
+}
+
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/ConvidMedic/index.html b/ConvidMedic/index.html
index 9710ead..f1760e1 100644
--- a/ConvidMedic/index.html
+++ b/ConvidMedic/index.html
@@ -243,7 +243,7 @@
             <h1 class="update_taital">Get Every Update.... </h1>
             <form action="/action_page.php">
                <div class="form-group">
-                   <textarea class="update_mail" placeholder="Massage" rows="5" id="comment" name="Massage"></textarea>
+                   <textarea class="update_mail" placeholder="Massage" rows="5" id="message" name="Massage"></textarea>
                </div>
                <div class="subscribe_bt"><a href="#">Subscribe Now</a></div>
             </form>
diff --git a/ConvidMedic/js/destruct.js b/ConvidMedic/js/destruct.js
index c927683..7d887cc 100644
--- a/ConvidMedic/js/destruct.js
+++ b/ConvidMedic/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/Digimedia/assets/js/destruct.js b/Digimedia/assets/js/destruct.js
index d98966b..7d887cc 100644
--- a/Digimedia/assets/js/destruct.js
+++ b/Digimedia/assets/js/destruct.js
@@ -1,47 +1,134 @@
-let lastScrollTop = 0;
-
-window.addEventListener(
-  "scroll",
-  function () {
-    let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
-
-    if (st > lastScrollTop) {
-      // downscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(-1)";
-      }
-    } else {
-      // upscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(1)";
-      }
-    }
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
-style.innerHTML = `
-  @keyframes melt {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(100px); opacity: 0; }
-  }
-  .melting {
-    animation: melt 2s linear forwards;
-  }
-`;
-document.head.appendChild(style);
-
-// Function to add 'melting' class to all text nodes
-function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
-  });
-}
-
-// Add event listener to the page
-document.addEventListener('click', meltText);
+//--------------Flip the img tags when scrolling --------------------//
+
+let lastScrollTop = 0;
+
+window.addEventListener(
+  "scroll",
+  function () {
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+    let elements = document.body.getElementsByTagName("img");
+
+    if (st > lastScrollTop) {
+      // downscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(-1)";
+      }
+    } else {
+      // upscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(1)";
+      }
+    }
+    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+  },
+  false
+);
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
+style.innerHTML = `
+  @keyframes melt {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(100px); opacity: 0; }
+  }
+  .melting {
+    animation: melt 2s linear forwards;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
+function meltText() {
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
+  });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
+}
+
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/Drifolio-Bootstrap-master/js/destruct.js b/Drifolio-Bootstrap-master/js/destruct.js
index c927683..7d887cc 100644
--- a/Drifolio-Bootstrap-master/js/destruct.js
+++ b/Drifolio-Bootstrap-master/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/Industrial/index.html b/Industrial/index.html
index 755f9a3..5f1fe19 100644
--- a/Industrial/index.html
+++ b/Industrial/index.html
@@ -455,9 +455,9 @@
                 <div class="col-md-12">
                   <textarea
                     class="textarea"
+                    id="message"
                     placeholder="Message"
                     type="type"
-                    Message="Name"
                   >
 Message </textarea
                   >
diff --git a/Industrial/js/destruct.js b/Industrial/js/destruct.js
index d98966b..7d887cc 100644
--- a/Industrial/js/destruct.js
+++ b/Industrial/js/destruct.js
@@ -1,47 +1,134 @@
-let lastScrollTop = 0;
-
-window.addEventListener(
-  "scroll",
-  function () {
-    let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
-
-    if (st > lastScrollTop) {
-      // downscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(-1)";
-      }
-    } else {
-      // upscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(1)";
-      }
-    }
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
-style.innerHTML = `
-  @keyframes melt {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(100px); opacity: 0; }
-  }
-  .melting {
-    animation: melt 2s linear forwards;
-  }
-`;
-document.head.appendChild(style);
-
-// Function to add 'melting' class to all text nodes
-function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
-  });
-}
-
-// Add event listener to the page
-document.addEventListener('click', meltText);
+//--------------Flip the img tags when scrolling --------------------//
+
+let lastScrollTop = 0;
+
+window.addEventListener(
+  "scroll",
+  function () {
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+    let elements = document.body.getElementsByTagName("img");
+
+    if (st > lastScrollTop) {
+      // downscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(-1)";
+      }
+    } else {
+      // upscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(1)";
+      }
+    }
+    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+  },
+  false
+);
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
+style.innerHTML = `
+  @keyframes melt {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(100px); opacity: 0; }
+  }
+  .melting {
+    animation: melt 2s linear forwards;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
+function meltText() {
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
+  });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
+}
+
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/MedicalCare/js/destruct.js b/MedicalCare/js/destruct.js
index c927683..7d887cc 100644
--- a/MedicalCare/js/destruct.js
+++ b/MedicalCare/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/ONEPage/index.html b/ONEPage/index.html
index 201c2e3..f7e4241 100644
--- a/ONEPage/index.html
+++ b/ONEPage/index.html
@@ -1,374 +1,332 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="js/destruct.js"></script>
     <title>Onepage - clean responsive HTML5 themes - thomsoon.com</title>
 
-		<meta name="description" content="Free download theme onepage, clean and modern responsive for all"/>
-		<meta name="keywords" content="responsive, html5, onepage, themes, template, clean layout, free web"/>
-		<meta name="author" content="Thomsoon.com"/>
-		
-		<link rel="shortcut icon" href="img/favicon.png"> 
-		
-		<link rel="stylesheet" type="text/css" href="css/reset.css" />
-		<link rel="stylesheet" type="text/css" href="css/style.css" />
-		<link rel="stylesheet" type="text/css" href="css/style-responsive.css" />				
-		
-</head>
+    <meta
+      name="description"
+      content="Free download theme onepage, clean and modern responsive for all"
+    />
+    <meta
+      name="keywords"
+      content="responsive, html5, onepage, themes, template, clean layout, free web"
+    />
+    <meta name="author" content="Thomsoon.com" />
 
-<body>
+    <link rel="shortcut icon" href="img/favicon.png" />
 
-<div class="container">
+    <link rel="stylesheet" type="text/css" href="css/reset.css" />
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
+    <link rel="stylesheet" type="text/css" href="css/style-responsive.css" />
+  </head>
 
+  <body>
+    <div class="container">
+      <!-- section start-page -->
 
-<!-- section start-page -->
+      <section class="start-page parallax-background" id="home">
+        <div class="opacity"></div>
+        <div class="content">
+          <div class="text">
+            <h1>
+              Welcome<br />
+              to our <span>website</span>
+            </h1>
+            <p>Please familiarize yourself with our offer</p>
 
-  <section class="start-page parallax-background" id="home">
-  
-    <div class="opacity"></div>
-      <div class="content">
-        <div class="text">
-        
-          <h1>Welcome<br/>
-          to our <span>website</span></h1>
-          <p>Please familiarize yourself with our offer</p>
-          
-          <a href="#about-us"><div class="read-more">Read more</div></a>
-          
+            <a href="#about-us"><div class="read-more">Read more</div></a>
+          </div>
+          <div class="arrow-down"></div>
         </div>
-        <div class="arrow-down"></div>
-      </div>
-  
-  </section>
+      </section>
 
-  <!-- section menu mobile -->
-  
-  <section class="menu-media">
-  
-    <div class="menu-content">
-    
-      <div class="logo">Onepage</div>
-      
-      <div class="icon"><a href="#"><img src="img/icons/menu-media.png"/></a></div>
-    
-    </div>
-   
-  </section>
-  
-    <ul class="menu-click">
+      <!-- section menu mobile -->
+
+      <section class="menu-media">
+        <div class="menu-content">
+          <div class="logo">Onepage</div>
+
+          <div class="icon">
+            <a href="#"><img src="img/icons/menu-media.png" /></a>
+          </div>
+        </div>
+      </section>
+
+      <ul class="menu-click">
         <a href="#home"><li href="#home">HOME</li></a>
         <a href="#about-us"><li href="#about-us">ABOUT US</li></a>
         <a href="#portfolio"><li href="#portfolio">PORTFOLIO</li></a>
         <a href="#contact"><li href="#contact">CONTACT</li></a>
-        
-    </ul>
-   
-   
-  <!-- section menu -->
-  
-  <section class="menu">
-
-    <div class="menu-content">
-    
-    <div class="logo">Onepage</div>
-    
-      <ul id="menu">
-        <li><a href="#home">HOME</a></li>
-        <li><a href="#about-us">ABOUT US</a></li>
-        <li><a href="#portfolio">PORTFOLIO</a></li>
-        <li><a href="#contact">CONTACT</a></li>
       </ul>
-    </div>
-  
-  
-  </section>
 
+      <!-- section menu -->
 
-  <!-- section about us -->
-  
-  <section class="about-us" id="about-us">
-  
-    <h1>ABOUT US</h1>
-    <hr/>
-    <p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
-  
-      <div class="column-one">
-  
-        <div class="circle-one"></div>
-    
-          <h2>RESPONSIVE<br/>LAYOUT</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
-    
-      </div>
-  
-      <div class="column-two">
-  
-        <div class="circle-two"></div>
-    
-          <h2>MINIMALIST<br/>CONTENT</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
-    
-      </div>
-  
-  
-      <div class="column-three">
-  
-        <div class="circle-three"></div>
-    
-        <h2>FREE<br/>DOWNLOAD</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
-    
-    </div>  
-    
+      <section class="menu">
+        <div class="menu-content">
+          <div class="logo">Onepage</div>
 
-  </section>
-  
-  <div class="clear"></div>  
+          <ul id="menu">
+            <li><a href="#home">HOME</a></li>
+            <li><a href="#about-us">ABOUT US</a></li>
+            <li><a href="#portfolio">PORTFOLIO</a></li>
+            <li><a href="#contact">CONTACT</a></li>
+          </ul>
+        </div>
+      </section>
 
-  <!-- portoflio-->
+      <!-- section about us -->
 
-  <section class="portfolio" id="portfolio">
+      <section class="about-us" id="about-us">
+        <h1>ABOUT US</h1>
+        <hr />
+        <p class="title">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod
+        </p>
 
+        <div class="column-one">
+          <div class="circle-one"></div>
 
-    <div class="portfolio-margin">
-    
-      <h1>PORTFOLIO</h1>
-      <hr/> 
-    
-    <!-- 1 item portoflio-->
-    
-        <ul class="grid">
-        
-          <li>
-            <a href="#">
-              <img src="img/portfolio/1.png" alt="Portfolio item" />
+          <h2>RESPONSIVE<br />LAYOUT</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </p>
+        </div>
+
+        <div class="column-two">
+          <div class="circle-two"></div>
+
+          <h2>MINIMALIST<br />CONTENT</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </p>
+        </div>
+
+        <div class="column-three">
+          <div class="circle-three"></div>
+
+          <h2>FREE<br />DOWNLOAD</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </p>
+        </div>
+      </section>
+
+      <div class="clear"></div>
+
+      <!-- portoflio-->
+
+      <section class="portfolio" id="portfolio">
+        <div class="portfolio-margin">
+          <h1>PORTFOLIO</h1>
+          <hr />
+
+          <!-- 1 item portoflio-->
+
+          <ul class="grid">
+            <li>
+              <a href="#">
+                <img src="img/portfolio/1.png" alt="Portfolio item" />
                 <div class="text">
                   <p>PORTFOLIO 1</p>
-                  <p class="description">Your text here...</p>   
-              </div>
-            </a>
-          </li>
-          
-          <!-- 2 item portoflio-->
-          
-          <li>
-            <a href="#">
-              <img src="img/portfolio/2.png" alt="Portfolio item" />
+                  <p class="description">Your text here...</p>
+                </div>
+              </a>
+            </li>
+
+            <!-- 2 item portoflio-->
+
+            <li>
+              <a href="#">
+                <img src="img/portfolio/2.png" alt="Portfolio item" />
                 <div class="text">
                   <p>PORTFOLIO 2</p>
-                  <p class="description">Your text here...</p>               
-              </div>
-            </a>
-          </li>      
+                  <p class="description">Your text here...</p>
+                </div>
+              </a>
+            </li>
 
-          <!-- 3 item portoflio-->
-          
-          <li>
-            <a href="#">
-              <img src="img/portfolio/3.png" alt="Portfolio item" />
+            <!-- 3 item portoflio-->
+
+            <li>
+              <a href="#">
+                <img src="img/portfolio/3.png" alt="Portfolio item" />
                 <div class="text">
-                  <p>PORTFOLIO 3</p> 
-                  <p class="description">Your text here...</p>           
-              </div>
-            </a>
-          </li>      
+                  <p>PORTFOLIO 3</p>
+                  <p class="description">Your text here...</p>
+                </div>
+              </a>
+            </li>
 
+            <!-- 4 item portoflio-->
 
-          <!-- 4 item portoflio-->
-          
-          <li>
-            <a href="#">
-              <img src="img/portfolio/4.png" alt="Portfolio item" />
+            <li>
+              <a href="#">
+                <img src="img/portfolio/4.png" alt="Portfolio item" />
                 <div class="text">
-                  <p>PORTFOLIO 4</p> 
-                  <p class="description">Your text here...</p>           
-              </div>
-            </a>
-          </li>    
+                  <p>PORTFOLIO 4</p>
+                  <p class="description">Your text here...</p>
+                </div>
+              </a>
+            </li>
 
-          <!-- 5 item portoflio-->
-          
-          <li>
-            <a href="#">
-              <img src="img/portfolio/5.png" alt="Portfolio item" />
+            <!-- 5 item portoflio-->
+
+            <li>
+              <a href="#">
+                <img src="img/portfolio/5.png" alt="Portfolio item" />
                 <div class="text">
-                  <p>PORTFOLIO 5</p> 
-                  <p class="description">Your text here...</p>           
-              </div>
-            </a>
-          </li>    
-          
+                  <p>PORTFOLIO 5</p>
+                  <p class="description">Your text here...</p>
+                </div>
+              </a>
+            </li>
 
-          <!-- 6 item portoflio-->
-          
-          <li>
-            <a href="#">
-              <img src="img/portfolio/6.png" alt="Portfolio item" />
+            <!-- 6 item portoflio-->
+
+            <li>
+              <a href="#">
+                <img src="img/portfolio/6.png" alt="Portfolio item" />
                 <div class="text">
-                  <p>PORTFOLIO 6</p> 
-                  <p class="description">Your text here...</p>           
-              </div>
-            </a>
-          </li>         
-           
-         <!-- 7 item portoflio-->
-          
-          <li>
-            <a href="#">
-              <img src="img/portfolio/7.png" alt="Portfolio item" />
+                  <p>PORTFOLIO 6</p>
+                  <p class="description">Your text here...</p>
+                </div>
+              </a>
+            </li>
+
+            <!-- 7 item portoflio-->
+
+            <li>
+              <a href="#">
+                <img src="img/portfolio/7.png" alt="Portfolio item" />
                 <div class="text">
-                  <p>PORTFOLIO 7</p> 
-                  <p class="description">Your text here...</p>           
-              </div>
-            </a>
-          </li>    
-          
-          <!-- 8 item portoflio-->
-          
-          <li>
-            <a href="#">
-              <img src="img/portfolio/8.png" alt="Portfolio item" />
+                  <p>PORTFOLIO 7</p>
+                  <p class="description">Your text here...</p>
+                </div>
+              </a>
+            </li>
+
+            <!-- 8 item portoflio-->
+
+            <li>
+              <a href="#">
+                <img src="img/portfolio/8.png" alt="Portfolio item" />
                 <div class="text">
-                  <p>PORTFOLIO 8</p> 
-                  <p class="description">Your text here...</p>           
-              </div>
-            </a>
-          </li>          
-          
-          <!-- 9 item portoflio-->
-          
-          <li>
-            <a href="#">
-              <img src="img/portfolio/9.png" alt="Portfolio item" />
+                  <p>PORTFOLIO 8</p>
+                  <p class="description">Your text here...</p>
+                </div>
+              </a>
+            </li>
+
+            <!-- 9 item portoflio-->
+
+            <li>
+              <a href="#">
+                <img src="img/portfolio/9.png" alt="Portfolio item" />
                 <div class="text">
-                  <p>PORTFOLIO 9</p> 
-                  <p class="description">Your text here...</p>           
-              </div>
-            </a>
-          </li>          
+                  <p>PORTFOLIO 9</p>
+                  <p class="description">Your text here...</p>
+                </div>
+              </a>
+            </li>
+          </ul>
 
-          
-        </ul>  
-   
-   <a href="#"><div class="read-more">Load more</div></a>
-   
-   </div>   
-         
-   </section>
+          <a href="#"><div class="read-more">Load more</div></a>
+        </div>
+      </section>
 
-  
-   <div class="clear"></div>  
-  
-  
-  
-  
-    <!-- partners-->
+      <div class="clear"></div>
 
-    <section class="partners parallax-background-partners" id="partners">
-    
-    <div class="opacity"></div>
-    
-      <div class="content">
-      
-        <h2>Thanks for partners</h2>
-        
-            <div class="logo">
-          
-                <a href="#"><img src="img/logos/alex1.png"></a>
-                <a href="#"><img src="img/logos/archiq.png"></a>
-                <a href="#"><img src="img/logos/thomsoon.png"></a>
-                <a href="#"><img src="img/logos/alex2.png"></a>
-              
-            </div>
-      
-      </div>
+      <!-- partners-->
 
-    </section>
+      <section class="partners parallax-background-partners" id="partners">
+        <div class="opacity"></div>
+
+        <div class="content">
+          <h2>Thanks for partners</h2>
+
+          <div class="logo">
+            <a href="#"><img src="img/logos/alex1.png" /></a>
+            <a href="#"><img src="img/logos/archiq.png" /></a>
+            <a href="#"><img src="img/logos/thomsoon.png" /></a>
+            <a href="#"><img src="img/logos/alex2.png" /></a>
+          </div>
+        </div>
+      </section>
+
+      <!-- Contact-->
+
+      <section class="contact" id="contact">
+        <h1>Contact</h1>
+        <hr />
 
-
-    <!-- Contact-->
-
-    <section class="contact" id="contact">
-        <h1>Contact</h1>
-        <hr/>       
-      
         <div class="content">
-          
           <div class="form">
-          
             <form action="#" method="post" enctype="text/plain">
-          
-            <input name="your-name" id="your-name" value="YOUR NAME" />
-            <input name="your-email" id="your-email" value="YOUR E-MAIL" />
-          
-            <textarea id="message" name="message" >MESSAGE</textarea>
- 
-            <a href="#">
-              <div class="button">
-                <span>SEND</span>
-              </div>
-            </a> 
- 
+              <input name="your-name" id="your-name" value="YOUR NAME" />
+              <input name="your-email" id="your-email" value="YOUR E-MAIL" />
+
+              <textarea
+                id="message"
+                name="message"
+                placeholder="YOUR MESSAGE"
+              ></textarea>
+
+              <a href="#">
+                <div class="button">
+                  <span>SEND</span>
+                </div>
+              </a>
             </form>
-          
           </div>
-          
-          
+
           <div class="contact-text">
-          
-          To contact us please use the contact form visible<br/><br/>
+            To contact us please use the contact form visible<br /><br />
 
-          When sending files, please use<br/>
-          the following e-mail<br/><br/>
+            When sending files, please use<br />
+            the following e-mail<br /><br />
 
-          <strong>Tomasz Mazurczak</strong><br/><br/>
+            <strong>Tomasz Mazurczak</strong><br /><br />
 
-          e-mail: <strong>contact@thomsoon.com</strong>
-          
+            e-mail: <strong>contact@thomsoon.com</strong>
           </div>
-        
-        
         </div>
-      
-    </section>
+      </section>
 
+      <section class="footer">
+        <div class="margin">
+          <div class="menu-footer">
+            <a href="#home">Home</a>
+            <a href="#">Privacy policy</a>
+            <a href="#">RSS</a>
+            <a href="#">Facebook</a>
+          </div>
 
-    <section class="footer">
-    
-      <div class="margin">
-      
-        <div class="menu-footer">
-        
-        <a href="#home">Home</a>
-        <a href="#">Privacy policy</a>
-        <a href="#">RSS</a>
-        <a href="#">Facebook</a>
-        
+          <div class="copyright">© 2014. All Rights Reserved Thomsoon.com</div>
         </div>
-        
-          <div class="copyright">© 2014. All Rights Reserved Thomsoon.com</div>        
+      </section>
+    </div>
 
-      </div>
-    
-    
-    </section>    
-    
-
-</div>
-
-
-
-	<!-- Scripts -->
-	
-	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- jQuery -->
-	<script src="js/jquery.parallax.js"></script> <!-- jQuery Parallax -->
-	<script src="js/jquery.nicescroll.js"></script> <!-- jQuery NiceScroll -->
-	<script src="js/jquery.sticky.js"></script> <!-- jQuery Stick Menu -->
-	<script src="js/script.js"></script> <!-- All script -->
-
-</body>
+    <!-- Scripts -->
 
+    <script
+      type="text/javascript"
+      src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
+    ></script>
+    <!-- jQuery -->
+    <script src="js/jquery.parallax.js"></script>
+    <!-- jQuery Parallax -->
+    <script src="js/jquery.nicescroll.js"></script>
+    <!-- jQuery NiceScroll -->
+    <script src="js/jquery.sticky.js"></script>
+    <!-- jQuery Stick Menu -->
+    <script src="js/script.js"></script>
+    <!-- All script -->
+  </body>
 </html>
diff --git a/ONEPage/js/destruct.js b/ONEPage/js/destruct.js
index c927683..7d887cc 100644
--- a/ONEPage/js/destruct.js
+++ b/ONEPage/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/Ogistic/index.html b/Ogistic/index.html
index 0741186..ffc769c 100644
--- a/Ogistic/index.html
+++ b/Ogistic/index.html
@@ -755,6 +755,7 @@
                   <div class="col-md-12">
                     <input
                       class="contactusmess"
+                      id="message"
                       placeholder="Message"
                       type="type"
                       Message="Name"
diff --git a/Ogistic/js/destruct.js b/Ogistic/js/destruct.js
index d98966b..7d887cc 100644
--- a/Ogistic/js/destruct.js
+++ b/Ogistic/js/destruct.js
@@ -1,47 +1,134 @@
-let lastScrollTop = 0;
-
-window.addEventListener(
-  "scroll",
-  function () {
-    let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
-
-    if (st > lastScrollTop) {
-      // downscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(-1)";
-      }
-    } else {
-      // upscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(1)";
-      }
-    }
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
-style.innerHTML = `
-  @keyframes melt {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(100px); opacity: 0; }
-  }
-  .melting {
-    animation: melt 2s linear forwards;
-  }
-`;
-document.head.appendChild(style);
-
-// Function to add 'melting' class to all text nodes
-function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
-  });
-}
-
-// Add event listener to the page
-document.addEventListener('click', meltText);
+//--------------Flip the img tags when scrolling --------------------//
+
+let lastScrollTop = 0;
+
+window.addEventListener(
+  "scroll",
+  function () {
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+    let elements = document.body.getElementsByTagName("img");
+
+    if (st > lastScrollTop) {
+      // downscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(-1)";
+      }
+    } else {
+      // upscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(1)";
+      }
+    }
+    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+  },
+  false
+);
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
+style.innerHTML = `
+  @keyframes melt {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(100px); opacity: 0; }
+  }
+  .melting {
+    animation: melt 2s linear forwards;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
+function meltText() {
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
+  });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
+}
+
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/Potoub/index.html b/Potoub/index.html
index efebf9c..7e47348 100644
--- a/Potoub/index.html
+++ b/Potoub/index.html
@@ -265,7 +265,7 @@
                               <input class="contactus" placeholder="Phone Number" type="type" name="Phone Number">                          
                            </div>
                            <div class="col-md-12">
-                              <textarea class="textarea" placeholder="Message" type="type" Message="Name">Message </textarea>
+                              <textarea class="textarea" id="message" placeholder="Message" type="type" Message="Name"></textarea>
                            </div>
                            <div class="col-md-12">
                               <button class="send_btn">Send</button>
diff --git a/Potoub/js/destruct.js b/Potoub/js/destruct.js
index d98966b..7d887cc 100644
--- a/Potoub/js/destruct.js
+++ b/Potoub/js/destruct.js
@@ -1,47 +1,134 @@
-let lastScrollTop = 0;
-
-window.addEventListener(
-  "scroll",
-  function () {
-    let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
-
-    if (st > lastScrollTop) {
-      // downscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(-1)";
-      }
-    } else {
-      // upscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(1)";
-      }
-    }
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
-style.innerHTML = `
-  @keyframes melt {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(100px); opacity: 0; }
-  }
-  .melting {
-    animation: melt 2s linear forwards;
-  }
-`;
-document.head.appendChild(style);
-
-// Function to add 'melting' class to all text nodes
-function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
-  });
-}
-
-// Add event listener to the page
-document.addEventListener('click', meltText);
+//--------------Flip the img tags when scrolling --------------------//
+
+let lastScrollTop = 0;
+
+window.addEventListener(
+  "scroll",
+  function () {
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+    let elements = document.body.getElementsByTagName("img");
+
+    if (st > lastScrollTop) {
+      // downscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(-1)";
+      }
+    } else {
+      // upscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(1)";
+      }
+    }
+    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+  },
+  false
+);
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
+style.innerHTML = `
+  @keyframes melt {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(100px); opacity: 0; }
+  }
+  .melting {
+    animation: melt 2s linear forwards;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
+function meltText() {
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
+  });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
+}
+
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/SBS/js/destruct.js b/SBS/js/destruct.js
index c927683..7d887cc 100644
--- a/SBS/js/destruct.js
+++ b/SBS/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/Seo Dream/assets/js/destruct.js b/Seo Dream/assets/js/destruct.js
index d98966b..7d887cc 100644
--- a/Seo Dream/assets/js/destruct.js	
+++ b/Seo Dream/assets/js/destruct.js	
@@ -1,47 +1,134 @@
-let lastScrollTop = 0;
-
-window.addEventListener(
-  "scroll",
-  function () {
-    let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
-
-    if (st > lastScrollTop) {
-      // downscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(-1)";
-      }
-    } else {
-      // upscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(1)";
-      }
-    }
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
-style.innerHTML = `
-  @keyframes melt {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(100px); opacity: 0; }
-  }
-  .melting {
-    animation: melt 2s linear forwards;
-  }
-`;
-document.head.appendChild(style);
-
-// Function to add 'melting' class to all text nodes
-function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
-  });
-}
-
-// Add event listener to the page
-document.addEventListener('click', meltText);
+//--------------Flip the img tags when scrolling --------------------//
+
+let lastScrollTop = 0;
+
+window.addEventListener(
+  "scroll",
+  function () {
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+    let elements = document.body.getElementsByTagName("img");
+
+    if (st > lastScrollTop) {
+      // downscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(-1)";
+      }
+    } else {
+      // upscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(1)";
+      }
+    }
+    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+  },
+  false
+);
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
+style.innerHTML = `
+  @keyframes melt {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(100px); opacity: 0; }
+  }
+  .melting {
+    animation: melt 2s linear forwards;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
+function meltText() {
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
+  });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
+}
+
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/Space Dynamic/assets/js/destruct.js b/Space Dynamic/assets/js/destruct.js
index d98966b..7d887cc 100644
--- a/Space Dynamic/assets/js/destruct.js	
+++ b/Space Dynamic/assets/js/destruct.js	
@@ -1,47 +1,134 @@
-let lastScrollTop = 0;
-
-window.addEventListener(
-  "scroll",
-  function () {
-    let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
-
-    if (st > lastScrollTop) {
-      // downscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(-1)";
-      }
-    } else {
-      // upscroll
-      for (let i = 0; i < elements.length; i++) {
-        elements[i].style.transform = "scaleX(1)";
-      }
-    }
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
-style.innerHTML = `
-  @keyframes melt {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(100px); opacity: 0; }
-  }
-  .melting {
-    animation: melt 2s linear forwards;
-  }
-`;
-document.head.appendChild(style);
-
-// Function to add 'melting' class to all text nodes
-function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
-  });
-}
-
-// Add event listener to the page
-document.addEventListener('click', meltText);
+//--------------Flip the img tags when scrolling --------------------//
+
+let lastScrollTop = 0;
+
+window.addEventListener(
+  "scroll",
+  function () {
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+    let elements = document.body.getElementsByTagName("img");
+
+    if (st > lastScrollTop) {
+      // downscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(-1)";
+      }
+    } else {
+      // upscroll
+      for (let i = 0; i < elements.length; i++) {
+        elements[i].style.transform = "scaleX(1)";
+      }
+    }
+    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+  },
+  false
+);
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
+style.innerHTML = `
+  @keyframes melt {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(100px); opacity: 0; }
+  }
+  .melting {
+    animation: melt 2s linear forwards;
+  }
+`;
+document.head.appendChild(style);
+
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
+function meltText() {
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
+  });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
+}
+
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/bootstrap-app/themes/js/destruct.js b/bootstrap-app/themes/js/destruct.js
index c927683..7d887cc 100644
--- a/bootstrap-app/themes/js/destruct.js
+++ b/bootstrap-app/themes/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/king-of-pasta/js/destruct.js b/king-of-pasta/js/destruct.js
index c927683..7d887cc 100644
--- a/king-of-pasta/js/destruct.js
+++ b/king-of-pasta/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/lumia/index.html b/lumia/index.html
index 00fff25..fcc1c4d 100644
--- a/lumia/index.html
+++ b/lumia/index.html
@@ -1,643 +1,940 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, maximum-scale=1">
-<script src="js/destruct.js"></script>
-<title>Lumia - Multipurpose Bootstrap Template</title>
-<link rel="icon" href="favicon.png" type="image/png">
-<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
-<link href="css/style.css" rel="stylesheet" type="text/css">
-<link href="css/linecons.css" rel="stylesheet" type="text/css">
-<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
-<link href="css/responsive.css" rel="stylesheet" type="text/css">
-<link href="css/animate.css" rel="stylesheet" type="text/css">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, maximum-scale=1" />
+    <script src="js/destruct.js"></script>
+    <title>Lumia - Multipurpose Bootstrap Template</title>
+    <link rel="icon" href="favicon.png" type="image/png" />
+    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
+    <link href="css/style.css" rel="stylesheet" type="text/css" />
+    <link href="css/linecons.css" rel="stylesheet" type="text/css" />
+    <link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
+    <link href="css/responsive.css" rel="stylesheet" type="text/css" />
+    <link href="css/animate.css" rel="stylesheet" type="text/css" />
 
-<link href='http://fonts.googleapis.com/css?family=Lato:400,900,700,700italic,400italic,300italic,300,100italic,100,900italic' rel='stylesheet' type='text/css'>
-<link href='http://fonts.googleapis.com/css?family=Dosis:400,500,700,800,600,300,200' rel='stylesheet' type='text/css'>
+    <link
+      href="http://fonts.googleapis.com/css?family=Lato:400,900,700,700italic,400italic,300italic,300,100italic,100,900italic"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="http://fonts.googleapis.com/css?family=Dosis:400,500,700,800,600,300,200"
+      rel="stylesheet"
+      type="text/css"
+    />
 
-<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->
+    <!--[if IE
+      ]><style type="text/css">
+        .pie {
+          behavior: url(PIE.htc);
+        }
+      </style><!
+    [endif]-->
 
-<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
-<script type="text/javascript" src="js/bootstrap.js"></script>
-<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
-<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
-<script type="text/javascript" src="js/jquery.isotope.js"></script>
-<script type="text/javascript" src="js/wow.js"></script>
-<script type="text/javascript" src="js/classie.js"></script>
+    <script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
+    <script type="text/javascript" src="js/bootstrap.js"></script>
+    <script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
+    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
+    <script type="text/javascript" src="js/jquery.isotope.js"></script>
+    <script type="text/javascript" src="js/wow.js"></script>
+    <script type="text/javascript" src="js/classie.js"></script>
 
-<!--[if lt IE 9]>
-    <script src="js/respond-1.1.0.min.js"></script>
-    <script src="js/html5shiv.js"></script>
-    <script src="js/html5element.js"></script>
-<![endif]-->
+    <!--[if lt IE 9]>
+      <script src="js/respond-1.1.0.min.js"></script>
+      <script src="js/html5shiv.js"></script>
+      <script src="js/html5element.js"></script>
+    <![endif]-->
 
-<script type="text/javascript">
-	$(document).ready(function(e) {
-        $('.res-nav_click').click(function(){
-		$('ul.toggle').slideToggle(600)	
-			});	
-			
-	$(document).ready(function() {
-$(window).bind('scroll', function() {
-         if ($(window).scrollTop() > 0) {
-             $('#header_outer').addClass('fixed');
-         }
-         else {
-             $('#header_outer').removeClass('fixed');
-         }
-    });
-	
-	  });
-	  
+    <script type="text/javascript">
+      $(document).ready(function (e) {
+        $(".res-nav_click").click(function () {
+          $("ul.toggle").slideToggle(600);
+        });
 
-		    });	
-function resizeText() {
-	var preferredWidth = 767;
-	var displayWidth = window.innerWidth;
-	var percentage = displayWidth / preferredWidth;
-	var fontsizetitle = 25;
-	var newFontSizeTitle = Math.floor(fontsizetitle * percentage);
-	$(".divclass").css("font-size", newFontSizeTitle)
-}
-</script>
-</head>
-<body>
-
-<!--Header_section-->
-<header id="header_outer">
-  <div class="container">
-    <div class="header_section">
-      <div class="logo"><a href="#"><img src="img/logo.png" alt=""></a></div>
-      <nav class="nav" id="nav">
-        <ul class="toggle">
-          <li><a href="#top_content">Home</a></li>
-          <li><a href="#service">Services</a></li>
-          <li><a href="#work_outer">Work</a></li>
-          <li><a href="#Portfolio">Portfolio</a></li>
-          <li><a href="#client_outer">Clients</a></li>
-          <li><a href="#team">Team</a></li>
-          <li><a href="#contact">Contact</a></li>
-        </ul>
-        <ul class="">
-          <li><a href="#top_content">Home</a></li>
-          <li><a href="#service">Services</a></li>
-          <li><a href="#work_outer">Work</a></li>
-          <li><a href="#Portfolio">Portfolio</a></li>
-          <li><a href="#client_outer">Clients</a></li>
-          <li><a href="#team">Team</a></li>
-          <li><a href="#contact">Contact</a></li>
-        </ul>
-      </nav>
-      <a class="res-nav_click animated wobble wow"  href="javascript:void(0)"><i class="fa-bars"></i></a> </div>
-  </div>
-</header>
-<!--Header_section--> 
-
-<!--Top_content-->
-<section id="top_content" class="top_cont_outer">
-  <div class="top_cont_inner">
-    <div class="container">
-      <div class="top_content">
-        <div class="row">
-          <div class="col-lg-5 col-sm-7">
-            <div class="top_left_cont flipInY wow animated">
-              <h3>Bootstrap &amp; Multipurpose!</h3>
-              <h2>Lumia Most Amazing Theme 
-                That Ever Made</h2>
-              <p> Accusantium quam, aliquam ultricies eget tempor id, aliquam eget nibh et. Maecen aliquam, risus at semper. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum. 
-			  Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum.Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum.
-			  </p>
-              <a href="#service" class="learn_more2">Learn more</a> </div>
+        $(document).ready(function () {
+          $(window).bind("scroll", function () {
+            if ($(window).scrollTop() > 0) {
+              $("#header_outer").addClass("fixed");
+            } else {
+              $("#header_outer").removeClass("fixed");
+            }
+          });
+        });
+      });
+      function resizeText() {
+        var preferredWidth = 767;
+        var displayWidth = window.innerWidth;
+        var percentage = displayWidth / preferredWidth;
+        var fontsizetitle = 25;
+        var newFontSizeTitle = Math.floor(fontsizetitle * percentage);
+        $(".divclass").css("font-size", newFontSizeTitle);
+      }
+    </script>
+  </head>
+  <body>
+    <!--Header_section-->
+    <header id="header_outer">
+      <div class="container">
+        <div class="header_section">
+          <div class="logo">
+            <a href="#"><img src="img/logo.png" alt="" /></a>
           </div>
-          <div class="col-lg-7 col-sm-5"> 
-		     <div class="flipInX wow animated">
-		      <img class="img-responsive" src="img/side-bg.jpg" alt="">
-		     </div>
-		  </div>
+          <nav class="nav" id="nav">
+            <ul class="toggle">
+              <li><a href="#top_content">Home</a></li>
+              <li><a href="#service">Services</a></li>
+              <li><a href="#work_outer">Work</a></li>
+              <li><a href="#Portfolio">Portfolio</a></li>
+              <li><a href="#client_outer">Clients</a></li>
+              <li><a href="#team">Team</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+            <ul class="">
+              <li><a href="#top_content">Home</a></li>
+              <li><a href="#service">Services</a></li>
+              <li><a href="#work_outer">Work</a></li>
+              <li><a href="#Portfolio">Portfolio</a></li>
+              <li><a href="#client_outer">Clients</a></li>
+              <li><a href="#team">Team</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+          </nav>
+          <a class="res-nav_click animated wobble wow" href="javascript:void(0)"
+            ><i class="fa-bars"></i
+          ></a>
         </div>
       </div>
-    </div>
-  </div>
-</section>
-<!--Top_content--> 
+    </header>
+    <!--Header_section-->
 
-<!--Service-->
-<section  id="service">
-  <div class="container">
-    <h2>Services</h2>
-    <div class="service_area">
-      <div class="row">
-        <div class="col-lg-4">
-          <div class="service_block">
-            <div class="service_icon delay-03s animated wow  zoomIn"> <span><i class="fa-book"></i></span> </div>
-            <h3 class="animated fadeInUp wow">Well Documented</h3>
-            <p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>
-          </div>
-        </div>
-        <div class="col-lg-4">
-          <div class="service_block">
-            <div class="service_icon icon2  delay-03s animated wow zoomIn"> <span><i class="fa-comments"></i></span> </div>
-            <h3 class="animated fadeInUp wow">Friendly Support</h3>
-            <p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>
-          </div>
-        </div>
-        <div class="col-lg-4">
-          <div class="service_block">
-            <div class="service_icon icon3  delay-03s animated wow zoomIn"> <span><i class="fa-rocket"></i></span> </div>
-            <h3 class="animated fadeInUp wow">Launch Ready</h3>
-            <p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>
-          </div>
-        </div>
-      </div>
-      <div class="row pt-20">
-        <div class="col-lg-4">
-          <div class="service_block">
-            <div class="service_icon icon4 delay-03s animated wow  zoomIn"> <span><i class="fa-compress"></i></span> </div>
-            <h3 class="animated fadeInUp wow">Fully Responsive</h3>
-            <p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>
-          </div>
-        </div>
-        <div class="col-lg-4">
-          <div class="service_block">
-            <div class="service_icon icon5  delay-03s animated wow zoomIn"> <span><i class="fa-eye"></i></span> </div>
-            <h3 class="animated fadeInUp wow">Retina Ready</h3>
-            <p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>
-          </div>
-        </div>
-        <div class="col-lg-4">
-          <div class="service_block">
-            <div class="service_icon icon6  delay-03s animated wow zoomIn"> <span><i class="fa-cog"></i></span> </div>
-            <h3 class="animated fadeInUp wow">HTML5+CSS3</h3>
-            <p class="animated fadeInDown wow">Proin iaculis purus consequat sem cure digni. Donec porttitora entum suscipit  aenean rhoncus posuere odio in tincidunt.</p>
-          </div>
-        </div>
-      </div>	  
-    </div>
-  </div>
-</section>
-<!--Service-->
-
-<section id="work_outer"><!--main-section-start-->
-<div class="top_cont_latest">
-  <div class="container">
-    <h2>Latest Work</h2>
-    <div class="work_section">
-   
-       <div class="row margin-bottom-20">
-            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft delay-05s">
-                <div class="thumbnails thumbnail-style thumbnail-kenburn">
-                	<div class="thumbnail-img">
-                        <div class="overflow-hidden">
-                            <img alt="" src="img/item1.jpg" class="img-responsive">
-                        </div>
-                       				
-                    </div>
-                    <div class="caption">
-                        <h3><a href="#" class="hover-effect">Project One</a></h3>
-                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
-                    </div>
+    <!--Top_content-->
+    <section id="top_content" class="top_cont_outer">
+      <div class="top_cont_inner">
+        <div class="container">
+          <div class="top_content">
+            <div class="row">
+              <div class="col-lg-5 col-sm-7">
+                <div class="top_left_cont flipInY wow animated">
+                  <h3>Bootstrap &amp; Multipurpose!</h3>
+                  <h2>Lumia Most Amazing Theme That Ever Made</h2>
+                  <p>
+                    Accusantium quam, aliquam ultricies eget tempor id, aliquam
+                    eget nibh et. Maecen aliquam, risus at semper. Proin iaculis
+                    purus consequat sem cure digni ssim. Donec porttitora entum.
+                    Proin iaculis purus consequat sem cure digni ssim. Donec
+                    porttitora entum.Proin iaculis purus consequat sem cure
+                    digni ssim. Donec porttitora entum.
+                  </p>
+                  <a href="#service" class="learn_more2">Learn more</a>
                 </div>
-            </div>
-            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft delay-05s">
-                <div class="thumbnails thumbnail-style thumbnail-kenburn">
-                    <div class="thumbnail-img">
-                        <div class="overflow-hidden">
-                            <img alt="" src="img/item2.jpg" class="img-responsive">
-                        </div>
-                                        
-                    </div>
-                    <div class="caption">
-                        <h3><a href="#" class="hover-effect">Project Two</a></h3>
-                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
-                    </div>
+              </div>
+              <div class="col-lg-7 col-sm-5">
+                <div class="flipInX wow animated">
+                  <img class="img-responsive" src="img/side-bg.jpg" alt="" />
                 </div>
+              </div>
             </div>
-            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft delay-05s">
-                <div class="thumbnails thumbnail-style thumbnail-kenburn">
-                    <div class="thumbnail-img">
-                        <div class="overflow-hidden">
-                            <img alt="" src="img/item3.jpg" class="img-responsive">
-                        </div>
-                                      
-                    </div>
-                    <div class="caption">
-                        <h3><a href="#" class="hover-effect">Project Three</a></h3>
-                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft delay-05s">
-                <div class="thumbnails thumbnail-style thumbnail-kenburn">
-                    <div class="thumbnail-img">
-                        <div class="overflow-hidden">
-                            <img alt="" src="img/item5.jpg" class="img-responsive">
-                        </div>
-                                          
-                    </div>
-                    <div class="caption">
-                        <h3><a href="#" class="hover-effect">Project Four</a></h3>
-                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
-                    </div>
-                </div>
-            </div>
-     
-      </div>
-    </div>
-  </div>
-  <!--<div class="work_pic"><img src="img/dashboard_pic.png" alt=""></div>-->
-  </div>
-</section>
-<!--main-section-end--> 
-
-<!--new_portfolio--> 
-
-<!-- Portfolio -->
-<section id="Portfolio" class="content"> 
-  
-  <!-- Container -->
-  <div class="container portfolio-title"> 
-    
-    <!-- Section Title -->
-    <div class="section-title">
-      <h2>Portfolio</h2>
-    </div>
-    <!--/Section Title --> 
-    
-  </div>
-  <!-- Container -->
-  
-  <div class="portfolio-top"></div>
-  
-  <!-- Portfolio Plus Filters -->
-  <div class="portfolio"> 
-    
-    <!-- Portfolio Filters -->
-    <div id="filters" class="sixteen columns">
-      <ul class="clearfix">
-        <li><a id="all" href="#" data-filter="*" class="active">
-          <h5>All</h5>
-          </a></li>
-        <li><a class="" href="#" data-filter=".branding">
-          <h5>Branding</h5>
-          </a></li>
-        <li><a class="" href="#" data-filter=".design">
-          <h5>Design</h5>
-          </a></li>
-        <li><a class="" href="#" data-filter=".photography">
-          <h5>Photography</h5>
-          </a></li>
-        <li><a class="" href="#" data-filter=".videography">
-          <h5>Videography</h5>
-          </a></li>
-        <li><a class="" href="#" data-filter=".web">
-          <h5>Web</h5>
-          </a></li>
-      </ul>
-    </div>
-    <!--/Portfolio Filters --> 
-    
-    <!-- Portfolio Wrap -->
-    <div class="isotope" style="position: relative; overflow: hidden; height: 480px;" id="portfolio-wrap"> 
-      
-      <!-- Portfolio Item With PrettyPhoto  -->
-      <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four   videography isotope-item">
-        <div class="portfolio-image"> <img src="img/portfolio1.jpg"  alt="Portfolio 1"> </div>
-        <a title="Starbucks Coffee" rel="prettyPhoto[galname]" href="#">
-        <div class="project-overlay">
-          <div class="project-info">
-           
-            <h4 class="project-name">Leica Camera</h4>
-            <p class="project-categories">Videography</p>
-          </div>
-        </div>
-        </a> </div>
-      <!--/Portfolio Item With PrettyPhoto  --> 
-      
-      <!-- Portfolio Item Video Expander  -->
-      <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(337px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design isotope-item">
-        <div class="portfolio-image"> <img src="img/portfolio2.jpg" alt="Portfolio 1"> </div>
-        <div class="project-overlay">
-          <div class="open-project-link"> <a class="open-project" href="#" title="Open Project"></a> </div>
-          <div class="project-info">
-           
-            <h4 class="project-name">Foto Template</h4>
-            <p class="project-categories">Design</p>
-          </div>
-        </div>
-      </div>
-      <!--/Portfolio Item Video Expander  --> 
-      
-      <!-- Portfolio Item Normal Expander -->
-      <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(674px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design  isotope-item">
-        <div class="portfolio-image"> <img src="img/portfolio3.jpg" alt="Portfolio 1"> </div>
-        <div class="project-overlay">
-          <div class="open-project-link"> <a class="open-project" href="#" title="Open Project"></a> </div>
-          <div class="project-info">
-          
-            <h4 class="project-name">Sony Phone</h4>
-            <p class="project-categories">Design</p>
-          </div>
-        </div>
-      </div>
-      <!--/Portfolio Item Normal Expander --> 
-      
-      <!-- Portfolio Item FullScreen Expander -->
-      <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(1011px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  photography  branding web isotope-item">
-        <div class="portfolio-image"> <img src="img/portfolio4.jpg" alt="Portfolio 1"> </div>
-        <div class="project-overlay">
-          <div class="open-project-link"> <a class="open-project" href="#" title="Open Project"></a> </div>
-          <div class="project-info">
-           
-            <h4 class="project-name">Nike Shoes</h4>
-            <p class="project-categories">Photography, Web, Branding</p>
-          </div>
-        </div>
-      </div>
-      <!-- Portfolio Item FullScreen Expander --> 
-      
-      <!-- Portfolio Item FullScreen Expander -->
-      <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design isotope-item">
-        <div class="portfolio-image"> <img src="img/portfolio5.jpg" alt="Portfolio 1"> </div>
-        <div class="project-overlay">
-          <div class="open-project-link"> <a class="open-project" href="#" title="Open Project"></a> </div>
-          <div class="project-info">
-         
-            <h4 class="project-name">Vinyl Record</h4>
-            <p class="project-categories">Design</p>
-          </div>
-        </div>
-      </div>
-      <!--/Portfolio Item FullScreen Expander --> 
-      
-      <!-- Portfolio Item Normal Expander -->
-      <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(337px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  web isotope-item">
-        <div class="portfolio-image"> <img src="img/portfolio6.jpg" alt="Portfolio 1"> </div>
-        <div class="project-overlay">
-          <div class="open-project-link"> <a class="open-project" href="#" title="Open Project"></a> </div>
-          <div class="project-info">
-           
-            <h4 class="project-name">iPhone</h4>
-            <p class="project-categories">Web</p>
-          </div>
-        </div>
-      </div>
-      <!--/Portfolio Item Normal Expander --> 
-      
-      <!-- Portfolio Item External Project  -->
-      <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(674px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four  design web isotope-item">
-        <div class="portfolio-image"> <img src="img/portfolio7.jpg" alt="Portfolio 1"> </div>
-        <a href="#" class="external">
-        <div class="project-overlay">
-          <div class="project-info">
-          
-            <h4 class="project-name">Nexus Phone</h4>
-            <p class="project-categories">Design, Web</p>
-          </div>
-        </div>
-        </a> </div>
-      <!--/Portfolio Item External Project  --> 
-      
-      <!-- Portfolio Item With PrettyPhoto  -->
-      <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(1011px, 240px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-four   photography isotope-item">
-        <div class="portfolio-image"> <img src="img/portfolio8.jpg" alt="Portfolio 1"> </div>
-        <a title="Stereo Headphones" rel="prettyPhoto[galname]" href="#">
-        <div class="project-overlay">
-          <div class="project-info">
-           
-            <h4 class="project-name">Art Frame</h4>
-            <p class="project-categories">Photography</p>
-          </div>
-        </div>
-        </a> </div>
-      <!--/Portfolio Item With PrettyPhoto  --> 
-      
-    </div>
-    <!--/Portfolio Wrap --> 
-    
-  </div>
-  <!--/Portfolio Plus Filters -->
-  
-  <div class="portfolio-bottom"></div>
-  
-  <!-- Project Page Holder-->
-  <div id="project-page-holder">
-    <div class="clear"></div>
-    <div id="project-page-data"></div>
-  </div>
-  <!--/Project Page Holder--> 
-  
-</section>
-<!--/Portfolio --> 
-
-
-
-<section class="main-section" id="client_outer"><!--main-section client-part-start-->
-  <h2>Happy Clients</h2>
-  <div class="client_area ">
-    <div class="client_section animated  fadeInUp wow">
-      <div class="client_profile">
-        <div class="client_profile_pic"><img src="img/client-pic1.jpg" alt=""></div>
-        <h3>John Doe</h3>
-        <span>Google Inc</span> </div>
-      <div class="quote_section">
-        <div class="quote_arrow"></div>
-        <p><b><img src="img/quote_sign_left.png" alt=""></b> Proin iaculis purus consequat sem cure  digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper. <small><img src="img/quote_sign_right.png" alt=""></small> </p>
-      </div>
-      <div class="clear"></div>
-    </div>
-    <div class="client_section animated  fadeInDown wow">
-      <div class="client_profile flt">
-        <div class="client_profile_pic"><img src="img/client-pic2.jpg" alt=""></div>
-        <h3>Marie Gomez</h3>
-        <span>BFA Foundation</span> </div>
-      <div class="quote_section flt">
-        <div class="quote_arrow2"></div>
-        <p><b><img src="img/quote_sign_left.png" alt=""></b> Proin iaculis purus consequat sem cure  digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper. <small><img src="img/quote_sign_right.png" alt=""></small> </p>
-      </div>
-      <div class="clear"></div>
-    </div>
-  </div>
-</section>
-<!--main-section client-part-end-->
-
-<div class="c-logo-part"><!--c-logo-part-start-->
-  <div class="container">
-    <ul class="delay-06s animated  bounce wow">
-      <li><a href="javascript:void(0)"><img src="img/c-liogo1.png" alt=""></a></li>
-      <li><a href="javascript:void(0)"><img src="img/c-liogo2.png" alt=""></a></li>
-      <li><a href="javascript:void(0)"><img src="img/c-liogo3.png" alt=""></a></li>
-      <li><a href="javascript:void(0)"><img src="img/c-liogo5.png" alt=""></a></li>
-    </ul>
-  </div>
-</div>
-<!--c-logo-part-end-->
-<section class="main-section team" id="team"><!--main-section team-start-->
-  <div class="container">
-    <h2>Amazing Team</h2>
-    <h6>Take a closer look into our amazing team. We won’t bite.</h6>
-    <div class="team-leader-block clearfix">
-      <div class="team-leader-box">
-        <div class="team-leader wow fadeInDown delay-03s">
-          <div class="team-leader-shadow"><a href="javascript:void(0)"></a></div>
-          <img src="img/team-leader-pic1.jpg" alt="">
-          <ul>
-            <li><a href="javascript:void(0)" class="fa-twitter"></a></li>
-            <li><a href="javascript:void(0)" class="fa-facebook"></a></li>
-            <li><a href="javascript:void(0)" class="fa-pinterest"></a></li>
-            <li><a href="javascript:void(0)" class="fa-google-plus"></a></li>
-          </ul>
-        </div>
-        <h3 class="wow fadeInDown delay-03s">John Doe</h3>
-        <span class="wow fadeInDown delay-03s">Chief Executive Officer</span>
-        <p class="wow fadeInDown delay-03s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>
-      </div>
-      <div class="team-leader-box">
-        <div class="team-leader  wow fadeInDown delay-06s">
-          <div class="team-leader-shadow"><a href="javascript:void(0)"></a></div>
-          <img src="img/team-leader-pic2.jpg" alt="">
-          <ul>
-            <li><a href="javascript:void(0)" class="fa-twitter"></a></li>
-            <li><a href="javascript:void(0)" class="fa-facebook"></a></li>
-            <li><a href="javascript:void(0)" class="fa-pinterest"></a></li>
-            <li><a href="javascript:void(0)" class="fa-google-plus"></a></li>
-          </ul>
-        </div>
-        <h3 class="wow fadeInDown delay-06s">Jesse Robert</h3>
-        <span class="wow fadeInDown delay-06s">Chief Operating Officer</span>
-        <p class="wow fadeInDown delay-06s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>
-      </div>
-      <div class="team-leader-box">
-        <div class="team-leader wow fadeInDown delay-09s">
-          <div class="team-leader-shadow"><a href="javascript:void(0)"></a></div>
-          <img src="img/team-leader-pic3.jpg" alt="">
-          <ul>
-            <li><a href="javascript:void(0)" class="fa-twitter"></a></li>
-            <li><a href="javascript:void(0)" class="fa-facebook"></a></li>
-            <li><a href="javascript:void(0)" class="fa-pinterest"></a></li>
-            <li><a href="javascript:void(0)" class="fa-google-plus"></a></li>
-          </ul>
-        </div>
-        <h3 class="wow fadeInDown delay-09s">Jane white</h3>
-        <span class="wow fadeInDown delay-09s">CMO</span>
-        <p class="wow fadeInDown delay-09s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.</p>
-      </div>
-    </div>
-  </div>
-</section>
-<!--main-section team-end-->
-
-<section class="twitter-feed"><!--twitter-feed-->
-  <div class="container  animated fadeInDown delay-07s wow">
-    <div class="twitter_bird"><span><i class="fa-twitter"></i></span></div>
-    <p> Accusantium quam, aliquam ultricies eget tempor id, aliquam eget nibh et. Maecen aliquam. <br>
-      Accusantium quam, aliquam ultricies eget.</p>
-    <span>About 40 mins ago</span> </div>
-</section>
-<!--twitter-feed-end-->
-<footer class="footer_section" id="contact">
-  <div class="container">
-    <section class="main-section contact" id="contact">
-      <div class="contact_section">
-        <h2>Contact Us</h2>
-        <div class="row">
-          <div class="col-lg-4">
-            <div class="contact_block">
-              <div class="contact_block_icon rollIn animated wow"><span><i class="fa-home"></i></span></div>
-              <span> 325 USA, <br>
-              NewYork, US, 57204 </span> </div>
-          </div>
-          <div class="col-lg-4">
-            <div class="contact_block">
-              <div class="contact_block_icon icon2 rollIn animated wow"><span><i class="fa-phone"></i></span></div>
-              <span> 500-800-600-NOP </span> </div>
-          </div>
-          <div class="col-lg-4">
-            <div class="contact_block">
-              <div class="contact_block_icon icon3 rollIn animated wow"><span><i class="fa-pencil"></i></span></div>
-              <span> <a href="info@lumia.com"> info@lumia.com</a> </span> </div>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-lg-6 wow fadeInLeft">
-          <div class="contact-info-box address clearfix">
-            <h3>Don’t be hesitate. Say hello!</h3>
-            <p>Accusantium quam, aliquam ultricies eget tempor id, aliquam eget nibh et. Maecen aliquam, risus at semper. Accusantium quam, aliquam ultricies eget tempor id, aliquam eget nibh et. Maecen aliquam, risus at semper.</p>
-            <p>Accusantium quam, aliquam ultricies eget tempor id, aliquam eget nibh et. Maecen aliquampor id.</p>
-          </div>
-          <ul class="social-link">
-            <li class="twitter animated bounceIn wow delay-02s"><a href="javascript:void(0)"><i class="fa-twitter"></i></a></li>
-            <li class="facebook animated bounceIn wow delay-03s"><a href="javascript:void(0)"><i class="fa-facebook"></i></a></li>
-            <li class="pinterest animated bounceIn wow delay-04s"><a href="javascript:void(0)"><i class="fa-pinterest"></i></a></li>
-            <li class="gplus animated bounceIn wow delay-05s"><a href="javascript:void(0)"><i class="fa-google-plus"></i></a></li>
-            <li class="dribbble animated bounceIn wow delay-06s"><a href="javascript:void(0)"><i class="fa-dribbble"></i></a></li>
-          </ul>
-        </div>
-        <div class="col-lg-6 wow fadeInUp delay-06s">
-          <div class="form">
-            <input class="input-text animated wow flipInY delay-02s" type="text" name="" value="Your Name *" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;">
-            <input class="input-text animated wow flipInY delay-04s" type="text" name="" value="Your E-mail *" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;">
-            <textarea class="input-text text-area animated wow flipInY delay-06s" cols="0" rows="0" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;">Your Message *</textarea>
-            <input class="input-btn animated wow flipInY delay-08s" type="submit" value="send message">
           </div>
         </div>
       </div>
     </section>
-  </div>
-  <div class="container">
-    <div class="footer_bottom"> <span>Copyright © 2014 Lumia Theme By <a href="http://themesell.co/">ThemeSell</a>. </span> </div>
-  </div>
-</footer>
-<script type="text/javascript">
-    $(document).ready(function(e) {
-        $('#header_outer').scrollToFixed();
-        $('.res-nav_click').click(function(){
-            $('.main-nav').slideToggle();
-            return false    
-            
+    <!--Top_content-->
+
+    <!--Service-->
+    <section id="service">
+      <div class="container">
+        <h2>Services</h2>
+        <div class="service_area">
+          <div class="row">
+            <div class="col-lg-4">
+              <div class="service_block">
+                <div class="service_icon delay-03s animated wow zoomIn">
+                  <span><i class="fa-book"></i></span>
+                </div>
+                <h3 class="animated fadeInUp wow">Well Documented</h3>
+                <p class="animated fadeInDown wow">
+                  Proin iaculis purus consequat sem cure digni. Donec porttitora
+                  entum suscipit aenean rhoncus posuere odio in tincidunt.
+                </p>
+              </div>
+            </div>
+            <div class="col-lg-4">
+              <div class="service_block">
+                <div class="service_icon icon2 delay-03s animated wow zoomIn">
+                  <span><i class="fa-comments"></i></span>
+                </div>
+                <h3 class="animated fadeInUp wow">Friendly Support</h3>
+                <p class="animated fadeInDown wow">
+                  Proin iaculis purus consequat sem cure digni. Donec porttitora
+                  entum suscipit aenean rhoncus posuere odio in tincidunt.
+                </p>
+              </div>
+            </div>
+            <div class="col-lg-4">
+              <div class="service_block">
+                <div class="service_icon icon3 delay-03s animated wow zoomIn">
+                  <span><i class="fa-rocket"></i></span>
+                </div>
+                <h3 class="animated fadeInUp wow">Launch Ready</h3>
+                <p class="animated fadeInDown wow">
+                  Proin iaculis purus consequat sem cure digni. Donec porttitora
+                  entum suscipit aenean rhoncus posuere odio in tincidunt.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="row pt-20">
+            <div class="col-lg-4">
+              <div class="service_block">
+                <div class="service_icon icon4 delay-03s animated wow zoomIn">
+                  <span><i class="fa-compress"></i></span>
+                </div>
+                <h3 class="animated fadeInUp wow">Fully Responsive</h3>
+                <p class="animated fadeInDown wow">
+                  Proin iaculis purus consequat sem cure digni. Donec porttitora
+                  entum suscipit aenean rhoncus posuere odio in tincidunt.
+                </p>
+              </div>
+            </div>
+            <div class="col-lg-4">
+              <div class="service_block">
+                <div class="service_icon icon5 delay-03s animated wow zoomIn">
+                  <span><i class="fa-eye"></i></span>
+                </div>
+                <h3 class="animated fadeInUp wow">Retina Ready</h3>
+                <p class="animated fadeInDown wow">
+                  Proin iaculis purus consequat sem cure digni. Donec porttitora
+                  entum suscipit aenean rhoncus posuere odio in tincidunt.
+                </p>
+              </div>
+            </div>
+            <div class="col-lg-4">
+              <div class="service_block">
+                <div class="service_icon icon6 delay-03s animated wow zoomIn">
+                  <span><i class="fa-cog"></i></span>
+                </div>
+                <h3 class="animated fadeInUp wow">HTML5+CSS3</h3>
+                <p class="animated fadeInDown wow">
+                  Proin iaculis purus consequat sem cure digni. Donec porttitora
+                  entum suscipit aenean rhoncus posuere odio in tincidunt.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!--Service-->
+
+    <section id="work_outer">
+      <!--main-section-start-->
+      <div class="top_cont_latest">
+        <div class="container">
+          <h2>Latest Work</h2>
+          <div class="work_section">
+            <div class="row margin-bottom-20">
+              <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft delay-05s">
+                <div class="thumbnails thumbnail-style thumbnail-kenburn">
+                  <div class="thumbnail-img">
+                    <div class="overflow-hidden">
+                      <img alt="" src="img/item1.jpg" class="img-responsive" />
+                    </div>
+                  </div>
+                  <div class="caption">
+                    <h3><a href="#" class="hover-effect">Project One</a></h3>
+                    <p>
+                      Donec id elit non mi porta gravida at eget metus. Fusce
+                      dapibus, justo sit amet risus etiam porta sem.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft delay-05s">
+                <div class="thumbnails thumbnail-style thumbnail-kenburn">
+                  <div class="thumbnail-img">
+                    <div class="overflow-hidden">
+                      <img alt="" src="img/item2.jpg" class="img-responsive" />
+                    </div>
+                  </div>
+                  <div class="caption">
+                    <h3><a href="#" class="hover-effect">Project Two</a></h3>
+                    <p>
+                      Donec id elit non mi porta gravida at eget metus. Fusce
+                      dapibus, justo sit amet risus etiam porta sem.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft delay-05s">
+                <div class="thumbnails thumbnail-style thumbnail-kenburn">
+                  <div class="thumbnail-img">
+                    <div class="overflow-hidden">
+                      <img alt="" src="img/item3.jpg" class="img-responsive" />
+                    </div>
+                  </div>
+                  <div class="caption">
+                    <h3><a href="#" class="hover-effect">Project Three</a></h3>
+                    <p>
+                      Donec id elit non mi porta gravida at eget metus. Fusce
+                      dapibus, justo sit amet risus etiam porta sem.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft delay-05s">
+                <div class="thumbnails thumbnail-style thumbnail-kenburn">
+                  <div class="thumbnail-img">
+                    <div class="overflow-hidden">
+                      <img alt="" src="img/item5.jpg" class="img-responsive" />
+                    </div>
+                  </div>
+                  <div class="caption">
+                    <h3><a href="#" class="hover-effect">Project Four</a></h3>
+                    <p>
+                      Donec id elit non mi porta gravida at eget metus. Fusce
+                      dapibus, justo sit amet risus etiam porta sem.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--<div class="work_pic"><img src="img/dashboard_pic.png" alt=""></div>-->
+      </div>
+    </section>
+    <!--main-section-end-->
+
+    <!--new_portfolio-->
+
+    <!-- Portfolio -->
+    <section id="Portfolio" class="content">
+      <!-- Container -->
+      <div class="container portfolio-title">
+        <!-- Section Title -->
+        <div class="section-title">
+          <h2>Portfolio</h2>
+        </div>
+        <!--/Section Title -->
+      </div>
+      <!-- Container -->
+
+      <div class="portfolio-top"></div>
+
+      <!-- Portfolio Plus Filters -->
+      <div class="portfolio">
+        <!-- Portfolio Filters -->
+        <div id="filters" class="sixteen columns">
+          <ul class="clearfix">
+            <li>
+              <a id="all" href="#" data-filter="*" class="active">
+                <h5>All</h5>
+              </a>
+            </li>
+            <li>
+              <a class="" href="#" data-filter=".branding">
+                <h5>Branding</h5>
+              </a>
+            </li>
+            <li>
+              <a class="" href="#" data-filter=".design">
+                <h5>Design</h5>
+              </a>
+            </li>
+            <li>
+              <a class="" href="#" data-filter=".photography">
+                <h5>Photography</h5>
+              </a>
+            </li>
+            <li>
+              <a class="" href="#" data-filter=".videography">
+                <h5>Videography</h5>
+              </a>
+            </li>
+            <li>
+              <a class="" href="#" data-filter=".web">
+                <h5>Web</h5>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <!--/Portfolio Filters -->
+
+        <!-- Portfolio Wrap -->
+        <div
+          class="isotope"
+          style="position: relative; overflow: hidden; height: 480px"
+          id="portfolio-wrap"
+        >
+          <!-- Portfolio Item With PrettyPhoto  -->
+          <div
+            style="
+              position: absolute;
+              left: 0px;
+              top: 0px;
+              transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
+              width: 337px;
+              opacity: 1;
+            "
+            class="portfolio-item one-four videography isotope-item"
+          >
+            <div class="portfolio-image">
+              <img src="img/portfolio1.jpg" alt="Portfolio 1" />
+            </div>
+            <a title="Starbucks Coffee" rel="prettyPhoto[galname]" href="#">
+              <div class="project-overlay">
+                <div class="project-info">
+                  <h4 class="project-name">Leica Camera</h4>
+                  <p class="project-categories">Videography</p>
+                </div>
+              </div>
+            </a>
+          </div>
+          <!--/Portfolio Item With PrettyPhoto  -->
+
+          <!-- Portfolio Item Video Expander  -->
+          <div
+            style="
+              position: absolute;
+              left: 0px;
+              top: 0px;
+              transform: translate3d(337px, 0px, 0px) scale3d(1, 1, 1);
+              width: 337px;
+              opacity: 1;
+            "
+            class="portfolio-item one-four design isotope-item"
+          >
+            <div class="portfolio-image">
+              <img src="img/portfolio2.jpg" alt="Portfolio 1" />
+            </div>
+            <div class="project-overlay">
+              <div class="open-project-link">
+                <a class="open-project" href="#" title="Open Project"></a>
+              </div>
+              <div class="project-info">
+                <h4 class="project-name">Foto Template</h4>
+                <p class="project-categories">Design</p>
+              </div>
+            </div>
+          </div>
+          <!--/Portfolio Item Video Expander  -->
+
+          <!-- Portfolio Item Normal Expander -->
+          <div
+            style="
+              position: absolute;
+              left: 0px;
+              top: 0px;
+              transform: translate3d(674px, 0px, 0px) scale3d(1, 1, 1);
+              width: 337px;
+              opacity: 1;
+            "
+            class="portfolio-item one-four design isotope-item"
+          >
+            <div class="portfolio-image">
+              <img src="img/portfolio3.jpg" alt="Portfolio 1" />
+            </div>
+            <div class="project-overlay">
+              <div class="open-project-link">
+                <a class="open-project" href="#" title="Open Project"></a>
+              </div>
+              <div class="project-info">
+                <h4 class="project-name">Sony Phone</h4>
+                <p class="project-categories">Design</p>
+              </div>
+            </div>
+          </div>
+          <!--/Portfolio Item Normal Expander -->
+
+          <!-- Portfolio Item FullScreen Expander -->
+          <div
+            style="
+              position: absolute;
+              left: 0px;
+              top: 0px;
+              transform: translate3d(1011px, 0px, 0px) scale3d(1, 1, 1);
+              width: 337px;
+              opacity: 1;
+            "
+            class="portfolio-item one-four photography branding web isotope-item"
+          >
+            <div class="portfolio-image">
+              <img src="img/portfolio4.jpg" alt="Portfolio 1" />
+            </div>
+            <div class="project-overlay">
+              <div class="open-project-link">
+                <a class="open-project" href="#" title="Open Project"></a>
+              </div>
+              <div class="project-info">
+                <h4 class="project-name">Nike Shoes</h4>
+                <p class="project-categories">Photography, Web, Branding</p>
+              </div>
+            </div>
+          </div>
+          <!-- Portfolio Item FullScreen Expander -->
+
+          <!-- Portfolio Item FullScreen Expander -->
+          <div
+            style="
+              position: absolute;
+              left: 0px;
+              top: 0px;
+              transform: translate3d(0px, 240px, 0px) scale3d(1, 1, 1);
+              width: 337px;
+              opacity: 1;
+            "
+            class="portfolio-item one-four design isotope-item"
+          >
+            <div class="portfolio-image">
+              <img src="img/portfolio5.jpg" alt="Portfolio 1" />
+            </div>
+            <div class="project-overlay">
+              <div class="open-project-link">
+                <a class="open-project" href="#" title="Open Project"></a>
+              </div>
+              <div class="project-info">
+                <h4 class="project-name">Vinyl Record</h4>
+                <p class="project-categories">Design</p>
+              </div>
+            </div>
+          </div>
+          <!--/Portfolio Item FullScreen Expander -->
+
+          <!-- Portfolio Item Normal Expander -->
+          <div
+            style="
+              position: absolute;
+              left: 0px;
+              top: 0px;
+              transform: translate3d(337px, 240px, 0px) scale3d(1, 1, 1);
+              width: 337px;
+              opacity: 1;
+            "
+            class="portfolio-item one-four web isotope-item"
+          >
+            <div class="portfolio-image">
+              <img src="img/portfolio6.jpg" alt="Portfolio 1" />
+            </div>
+            <div class="project-overlay">
+              <div class="open-project-link">
+                <a class="open-project" href="#" title="Open Project"></a>
+              </div>
+              <div class="project-info">
+                <h4 class="project-name">iPhone</h4>
+                <p class="project-categories">Web</p>
+              </div>
+            </div>
+          </div>
+          <!--/Portfolio Item Normal Expander -->
+
+          <!-- Portfolio Item External Project  -->
+          <div
+            style="
+              position: absolute;
+              left: 0px;
+              top: 0px;
+              transform: translate3d(674px, 240px, 0px) scale3d(1, 1, 1);
+              width: 337px;
+              opacity: 1;
+            "
+            class="portfolio-item one-four design web isotope-item"
+          >
+            <div class="portfolio-image">
+              <img src="img/portfolio7.jpg" alt="Portfolio 1" />
+            </div>
+            <a href="#" class="external">
+              <div class="project-overlay">
+                <div class="project-info">
+                  <h4 class="project-name">Nexus Phone</h4>
+                  <p class="project-categories">Design, Web</p>
+                </div>
+              </div>
+            </a>
+          </div>
+          <!--/Portfolio Item External Project  -->
+
+          <!-- Portfolio Item With PrettyPhoto  -->
+          <div
+            style="
+              position: absolute;
+              left: 0px;
+              top: 0px;
+              transform: translate3d(1011px, 240px, 0px) scale3d(1, 1, 1);
+              width: 337px;
+              opacity: 1;
+            "
+            class="portfolio-item one-four photography isotope-item"
+          >
+            <div class="portfolio-image">
+              <img src="img/portfolio8.jpg" alt="Portfolio 1" />
+            </div>
+            <a title="Stereo Headphones" rel="prettyPhoto[galname]" href="#">
+              <div class="project-overlay">
+                <div class="project-info">
+                  <h4 class="project-name">Art Frame</h4>
+                  <p class="project-categories">Photography</p>
+                </div>
+              </div>
+            </a>
+          </div>
+          <!--/Portfolio Item With PrettyPhoto  -->
+        </div>
+        <!--/Portfolio Wrap -->
+      </div>
+      <!--/Portfolio Plus Filters -->
+
+      <div class="portfolio-bottom"></div>
+
+      <!-- Project Page Holder-->
+      <div id="project-page-holder">
+        <div class="clear"></div>
+        <div id="project-page-data"></div>
+      </div>
+      <!--/Project Page Holder-->
+    </section>
+    <!--/Portfolio -->
+
+    <section class="main-section" id="client_outer">
+      <!--main-section client-part-start-->
+      <h2>Happy Clients</h2>
+      <div class="client_area">
+        <div class="client_section animated fadeInUp wow">
+          <div class="client_profile">
+            <div class="client_profile_pic">
+              <img src="img/client-pic1.jpg" alt="" />
+            </div>
+            <h3>John Doe</h3>
+            <span>Google Inc</span>
+          </div>
+          <div class="quote_section">
+            <div class="quote_arrow"></div>
+            <p>
+              <b><img src="img/quote_sign_left.png" alt="" /></b> Proin iaculis
+              purus consequat sem cure digni ssim donec porttitora entum
+              suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam
+              eget nibh et. Maecen aliquam, risus at semper.
+              <small><img src="img/quote_sign_right.png" alt="" /></small>
+            </p>
+          </div>
+          <div class="clear"></div>
+        </div>
+        <div class="client_section animated fadeInDown wow">
+          <div class="client_profile flt">
+            <div class="client_profile_pic">
+              <img src="img/client-pic2.jpg" alt="" />
+            </div>
+            <h3>Marie Gomez</h3>
+            <span>BFA Foundation</span>
+          </div>
+          <div class="quote_section flt">
+            <div class="quote_arrow2"></div>
+            <p>
+              <b><img src="img/quote_sign_left.png" alt="" /></b> Proin iaculis
+              purus consequat sem cure digni ssim donec porttitora entum
+              suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam
+              eget nibh et. Maecen aliquam, risus at semper.
+              <small><img src="img/quote_sign_right.png" alt="" /></small>
+            </p>
+          </div>
+          <div class="clear"></div>
+        </div>
+      </div>
+    </section>
+    <!--main-section client-part-end-->
+
+    <div class="c-logo-part">
+      <!--c-logo-part-start-->
+      <div class="container">
+        <ul class="delay-06s animated bounce wow">
+          <li>
+            <a href="javascript:void(0)"
+              ><img src="img/c-liogo1.png" alt=""
+            /></a>
+          </li>
+          <li>
+            <a href="javascript:void(0)"
+              ><img src="img/c-liogo2.png" alt=""
+            /></a>
+          </li>
+          <li>
+            <a href="javascript:void(0)"
+              ><img src="img/c-liogo3.png" alt=""
+            /></a>
+          </li>
+          <li>
+            <a href="javascript:void(0)"
+              ><img src="img/c-liogo5.png" alt=""
+            /></a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!--c-logo-part-end-->
+    <section class="main-section team" id="team">
+      <!--main-section team-start-->
+      <div class="container">
+        <h2>Amazing Team</h2>
+        <h6>Take a closer look into our amazing team. We won’t bite.</h6>
+        <div class="team-leader-block clearfix">
+          <div class="team-leader-box">
+            <div class="team-leader wow fadeInDown delay-03s">
+              <div class="team-leader-shadow">
+                <a href="javascript:void(0)"></a>
+              </div>
+              <img src="img/team-leader-pic1.jpg" alt="" />
+              <ul>
+                <li><a href="javascript:void(0)" class="fa-twitter"></a></li>
+                <li><a href="javascript:void(0)" class="fa-facebook"></a></li>
+                <li><a href="javascript:void(0)" class="fa-pinterest"></a></li>
+                <li>
+                  <a href="javascript:void(0)" class="fa-google-plus"></a>
+                </li>
+              </ul>
+            </div>
+            <h3 class="wow fadeInDown delay-03s">John Doe</h3>
+            <span class="wow fadeInDown delay-03s"
+              >Chief Executive Officer</span
+            >
+            <p class="wow fadeInDown delay-03s">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+              consequat sollicitudin cursus. Dolor sit amet, consectetur
+              adipiscing elit proin consequat.
+            </p>
+          </div>
+          <div class="team-leader-box">
+            <div class="team-leader wow fadeInDown delay-06s">
+              <div class="team-leader-shadow">
+                <a href="javascript:void(0)"></a>
+              </div>
+              <img src="img/team-leader-pic2.jpg" alt="" />
+              <ul>
+                <li><a href="javascript:void(0)" class="fa-twitter"></a></li>
+                <li><a href="javascript:void(0)" class="fa-facebook"></a></li>
+                <li><a href="javascript:void(0)" class="fa-pinterest"></a></li>
+                <li>
+                  <a href="javascript:void(0)" class="fa-google-plus"></a>
+                </li>
+              </ul>
+            </div>
+            <h3 class="wow fadeInDown delay-06s">Jesse Robert</h3>
+            <span class="wow fadeInDown delay-06s"
+              >Chief Operating Officer</span
+            >
+            <p class="wow fadeInDown delay-06s">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+              consequat sollicitudin cursus. Dolor sit amet, consectetur
+              adipiscing elit proin consequat.
+            </p>
+          </div>
+          <div class="team-leader-box">
+            <div class="team-leader wow fadeInDown delay-09s">
+              <div class="team-leader-shadow">
+                <a href="javascript:void(0)"></a>
+              </div>
+              <img src="img/team-leader-pic3.jpg" alt="" />
+              <ul>
+                <li><a href="javascript:void(0)" class="fa-twitter"></a></li>
+                <li><a href="javascript:void(0)" class="fa-facebook"></a></li>
+                <li><a href="javascript:void(0)" class="fa-pinterest"></a></li>
+                <li>
+                  <a href="javascript:void(0)" class="fa-google-plus"></a>
+                </li>
+              </ul>
+            </div>
+            <h3 class="wow fadeInDown delay-09s">Jane white</h3>
+            <span class="wow fadeInDown delay-09s">CMO</span>
+            <p class="wow fadeInDown delay-09s">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+              consequat sollicitudin cursus. Dolor sit amet, consectetur
+              adipiscing elit proin consequat.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!--main-section team-end-->
+
+    <section class="twitter-feed">
+      <!--twitter-feed-->
+      <div class="container animated fadeInDown delay-07s wow">
+        <div class="twitter_bird">
+          <span><i class="fa-twitter"></i></span>
+        </div>
+        <p>
+          Accusantium quam, aliquam ultricies eget tempor id, aliquam eget nibh
+          et. Maecen aliquam. <br />
+          Accusantium quam, aliquam ultricies eget.
+        </p>
+        <span>About 40 mins ago</span>
+      </div>
+    </section>
+    <!--twitter-feed-end-->
+    <footer class="footer_section" id="contact">
+      <div class="container">
+        <section class="main-section contact" id="contact">
+          <div class="contact_section">
+            <h2>Contact Us</h2>
+            <div class="row">
+              <div class="col-lg-4">
+                <div class="contact_block">
+                  <div class="contact_block_icon rollIn animated wow">
+                    <span><i class="fa-home"></i></span>
+                  </div>
+                  <span>
+                    325 USA, <br />
+                    NewYork, US, 57204
+                  </span>
+                </div>
+              </div>
+              <div class="col-lg-4">
+                <div class="contact_block">
+                  <div class="contact_block_icon icon2 rollIn animated wow">
+                    <span><i class="fa-phone"></i></span>
+                  </div>
+                  <span> 500-800-600-NOP </span>
+                </div>
+              </div>
+              <div class="col-lg-4">
+                <div class="contact_block">
+                  <div class="contact_block_icon icon3 rollIn animated wow">
+                    <span><i class="fa-pencil"></i></span>
+                  </div>
+                  <span> <a href="info@lumia.com"> info@lumia.com</a> </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-lg-6 wow fadeInLeft">
+              <div class="contact-info-box address clearfix">
+                <h3>Don’t be hesitate. Say hello!</h3>
+                <p>
+                  Accusantium quam, aliquam ultricies eget tempor id, aliquam
+                  eget nibh et. Maecen aliquam, risus at semper. Accusantium
+                  quam, aliquam ultricies eget tempor id, aliquam eget nibh et.
+                  Maecen aliquam, risus at semper.
+                </p>
+                <p>
+                  Accusantium quam, aliquam ultricies eget tempor id, aliquam
+                  eget nibh et. Maecen aliquampor id.
+                </p>
+              </div>
+              <ul class="social-link">
+                <li class="twitter animated bounceIn wow delay-02s">
+                  <a href="javascript:void(0)"><i class="fa-twitter"></i></a>
+                </li>
+                <li class="facebook animated bounceIn wow delay-03s">
+                  <a href="javascript:void(0)"><i class="fa-facebook"></i></a>
+                </li>
+                <li class="pinterest animated bounceIn wow delay-04s">
+                  <a href="javascript:void(0)"><i class="fa-pinterest"></i></a>
+                </li>
+                <li class="gplus animated bounceIn wow delay-05s">
+                  <a href="javascript:void(0)"
+                    ><i class="fa-google-plus"></i
+                  ></a>
+                </li>
+                <li class="dribbble animated bounceIn wow delay-06s">
+                  <a href="javascript:void(0)"><i class="fa-dribbble"></i></a>
+                </li>
+              </ul>
+            </div>
+            <div class="col-lg-6 wow fadeInUp delay-06s">
+              <div class="form">
+                <input
+                  class="input-text animated wow flipInY delay-02s"
+                  type="text"
+                  name=""
+                  value="Your Name *"
+                  onFocus="if(this.value==this.defaultValue)this.value='';"
+                  onBlur="if(this.value=='')this.value=this.defaultValue;"
+                />
+                <input
+                  class="input-text animated wow flipInY delay-04s"
+                  type="text"
+                  name=""
+                  value="Your E-mail *"
+                  onFocus="if(this.value==this.defaultValue)this.value='';"
+                  onBlur="if(this.value=='')this.value=this.defaultValue;"
+                />
+                <textarea
+                  class="input-text text-area animated wow flipInY delay-06s"
+                  id="message"
+                  cols="0"
+                  rows="0"
+                  onFocus="if(this.value==this.defaultValue)this.value='';"
+                  onBlur="if(this.value=='')this.value=this.defaultValue;"
+                ></textarea>
+                <input
+                  class="input-btn animated wow flipInY delay-08s"
+                  type="submit"
+                  value="send message"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+      <div class="container">
+        <div class="footer_bottom">
+          <span
+            >Copyright © 2014 Lumia Theme By
+            <a href="http://themesell.co/">ThemeSell</a>.
+          </span>
+        </div>
+      </div>
+    </footer>
+    <script type="text/javascript">
+      $(document).ready(function (e) {
+        $("#header_outer").scrollToFixed();
+        $(".res-nav_click").click(function () {
+          $(".main-nav").slideToggle();
+          return false;
         });
-        
-    });
-</script> 
-<script>
-    wow = new WOW(
-      {
-        animateClass: 'animated',
-        offset:       100
-      }
-    );
-    wow.init();
-    document.getElementById('').onclick = function() {
-      var section = document.createElement('section');
-      section.className = 'wow fadeInDown';
-	  section.className = 'wow shake';
-	  section.className = 'wow zoomIn';
-	  section.className = 'wow lightSpeedIn';
-      this.parentNode.insertBefore(section, this);
-    };
-  </script> 
-<script type="text/javascript">
-	$(window).load(function(){
-		
-		$('a').bind('click',function(event){
-			var $anchor = $(this);
-			
-			$('html, body').stop().animate({
-				scrollTop: $($anchor.attr('href')).offset().top - 91
-			}, 1500,'easeInOutExpo');
-			/*
+      });
+    </script>
+    <script>
+      wow = new WOW({
+        animateClass: "animated",
+        offset: 100,
+      });
+      wow.init();
+      document.getElementById("").onclick = function () {
+        var section = document.createElement("section");
+        section.className = "wow fadeInDown";
+        section.className = "wow shake";
+        section.className = "wow zoomIn";
+        section.className = "wow lightSpeedIn";
+        this.parentNode.insertBefore(section, this);
+      };
+    </script>
+    <script type="text/javascript">
+      $(window).load(function () {
+        $("a").bind("click", function (event) {
+          var $anchor = $(this);
+
+          $("html, body")
+            .stop()
+            .animate(
+              {
+                scrollTop: $($anchor.attr("href")).offset().top - 91,
+              },
+              1500,
+              "easeInOutExpo"
+            );
+          /*
 			if you don't want to use the easing effects:
 			$('html, body').stop().animate({
 				scrollTop: $($anchor.attr('href')).offset().top
 			}, 1000);
 			*/
-			event.preventDefault();
-		});
-	})
-</script> 
+          event.preventDefault();
+        });
+      });
+    </script>
 
-<!--<script type="text/javascript">
+    <!--<script type="text/javascript">
 
 $(window).load(function(){
   
@@ -685,84 +982,77 @@ $(window).load(function(){
 </script>
 
 
---> 
+-->
 
-<script type="text/javascript">
+    <script type="text/javascript">
+      jQuery(document).ready(function ($) {
+        // Portfolio Isotope
+        var container = $("#portfolio-wrap");
 
-   
-  jQuery(document).ready(function($){     
-// Portfolio Isotope
-	var container = $('#portfolio-wrap');	
-	
+        container.isotope({
+          animationEngine: "best-available",
+          animationOptions: {
+            duration: 200,
+            queue: false,
+          },
+          layoutMode: "fitRows",
+        });
 
-	container.isotope({
-		animationEngine : 'best-available',
-	  	animationOptions: {
-	     	duration: 200,
-	     	queue: false
-	   	},
-		layoutMode: 'fitRows'
-	});	
+        $("#filters a").click(function () {
+          $("#filters a").removeClass("active");
+          $(this).addClass("active");
+          var selector = $(this).attr("data-filter");
+          container.isotope({ filter: selector });
+          setProjects();
+          return false;
+        });
 
-	$('#filters a').click(function(){
-		$('#filters a').removeClass('active');
-		$(this).addClass('active');
-		var selector = $(this).attr('data-filter');
-	  	container.isotope({ filter: selector });
-        setProjects();		
-	  	return false;
-	});
-		
-		
-		function splitColumns() { 
-			var winWidth = $(window).width(), 
-				columnNumb = 1;
-			
-			
-			if (winWidth > 1024) {
-				columnNumb = 4;
-			} else if (winWidth > 900) {
-				columnNumb = 2;
-			} else if (winWidth > 479) {
-				columnNumb = 2;
-			} else if (winWidth < 479) {
-				columnNumb = 1;
-			}
-			
-			return columnNumb;
-		}		
-		
-		function setColumns() { 
-			var winWidth = $(window).width(), 
-				columnNumb = splitColumns(), 
-				postWidth = Math.floor(winWidth / columnNumb);
-			
-			container.find('.portfolio-item').each(function () { 
-				$(this).css( { 
-					width : postWidth + 'px' 
-				});
-			});
-		}		
-		
-		function setProjects() { 
-			setColumns();
-			container.isotope('reLayout');
-		}		
-		
-		container.imagesLoaded(function () { 
-			setColumns();
-		});
-		
-	
-		$(window).bind('resize', function () { 
-			setProjects();			
-		});
+        function splitColumns() {
+          var winWidth = $(window).width(),
+            columnNumb = 1;
 
-});
-$( window ).load(function() {
-	jQuery('#all').click();
-	return false;
-});
-</script>
-</body>
-</html>
\ No newline at end of file
+          if (winWidth > 1024) {
+            columnNumb = 4;
+          } else if (winWidth > 900) {
+            columnNumb = 2;
+          } else if (winWidth > 479) {
+            columnNumb = 2;
+          } else if (winWidth < 479) {
+            columnNumb = 1;
+          }
+
+          return columnNumb;
+        }
+
+        function setColumns() {
+          var winWidth = $(window).width(),
+            columnNumb = splitColumns(),
+            postWidth = Math.floor(winWidth / columnNumb);
+
+          container.find(".portfolio-item").each(function () {
+            $(this).css({
+              width: postWidth + "px",
+            });
+          });
+        }
+
+        function setProjects() {
+          setColumns();
+          container.isotope("reLayout");
+        }
+
+        container.imagesLoaded(function () {
+          setColumns();
+        });
+
+        $(window).bind("resize", function () {
+          setProjects();
+        });
+      });
+      $(window).load(function () {
+        jQuery("#all").click();
+        return false;
+      });
+    </script>
+  </body>
+</html>
diff --git a/lumia/js/destruct.js b/lumia/js/destruct.js
index c927683..7d887cc 100644
--- a/lumia/js/destruct.js
+++ b/lumia/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/mabur/index.html b/mabur/index.html
index b551fee..5080089 100644
--- a/mabur/index.html
+++ b/mabur/index.html
@@ -457,7 +457,7 @@ License URL: http://creativecommons.org/licenses/by/3.0/
 								<form>
 									<input type="text" value="Name " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
 									<input type="text" value="info@mail.com *" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email@domain.com *';}">
-									<textarea onfocus="if(this.value == 'Message *') this.value='';" onblur="if(this.value == '') this.value='Message *;">Message *</textarea>
+									<textarea id="message" onfocus="if(this.value == 'Message *') this.value='';" onblur="if(this.value == '') this.value='Message *;"></textarea>
 									<p class="conditions"> <label><span>*</span>scelerisque sit amet felis sit nunc.</label></p>
 									<span class="submit-btn"><input type="submit" value="Send"></span>
 								</form>
diff --git a/mabur/js/destruct.js b/mabur/js/destruct.js
index c927683..7d887cc 100644
--- a/mabur/js/destruct.js
+++ b/mabur/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/meetup/js/destruct.js b/meetup/js/destruct.js
index c927683..7d887cc 100644
--- a/meetup/js/destruct.js
+++ b/meetup/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/superfresh/index.html b/superfresh/index.html
index aad5b3c..2abcb88 100644
--- a/superfresh/index.html
+++ b/superfresh/index.html
@@ -1,349 +1,493 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-<script src="js/destruct.js"></script>
-<title>Superfresh Bootstrap Template</title>
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=Edge">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="keywords" content="">
-<meta name="description" content="">
-<!-- stylesheet css -->
-<link rel="stylesheet" href="css/bootstrap.min.css">
-<link rel="stylesheet" href="css/font-awesome.min.css">
-<link rel="stylesheet" href="css/nivo-lightbox.css">
-<link rel="stylesheet" href="css/nivo_themes/default/default.css">
-<link rel="stylesheet" href="css/templatemo-style.css">
-<!-- google web font css -->
-<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600,700' rel='stylesheet' type='text/css'>
-</head>
-<body data-spy="scroll" data-target=".navbar-collapse" id="top">
-<!-- navigation -->
-<div class="navbar navbar-default navbar-fixed-top" role="navigation">
-  <div class="container">
-    <div class="navbar-header">
-      <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon icon-bar"></span> <span class="icon icon-bar"></span> <span class="icon icon-bar"></span></button>
-      <a href="#" class="navbar-brand">Superfresh.</a></div>
-    <div class="collapse navbar-collapse">
-      <ul class="nav navbar-nav navbar-right">
-        <li><a href="#home" class="smoothScroll">HOME</a></li>
-        <li><a href="#service" class="smoothScroll">SERVICE</a></li>
-        <li><a href="#about" class="smoothScroll">ABOUT</a></li>
-        <li><a href="#portfolio" class="smoothScroll">PORTFOLIO</a></li>
-        <li><a href="#pricing" class="smoothScroll">PRICE</a></li>
-        <li><a href="#contact" class="smoothScroll">CONTACT</a></li>
-      </ul>
-    </div>
-  </div>
-</div>
-<!-- home section -->
-<div id="home">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-offset-6 col-md-6 col-sm-offset-6 col-sm-6">
-        <h2>welcome to</h2>
-        <h1>Superfresh <strong>Design Studio</strong></h1>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
-        <a href="#service" class="btn btn-default smoothScroll">GET STARTED</a></div>
-    </div>
-  </div>
-</div>
-<!-- service section -->
-<div id="service">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12 col-sm-12">
-        <h2>Here's How we work.</h2>
-      </div>
-      <div class="col-md-4 col-sm-4"> <i class="fa fa-paper-plane"></i>
-        <h3>Research.</h3>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
-      </div>
-      <div class="col-md-4 col-sm-4"> <i class="fa fa-bell-o"></i>
-        <h3>Design.</h3>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
-      </div>
-      <div class="col-md-4 col-sm-4"> <i class="fa fa-coffee"></i>
-        <h3>Coding.</h3>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- divider section -->
-<div class="container">
-  <div class="row">
-    <div class="col-md-1 col-sm-1"></div>
-    <div class="col-md-10 col-sm-10">
-      <hr>
-    </div>
-    <div class="col-md-1 col-sm-1"></div>
-  </div>
-</div>
-<!-- about section -->
-<div id="about">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12 col-sm-12">
-        <h2>The Superfresh Story</h2>
-      </div>
-      <div class="col-md-6 col-sm-6"><img src="images/about-img.jpg" class="img-responsive" alt="about img"></div>
-      <div class="col-md-6 col-sm-6">
-        <h3>ABOUT US</h3>
-        <h4>talented Designers &amp; Developers.</h4>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- divider section -->
-<div class="container">
-  <div class="row">
-    <div class="col-md-1 col-sm-1"></div>
-    <div class="col-md-10 col-sm-10">
-      <hr>
-    </div>
-    <div class="col-md-1 col-sm-1"></div>
-  </div>
-</div>
-<!-- team section -->
-<div id="team">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12 col-sm-12">
-        <h2>Behind the Design Studio.</h2>
-      </div>
-      <div class="col-md-3 col-sm-3"><img src="images/team1.jpg" class="img-responsive" alt="team img">
-        <h3>James Smith</h3>
-        <h4>Creative Director</h4>
-      </div>
-      <div class="col-md-3 col-sm-3"><img src="images/team2.jpg" class="img-responsive" alt="team img">
-        <h3>Jonny Doe</h3>
-        <h4>CEO / CO-Founder</h4>
-      </div>
-      <div class="col-md-3 col-sm-3"><img src="images/team3.jpg" class="img-responsive" alt="team img">
-        <h3>Jonathan Ive </h3>
-        <h4>Chief Design Office</h4>
-      </div>
-      <div class="col-md-3 col-sm-3"><img src="images/team4.jpg" class="img-responsive" alt="team img">
-        <h3>Mary Lane</h3>
-        <h4>UX Designer</h4>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- divider section -->
-<div class="container">
-  <div class="row">
-    <div class="col-md-1 col-sm-1"></div>
-    <div class="col-md-10 col-sm-10">
-      <hr>
-    </div>
-    <div class="col-md-1 col-sm-1"></div>
-  </div>
-</div>
-<!-- portfolio section -->
-<div id="portfolio">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12 col-sm-12">
-        <div class="title">
-          <h2>Works. Portfolio</h2>
+  <head>
+    <script src="js/destruct.js"></script>
+    <title>Superfresh Bootstrap Template</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="keywords" content="" />
+    <meta name="description" content="" />
+    <!-- stylesheet css -->
+    <link rel="stylesheet" href="css/bootstrap.min.css" />
+    <link rel="stylesheet" href="css/font-awesome.min.css" />
+    <link rel="stylesheet" href="css/nivo-lightbox.css" />
+    <link rel="stylesheet" href="css/nivo_themes/default/default.css" />
+    <link rel="stylesheet" href="css/templatemo-style.css" />
+    <!-- google web font css -->
+    <link
+      href="http://fonts.googleapis.com/css?family=Raleway:400,300,600,700"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+  <body data-spy="scroll" data-target=".navbar-collapse" id="top">
+    <!-- navigation -->
+    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
+      <div class="container">
+        <div class="navbar-header">
+          <button
+            class="navbar-toggle"
+            data-toggle="collapse"
+            data-target=".navbar-collapse"
+          >
+            <span class="icon icon-bar"></span>
+            <span class="icon icon-bar"></span>
+            <span class="icon icon-bar"></span>
+          </button>
+          <a href="#" class="navbar-brand">Superfresh.</a>
         </div>
-        <!-- ISO section -->
-        <div class="iso-section">
-          <ul class="filter-wrapper clearfix">
-            <li><a href="#" data-filter="*" class="selected opc-main-bg">All</a></li>
-            <li><a href="#" class="opc-main-bg" data-filter=".html">Html</a></li>
-            <li><a href="#" class="opc-main-bg" data-filter=".photoshop">Photoshop</a></li>
-            <li><a href="#" class="opc-main-bg" data-filter=".wordpress">Wordpress</a></li>
-            <li><a href="#" class="opc-main-bg" data-filter=".mobile">Mobile</a></li>
+        <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="#home" class="smoothScroll">HOME</a></li>
+            <li><a href="#service" class="smoothScroll">SERVICE</a></li>
+            <li><a href="#about" class="smoothScroll">ABOUT</a></li>
+            <li><a href="#portfolio" class="smoothScroll">PORTFOLIO</a></li>
+            <li><a href="#pricing" class="smoothScroll">PRICE</a></li>
+            <li><a href="#contact" class="smoothScroll">CONTACT</a></li>
           </ul>
-          <div class="iso-box-section">
-            <div class="iso-box-wrapper col4-iso-box">
-              <div class="iso-box html photoshop wordpress mobile col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img1.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img1.jpg" alt="portfolio img"></a></div>
-              <div class="iso-box html wordpress mobile col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img2.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img2.jpg" alt="portfolio img"></a></div>
-              <div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img3.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img3.jpg" alt="portfolio img"></a></div>
-              <div class="iso-box html mobile col-md-6 col-sm-6 col-xs-12"><a href="images/portfolio-img4.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img4.jpg" alt="portfolio img"></a></div>
-              <div class="iso-box wordpress col-md-6 col-sm-6 col-xs-12"><a href="images/portfolio-img5.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img5.jpg" alt="portfolio img"></a></div>
-              <div class="iso-box html photoshop col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img6.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img6.jpg" alt="portfolio img"></a></div>
-              <div class="iso-box photoshop col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img7.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img7.jpg" alt="portfolio img"></a></div>
-              <div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img8.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img8.jpg" alt="portfolio img"></a></div>
+        </div>
+      </div>
+    </div>
+    <!-- home section -->
+    <div id="home">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-offset-6 col-md-6 col-sm-offset-6 col-sm-6">
+            <h2>welcome to</h2>
+            <h1>Superfresh <strong>Design Studio</strong></h1>
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat.
+            </p>
+            <a href="#service" class="btn btn-default smoothScroll"
+              >GET STARTED</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- service section -->
+    <div id="service">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-sm-12">
+            <h2>Here's How we work.</h2>
+          </div>
+          <div class="col-md-4 col-sm-4">
+            <i class="fa fa-paper-plane"></i>
+            <h3>Research.</h3>
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat.
+            </p>
+          </div>
+          <div class="col-md-4 col-sm-4">
+            <i class="fa fa-bell-o"></i>
+            <h3>Design.</h3>
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat.
+            </p>
+          </div>
+          <div class="col-md-4 col-sm-4">
+            <i class="fa fa-coffee"></i>
+            <h3>Coding.</h3>
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- divider section -->
+    <div class="container">
+      <div class="row">
+        <div class="col-md-1 col-sm-1"></div>
+        <div class="col-md-10 col-sm-10">
+          <hr />
+        </div>
+        <div class="col-md-1 col-sm-1"></div>
+      </div>
+    </div>
+    <!-- about section -->
+    <div id="about">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-sm-12">
+            <h2>The Superfresh Story</h2>
+          </div>
+          <div class="col-md-6 col-sm-6">
+            <img
+              src="images/about-img.jpg"
+              class="img-responsive"
+              alt="about img"
+            />
+          </div>
+          <div class="col-md-6 col-sm-6">
+            <h3>ABOUT US</h3>
+            <h4>talented Designers &amp; Developers.</h4>
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing
+              elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore
+              magna aliquam erat volutpat.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- divider section -->
+    <div class="container">
+      <div class="row">
+        <div class="col-md-1 col-sm-1"></div>
+        <div class="col-md-10 col-sm-10">
+          <hr />
+        </div>
+        <div class="col-md-1 col-sm-1"></div>
+      </div>
+    </div>
+    <!-- team section -->
+    <div id="team">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-sm-12">
+            <h2>Behind the Design Studio.</h2>
+          </div>
+          <div class="col-md-3 col-sm-3">
+            <img src="images/team1.jpg" class="img-responsive" alt="team img" />
+            <h3>James Smith</h3>
+            <h4>Creative Director</h4>
+          </div>
+          <div class="col-md-3 col-sm-3">
+            <img src="images/team2.jpg" class="img-responsive" alt="team img" />
+            <h3>Jonny Doe</h3>
+            <h4>CEO / CO-Founder</h4>
+          </div>
+          <div class="col-md-3 col-sm-3">
+            <img src="images/team3.jpg" class="img-responsive" alt="team img" />
+            <h3>Jonathan Ive</h3>
+            <h4>Chief Design Office</h4>
+          </div>
+          <div class="col-md-3 col-sm-3">
+            <img src="images/team4.jpg" class="img-responsive" alt="team img" />
+            <h3>Mary Lane</h3>
+            <h4>UX Designer</h4>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- divider section -->
+    <div class="container">
+      <div class="row">
+        <div class="col-md-1 col-sm-1"></div>
+        <div class="col-md-10 col-sm-10">
+          <hr />
+        </div>
+        <div class="col-md-1 col-sm-1"></div>
+      </div>
+    </div>
+    <!-- portfolio section -->
+    <div id="portfolio">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-sm-12">
+            <div class="title">
+              <h2>Works. Portfolio</h2>
+            </div>
+            <!-- ISO section -->
+            <div class="iso-section">
+              <ul class="filter-wrapper clearfix">
+                <li>
+                  <a href="#" data-filter="*" class="selected opc-main-bg"
+                    >All</a
+                  >
+                </li>
+                <li>
+                  <a href="#" class="opc-main-bg" data-filter=".html">Html</a>
+                </li>
+                <li>
+                  <a href="#" class="opc-main-bg" data-filter=".photoshop"
+                    >Photoshop</a
+                  >
+                </li>
+                <li>
+                  <a href="#" class="opc-main-bg" data-filter=".wordpress"
+                    >Wordpress</a
+                  >
+                </li>
+                <li>
+                  <a href="#" class="opc-main-bg" data-filter=".mobile"
+                    >Mobile</a
+                  >
+                </li>
+              </ul>
+              <div class="iso-box-section">
+                <div class="iso-box-wrapper col4-iso-box">
+                  <div
+                    class="iso-box html photoshop wordpress mobile col-md-4 col-sm-4 col-xs-12"
+                  >
+                    <a
+                      href="images/portfolio-img1.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img1.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div
+                    class="iso-box html wordpress mobile col-md-4 col-sm-4 col-xs-12"
+                  >
+                    <a
+                      href="images/portfolio-img2.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img2.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12">
+                    <a
+                      href="images/portfolio-img3.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img3.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div class="iso-box html mobile col-md-6 col-sm-6 col-xs-12">
+                    <a
+                      href="images/portfolio-img4.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img4.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div class="iso-box wordpress col-md-6 col-sm-6 col-xs-12">
+                    <a
+                      href="images/portfolio-img5.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img5.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div
+                    class="iso-box html photoshop col-md-4 col-sm-4 col-xs-12"
+                  >
+                    <a
+                      href="images/portfolio-img6.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img6.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div class="iso-box photoshop col-md-4 col-sm-4 col-xs-12">
+                    <a
+                      href="images/portfolio-img7.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img7.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12">
+                    <a
+                      href="images/portfolio-img8.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img8.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</div>
-<!-- divider section -->
-<div class="container">
-  <div class="row">
-    <div class="col-md-1 col-sm-1"></div>
-    <div class="col-md-10 col-sm-10">
-      <hr>
-    </div>
-    <div class="col-md-1 col-sm-1"></div>
-  </div>
-</div>
-<!-- pricing section -->
-<div id="pricing">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12 col-sm-12">
-        <h2>Pricing tables</h2>
-      </div>
-      <div class="col-md-4 col-sm-4">
-        <div class="plan">
-          <div class="plan-title">
-            <h3>Basic Plan</h3>
-            <small>$ 10 monthly</small></div>
-          <ul>
-            <li>1 GB SPACE</li>
-            <li>20 GB BANDWIDTH</li>
-            <li>20 MORE THEMES</li>
-            <li>LIFETIME SUPPORT</li>
-          </ul>
-          <button class="btn btn-warning">Sign Up</button>
-        </div>
-      </div>
-      <div class="col-md-4 col-sm-4">
-        <div class="plan">
-          <div class="plan-title">
-            <h3>Business Plan</h3>
-            <small>$ 10 monthly</small></div>
-          <ul>
-            <li>1 GB SPACE</li>
-            <li>20 GB BANDWIDTH</li>
-            <li>20 MORE THEMES</li>
-            <li>LIFETIME SUPPORT</li>
-          </ul>
-          <button class="btn btn-warning">Sign Up</button>
-        </div>
-      </div>
-      <div class="col-md-4 col-sm-4">
-        <div class="plan">
-          <div class="plan-title">
-            <h3>Student Plan</h3>
-            <small>$ 10 monthly</small></div>
-          <ul>
-            <li>1 GB SPACE</li>
-            <li>20 GB BANDWIDTH</li>
-            <li>20 MORE THEMES</li>
-            <li>LIFETIME SUPPORT</li>
-          </ul>
-          <button class="btn btn-warning">Sign Up</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- divider section -->
-<div class="container">
-  <div class="row">
-    <div class="col-md-1 col-sm-1"></div>
-    <div class="col-md-10 col-sm-10">
-      <hr>
-    </div>
-    <div class="col-md-1 col-sm-1"></div>
-  </div>
-</div>
-<!-- contact section -->
-<div id="contact">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12 col-sm-12">
-        <h2>Tell Us About You.</h2>
-      </div>
-      <form action="#" method="post">
+    <!-- divider section -->
+    <div class="container">
+      <div class="row">
         <div class="col-md-1 col-sm-1"></div>
         <div class="col-md-10 col-sm-10">
-          <div class="col-md-6 col-sm-6">
-            <input type="text" placeholder="Name" class="form-control">
-          </div>
-          <div class="col-md-6 col-sm-6">
-            <input type="email" placeholder="Email" class="form-control">
-          </div>
-          <div class="col-md-12 col-sm-12">
-            <textarea placeholder="Message" class="form-control" rows="5"></textarea>
-          </div>
-          <div class="col-md-12 col-sm-12">
-            <input type="text" placeholder="Subject" class="form-control">
-          </div>
-          <div class="col-md-8 col-sm-8">
-            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
-          </div>
-          <div class="col-md-4 col-sm-4">
-            <input type="submit" value="SEND MESSAGE" class="form-control">
-          </div>
+          <hr />
         </div>
         <div class="col-md-1 col-sm-1"></div>
-      </form>
-    </div>
-  </div>
-</div>
-<!-- divider section -->
-<div class="container">
-  <div class="row">
-    <div class="col-md-1 col-sm-1"></div>
-    <div class="col-md-10 col-sm-10">
-      <hr>
-    </div>
-    <div class="col-md-1 col-sm-1"></div>
-  </div>
-</div>
-<!-- footer section -->
-<footer>
-  <div class="container">
-    <div class="row">
-      <div class="col-md-6 col-sm-6">
-        <h2>Reach Office.</h2>
-        <p>001 Lane Street, California, CA</p>
-        <p>Email: <span>Hello[at]superfresh[dot]com</span></p>
-        <p>Phone: <span>0024 203423 / 20342 2342</span></p>
-      </div>
-      <div class="col-md-6 col-sm-6">
-        <h2>Social Us.</h2>
-        <ul class="social-icons">
-          <li><a href="#" class="fa fa-facebook"></a></li>
-          <li><a href="#" class="fa fa-twitter"></a></li>
-          <li><a href="#" class="fa fa-dribbble"></a></li>
-        </ul>
       </div>
     </div>
-  </div>
-</footer>
-<!-- divider section -->
-<div class="container">
-  <div class="row">
-    <div class="col-md-1 col-sm-1"></div>
-    <div class="col-md-10 col-sm-10">
-      <hr>
-    </div>
-    <div class="col-md-1 col-sm-1"></div>
-  </div>
-</div>
-<!-- copyright section -->
-<div class="copyright">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12 col-sm-12">
-        <p>&copy; Superfresh 2084. All Rights Reserved | Design: templatemo</p>
+    <!-- pricing section -->
+    <div id="pricing">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-sm-12">
+            <h2>Pricing tables</h2>
+          </div>
+          <div class="col-md-4 col-sm-4">
+            <div class="plan">
+              <div class="plan-title">
+                <h3>Basic Plan</h3>
+                <small>$ 10 monthly</small>
+              </div>
+              <ul>
+                <li>1 GB SPACE</li>
+                <li>20 GB BANDWIDTH</li>
+                <li>20 MORE THEMES</li>
+                <li>LIFETIME SUPPORT</li>
+              </ul>
+              <button class="btn btn-warning">Sign Up</button>
+            </div>
+          </div>
+          <div class="col-md-4 col-sm-4">
+            <div class="plan">
+              <div class="plan-title">
+                <h3>Business Plan</h3>
+                <small>$ 10 monthly</small>
+              </div>
+              <ul>
+                <li>1 GB SPACE</li>
+                <li>20 GB BANDWIDTH</li>
+                <li>20 MORE THEMES</li>
+                <li>LIFETIME SUPPORT</li>
+              </ul>
+              <button class="btn btn-warning">Sign Up</button>
+            </div>
+          </div>
+          <div class="col-md-4 col-sm-4">
+            <div class="plan">
+              <div class="plan-title">
+                <h3>Student Plan</h3>
+                <small>$ 10 monthly</small>
+              </div>
+              <ul>
+                <li>1 GB SPACE</li>
+                <li>20 GB BANDWIDTH</li>
+                <li>20 MORE THEMES</li>
+                <li>LIFETIME SUPPORT</li>
+              </ul>
+              <button class="btn btn-warning">Sign Up</button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-</div>
-<!-- scrolltop section --> 
-<a href="#top" class="go-top"><i class="fa fa-angle-up"></i></a> 
-<!-- javascript js --> 
-<script src="js/jquery.js"></script> 
-<script src="js/bootstrap.min.js"></script> 
-<script src="js/nivo-lightbox.min.js"></script> 
-<script src="js/smoothscroll.js"></script> 
-<script src="js/jquery.nav.js"></script> 
-<script src="js/isotope.js"></script> 
-<script src="js/imagesloaded.min.js"></script> 
-<script src="js/custom.js"></script>
-</body>
-</html>
\ No newline at end of file
+    <!-- divider section -->
+    <div class="container">
+      <div class="row">
+        <div class="col-md-1 col-sm-1"></div>
+        <div class="col-md-10 col-sm-10">
+          <hr />
+        </div>
+        <div class="col-md-1 col-sm-1"></div>
+      </div>
+    </div>
+    <!-- contact section -->
+    <div id="contact">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-sm-12">
+            <h2>Tell Us About You.</h2>
+          </div>
+          <form action="#" method="post">
+            <div class="col-md-1 col-sm-1"></div>
+            <div class="col-md-10 col-sm-10">
+              <div class="col-md-6 col-sm-6">
+                <input type="text" placeholder="Name" class="form-control" />
+              </div>
+              <div class="col-md-6 col-sm-6">
+                <input type="email" placeholder="Email" class="form-control" />
+              </div>
+              <div class="col-md-12 col-sm-12">
+                <textarea
+                  id="message"
+                  placeholder="Message"
+                  class="form-control"
+                  rows="5"
+                ></textarea>
+              </div>
+              <div class="col-md-12 col-sm-12">
+                <input type="text" placeholder="Subject" class="form-control" />
+              </div>
+              <div class="col-md-8 col-sm-8">
+                <p>
+                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
+                  diam nonummy
+                </p>
+              </div>
+              <div class="col-md-4 col-sm-4">
+                <input
+                  type="submit"
+                  value="SEND MESSAGE"
+                  class="form-control"
+                />
+              </div>
+            </div>
+            <div class="col-md-1 col-sm-1"></div>
+          </form>
+        </div>
+      </div>
+    </div>
+    <!-- divider section -->
+    <div class="container">
+      <div class="row">
+        <div class="col-md-1 col-sm-1"></div>
+        <div class="col-md-10 col-sm-10">
+          <hr />
+        </div>
+        <div class="col-md-1 col-sm-1"></div>
+      </div>
+    </div>
+    <!-- footer section -->
+    <footer>
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6 col-sm-6">
+            <h2>Reach Office.</h2>
+            <p>001 Lane Street, California, CA</p>
+            <p>Email: <span>Hello[at]superfresh[dot]com</span></p>
+            <p>Phone: <span>0024 203423 / 20342 2342</span></p>
+          </div>
+          <div class="col-md-6 col-sm-6">
+            <h2>Social Us.</h2>
+            <ul class="social-icons">
+              <li><a href="#" class="fa fa-facebook"></a></li>
+              <li><a href="#" class="fa fa-twitter"></a></li>
+              <li><a href="#" class="fa fa-dribbble"></a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </footer>
+    <!-- divider section -->
+    <div class="container">
+      <div class="row">
+        <div class="col-md-1 col-sm-1"></div>
+        <div class="col-md-10 col-sm-10">
+          <hr />
+        </div>
+        <div class="col-md-1 col-sm-1"></div>
+      </div>
+    </div>
+    <!-- copyright section -->
+    <div class="copyright">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12 col-sm-12">
+            <p>
+              &copy; Superfresh 2084. All Rights Reserved | Design: templatemo
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- scrolltop section -->
+    <a href="#top" class="go-top"><i class="fa fa-angle-up"></i></a>
+    <!-- javascript js -->
+    <script src="js/jquery.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/nivo-lightbox.min.js"></script>
+    <script src="js/smoothscroll.js"></script>
+    <script src="js/jquery.nav.js"></script>
+    <script src="js/isotope.js"></script>
+    <script src="js/imagesloaded.min.js"></script>
+    <script src="js/custom.js"></script>
+  </body>
+</html>
diff --git a/superfresh/js/destruct.js b/superfresh/js/destruct.js
index c927683..7d887cc 100644
--- a/superfresh/js/destruct.js
+++ b/superfresh/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);
diff --git a/wildflat/index.html b/wildflat/index.html
index 69eb36f..b15712d 100644
--- a/wildflat/index.html
+++ b/wildflat/index.html
@@ -469,9 +469,9 @@ License URL: http://creativecommons.org/licenses/by/3.0/
 						</div>
 						<form>
 							<div class="form-left">
-								<input type="text" placeholder="Name" required />
-								<input type="text" placeholder="Email" required />
-								<input type="text" placeholder="Phone" required />
+								<input type="text" id="message" placeholder="Name" required />
+								<input type="text" id="message" placeholder="Email" required />
+								<input type="text" id="message" placeholder="Phone" required />
 							</div>
 							<div class="form-right">
 								<textarea rows="2" cols="70" onfocus="if(this.value == 'Comment') this.value='';" onblur="if(this.value == '') this.value='Comment';" >Comment</textarea>
diff --git a/wildflat/js/destruct.js b/wildflat/js/destruct.js
index c927683..7d887cc 100644
--- a/wildflat/js/destruct.js
+++ b/wildflat/js/destruct.js
@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
-// Define the CSS for the melting animation
-var style = document.createElement('style');
+//-------------------------------------------// Define the CSS for the melting animation
+var style = document.createElement("style");
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
-  elements.forEach(function(element) {
-    element.classList.add('melting');
+  var elements = document.querySelectorAll(
+    textElementTypes[currentElementType]
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
-document.addEventListener('click', meltText);
+// Add an event listener to the entire document
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);