Add files via upload

js/animated.headline.js

@@ -0,0 +1,154 @@
+jQuery(document).ready(function($){
+	//set animation timing
+	var animationDelay = 2500,
+		//loading bar effect
+		barAnimationDelay = 3800,
+		barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
+		//letters effect
+		lettersDelay = 50,
+		//type effect
+		typeLettersDelay = 150,
+		selectionDuration = 500,
+		typeAnimationDelay = selectionDuration + 800,
+		//clip effect 
+		revealDuration = 600,
+		revealAnimationDelay = 1500;
+
+	initHeadline();
+
+
+	function initHeadline() {
+		//insert <i> element for each letter of a changing word
+		singleLetters($('.cd-headline.letters').find('b'));
+		//initialise headline animation
+		animateHeadline($('.cd-headline'));
+	}
+
+	function singleLetters($words) {
+		$words.each(function(){
+			var word = $(this),
+				letters = word.text().split(''),
+				selected = word.hasClass('is-visible');
+			for (i in letters) {
+				if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
+				letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
+			}
+		    var newLetters = letters.join('');
+		    word.html(newLetters).css('opacity', 1);
+		});
+	}
+
+	function animateHeadline($headlines) {
+		var duration = animationDelay;
+		$headlines.each(function(){
+			var headline = $(this);
+
+			if(headline.hasClass('loading-bar')) {
+				duration = barAnimationDelay;
+				setTimeout(function(){ headline.find('.cd-words-wrapper').addClass('is-loading') }, barWaiting);
+			} else if (headline.hasClass('clip')){
+				var spanWrapper = headline.find('.cd-words-wrapper'),
+					newWidth = spanWrapper.width() + 10
+				spanWrapper.css('width', newWidth);
+			} else if (!headline.hasClass('type') ) {
+				//assign to .cd-words-wrapper the width of its longest word
+				var words = headline.find('.cd-words-wrapper b'),
+					width = 0;
+				words.each(function(){
+					var wordWidth = $(this).width();
+				    if (wordWidth > width) width = wordWidth;
+				});
+				headline.find('.cd-words-wrapper').css('width', width);
+			};
+
+			//trigger animation
+			setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
+		});
+	}
+
+	function hideWord($word) {
+		var nextWord = takeNext($word);
+
+		if($word.parents('.cd-headline').hasClass('type')) {
+			var parentSpan = $word.parent('.cd-words-wrapper');
+			parentSpan.addClass('selected').removeClass('waiting');	
+			setTimeout(function(){ 
+				parentSpan.removeClass('selected'); 
+				$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
+			}, selectionDuration);
+			setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);
+
+		} else if($word.parents('.cd-headline').hasClass('letters')) {
+			var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
+			hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
+			showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);
+
+		}  else if($word.parents('.cd-headline').hasClass('clip')) {
+			$word.parents('.cd-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
+				switchWord($word, nextWord);
+				showWord(nextWord);
+			});
+
+		} else if ($word.parents('.cd-headline').hasClass('loading-bar')){
+			$word.parents('.cd-words-wrapper').removeClass('is-loading');
+			switchWord($word, nextWord);
+			setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
+			setTimeout(function(){ $word.parents('.cd-words-wrapper').addClass('is-loading') }, barWaiting);
+
+		} else {
+			switchWord($word, nextWord);
+			setTimeout(function(){ hideWord(nextWord) }, animationDelay);
+		}
+	}
+
+	function showWord($word, $duration) {
+		if($word.parents('.cd-headline').hasClass('type')) {
+			showLetter($word.find('i').eq(0), $word, false, $duration);
+			$word.addClass('is-visible').removeClass('is-hidden');
+
+		}  else if($word.parents('.cd-headline').hasClass('clip')) {
+			$word.parents('.cd-words-wrapper').animate({ 'width' : $word.width() + 10 }, revealDuration, function(){ 
+				setTimeout(function(){ hideWord($word) }, revealAnimationDelay); 
+			});
+		}
+	}
+
+	function hideLetter($letter, $word, $bool, $duration) {
+		$letter.removeClass('in').addClass('out');
+
+		if(!$letter.is(':last-child')) {
+		 	setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);  
+		} else if($bool) { 
+		 	setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
+		}
+
+		if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
+			var nextWord = takeNext($word);
+			switchWord($word, nextWord);
+		} 
+	}
+
+	function showLetter($letter, $word, $bool, $duration) {
+		$letter.addClass('in').removeClass('out');
+
+		if(!$letter.is(':last-child')) { 
+			setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); 
+		} else { 
+			if($word.parents('.cd-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.cd-words-wrapper').addClass('waiting'); }, 200);}
+			if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
+		}
+	}
+
+	function takeNext($word) {
+		return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
+	}
+
+	function takePrev($word) {
+		return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
+	}
+
+	function switchWord($oldWord, $newWord) {
+		$oldWord.removeClass('is-visible').addClass('is-hidden');
+		$newWord.removeClass('is-hidden').addClass('is-visible');
+	}
+});

js/script.js

@@ -3,41 +3,97 @@
 var navLinks = document.getElementById("nav-links");
 
 function showMenu() {
-    navLinks.style.right = "0";
+  navLinks.style.right = "0";
 }
 function hideMenu() {
-    navLinks.style.right = "-200px";
+  navLinks.style.right = "-200px";
 }
 
 // form popup
 
 function openForm() {
-    document.getElementById("contact-container").style.display = "block";
+  document.getElementById("contact-container").style.display = "block";
 }
 
 function closeForm() {
-    document.getElementById("contact-container").style.display = "none";
+  document.getElementById("contact-container").style.display = "none";
 }
 
 // smtp js code for contact form
 function sendEmail() {
-    Email.send({
-        SecureToken: "2dddff2a-75d7-4896-9984-3a4770ff0c06",
-        To: "dcodeplus.languages@gmail.com",
-        From: "testwithajas@gmail.com",
-        Subject: "Dcodeplus Site Enquiry",
-        Body: "This is the enquiry from " 
-        + "<br>" + document.getElementById("form-name").value 
-        + ", <br>" 
-        + document.getElementById("form-message").value 
-        + "<br> <br>" 
-        + " Contact details: <br> email: " 
-        + document.getElementById("form-mail").value 
-        + "<br> Mobile: " 
-        + document.getElementById("form-mobile").value,
-  }).then((message) => alert(message));
-}
-
-// Host: "smtp.elasticemail.com",
-//     Username: "testwithajas@gmail.com",
-//     Password: "8908BC10D321E49A78D795690267CCD30451",
+  Email.send({
+    SecureToken: "2dddff2a-75d7-4896-9984-3a4770ff0c06",
+    To: "dcodeplus.languages@gmail.com",
+    // To: "ajmalullanam5@gmail.com",
+    // To: "mohamedanaspkm@gmail.com",
+    From: "testwithajas@gmail.com",
+    Subject: "Dcodeplus Site Enquiry",
+    Body:
+      "This is the enquiry from " +
+      "<br>" +
+      document.getElementById("form-name").value +
+      ", <br>" +
+      document.getElementById("form-message").value +
+      "<br> <br>" +
+      " Contact details: <br> email: " +
+      document.getElementById("form-mail").value +
+      "<br> Mobile: " +
+      document.getElementById("form-mobile").value,
+  }).then((message) => {
+    if (message == "OK") {
+      swal("Successfull", "Your message has been sent successfully", "Success"),
+        (document.getElementById("contact-container").style.display = "none");
+    } else {
+      swal("Something wrong", "Your data not received", "error");
+    }
+  });
+}
+
+// back to top button function
+
+let backToTop = document.getElementById("go2top");
+let chatToWA = document.getElementById("chat2wa");
+
+window.onscroll = function () {
+  scrollFunction();
+};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    backToTop.style.display = "block";
+    chatToWA.style.display = "block";
+  } else {
+    backToTop.style.display = "none";
+    chatToWA.style.display = "none";
+  }
+}
+
+// When click on the button, scroll to the top of the document
+function goToTop() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}
+
+// read more button function
+
+let noOfCharac = 250;
+let contents = document.querySelectorAll(".content");
+contents.forEach((content) => {
+  if (content.textContent.length < noOfCharac) {
+    content.nextElementSibling.style.display = "none";
+  } else {
+    let displayText = content.textContent.slice(0, noOfCharac);
+    let moreText = content.textContent.slice(noOfCharac);
+    content.innerHTML = `${displayText}<span class="dots">...</span><span class="hide more">${moreText}</span>`;
+  }
+});
+
+function readMore(btn) {
+  let post = btn.parentElement;
+  post.querySelector(".dots").classList.toggle("hide");
+  post.querySelector(".more").classList.toggle("hide");
+
+  btn.textContent == "Read More"
+    ? (btn.textContent = "Read Less")
+    : (btn.textContent = "Read More");
+}

style/media_700px.css

@@ -2,12 +2,18 @@
   .main-head h1 {
     font-size: 25px;
   }
+
+  .main-head-img img {
+    width: 88%;
+  }
   .nav-links ul li {
     display: block;
+
   }
   .nav-links {
     position: absolute;
-    background: #f44336;
+    background: #fffffff3;
+    box-shadow: #947c7c45 3px 0px 14px -1px;
     height: 100vh;
     width: 200px;
     top: 0;
@@ -17,26 +23,33 @@
     transition: 1s;
   }
   .nav-links ul {
-    padding: 30px;
+    padding: 26px 12px;
   }
   nav .fa {
     display: block;
-    color: #fff;
+    color: #513f3f;
     margin: 10px;
-    font-size: 22px;
     cursor: pointer;
   }
+
+  nav > .fa, nav > div > .fa {
+  display: block;
+}
+
   nav img {
     width: 80px;
   }
 
+  nav .fa-bars{
+    color: #878787;
+    font-size: 20px;
+  } 
+
   .main-head h1 {
-    font-size: 2.5em;
+    font-size: 2.2em;
   }
 
-  .about-para {
-    width: 40px;
-  }
+
   .about-para > h2 {
     font-size: 25px;
     text-align: center;
@@ -48,17 +61,18 @@
     padding: 5px;
   }
   .course-box {
-    padding: 20px;
+
     width: 260px;
 
     margin: 60px 8px 8px 8px;
   }
 
   .course-box img {
-    width: 240px;
+    width: 260px;
   }
 
   .footer-container > div {
     max-width: 100%;
   }
+
 }