diff --git a/Banner_IMG/banner-img-styles.css b/Banner_IMG/banner-img-styles.css new file mode 100644 index 0000000..46c60b4 --- /dev/null +++ b/Banner_IMG/banner-img-styles.css @@ -0,0 +1 @@ +svg#freepik_stories-dictionary:not(.animated) .animable {opacity: 0;}svg#freepik_stories-dictionary.animated #freepik--Floor--inject-2 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) fadeIn;animation-delay: 0s;}svg#freepik_stories-dictionary.animated #freepik--Shadows--inject-2 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lightSpeedRight;animation-delay: 0s;}svg#freepik_stories-dictionary.animated #freepik--Letters--inject-2 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;animation-delay: 0s;}svg#freepik_stories-dictionary.animated #freepik--dictionaries-2--inject-2 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;animation-delay: 0s;}svg#freepik_stories-dictionary.animated #freepik--Character--inject-2 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;}svg#freepik_stories-dictionary.animated #freepik--speech-bubble--inject-2 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;}svg#freepik_stories-dictionary.animated #freepik--dictionary-1--inject-2 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) fadeIn;animation-delay: 0s;}svg#freepik_stories-dictionary.animated #freepik--Meaning--inject-2 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) fadeIn;animation-delay: 0s;}svg#freepik_stories-dictionary.animated #freepik--Button--inject-2 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;} @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes lightSpeedRight { from { transform: translate3d(50%, 0, 0) skewX(-20deg); opacity: 0; } 60% { transform: skewX(10deg); opacity: 1; } 80% { transform: skewX(-2deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes zoomOut { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideDown { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } \ No newline at end of file diff --git a/Banner_IMG/banner-img.gif b/Banner_IMG/banner-img.gif new file mode 100644 index 0000000..c1e3144 Binary files /dev/null and b/Banner_IMG/banner-img.gif differ diff --git a/Banner_IMG/banner-img.html b/Banner_IMG/banner-img.html new file mode 100644 index 0000000..2e1958d --- /dev/null +++ b/Banner_IMG/banner-img.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/Banner_IMG/dictionary-not-css.svg b/Banner_IMG/dictionary-not-css.svg new file mode 100644 index 0000000..2e1958d --- /dev/null +++ b/Banner_IMG/dictionary-not-css.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/img/Logo/icons8-whatsapp-144.png b/img/Logo/icons8-whatsapp-144.png new file mode 100644 index 0000000..98bfcbd Binary files /dev/null and b/img/Logo/icons8-whatsapp-144.png differ diff --git a/img/Logo/icons8-whatsapp.gif b/img/Logo/icons8-whatsapp.gif new file mode 100644 index 0000000..725500d Binary files /dev/null and b/img/Logo/icons8-whatsapp.gif differ diff --git a/img/Nav/home.svg b/img/Nav/home.svg new file mode 100644 index 0000000..f9dd06d --- /dev/null +++ b/img/Nav/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/Philosophy/01Optimism.png b/img/Philosophy/01Optimism.png new file mode 100644 index 0000000..c2d02eb Binary files /dev/null and b/img/Philosophy/01Optimism.png differ diff --git a/img/Philosophy/02Synergy.png b/img/Philosophy/02Synergy.png new file mode 100644 index 0000000..065af03 Binary files /dev/null and b/img/Philosophy/02Synergy.png differ diff --git a/img/Philosophy/02Synergy11.png b/img/Philosophy/02Synergy11.png new file mode 100644 index 0000000..9b629f6 Binary files /dev/null and b/img/Philosophy/02Synergy11.png differ diff --git a/img/Philosophy/03Auditory.png b/img/Philosophy/03Auditory.png new file mode 100644 index 0000000..35aec43 Binary files /dev/null and b/img/Philosophy/03Auditory.png differ diff --git a/img/Philosophy/03Auditory11.png b/img/Philosophy/03Auditory11.png new file mode 100644 index 0000000..de3151e Binary files /dev/null and b/img/Philosophy/03Auditory11.png differ diff --git a/img/Philosophy/04Phrasal.png b/img/Philosophy/04Phrasal.png new file mode 100644 index 0000000..268e7dd Binary files /dev/null and b/img/Philosophy/04Phrasal.png differ diff --git a/img/Philosophy/05Consistency.png b/img/Philosophy/05Consistency.png new file mode 100644 index 0000000..0afd60c Binary files /dev/null and b/img/Philosophy/05Consistency.png differ diff --git a/img/Philosophy/icons8-crowd-96.png b/img/Philosophy/icons8-crowd-96.png new file mode 100644 index 0000000..8a060e2 Binary files /dev/null and b/img/Philosophy/icons8-crowd-96.png differ diff --git a/img/Screenshot 2023-08-19 202023.png b/img/Screenshot 2023-08-19 202023.png new file mode 100644 index 0000000..9f3ed5c Binary files /dev/null and b/img/Screenshot 2023-08-19 202023.png differ diff --git a/img/WhatsApp Image 2023-07-22 at 18.47.21.jpg b/img/WhatsApp Image 2023-07-22 at 18.47.21.jpg new file mode 100644 index 0000000..97d6996 Binary files /dev/null and b/img/WhatsApp Image 2023-07-22 at 18.47.21.jpg differ diff --git a/img/about-dcodeplus.jpg b/img/about-dcodeplus.jpg new file mode 100644 index 0000000..231912e Binary files /dev/null and b/img/about-dcodeplus.jpg differ diff --git a/img/about-img.jpg b/img/about-img.jpg new file mode 100644 index 0000000..018b7b1 Binary files /dev/null and b/img/about-img.jpg differ diff --git a/img/about-img11.jpg b/img/about-img11.jpg new file mode 100644 index 0000000..4a75066 Binary files /dev/null and b/img/about-img11.jpg differ diff --git a/img/banner-img.gif b/img/banner-img.gif new file mode 100644 index 0000000..c1e3144 Binary files /dev/null and b/img/banner-img.gif differ diff --git a/img/courses/Advanced-Apex.jpg b/img/courses/Advanced-Apex.jpg new file mode 100644 index 0000000..f004fae Binary files /dev/null and b/img/courses/Advanced-Apex.jpg differ diff --git a/img/courses/Arabic-English-Translation.jpg b/img/courses/Arabic-English-Translation.jpg new file mode 100644 index 0000000..5453e5a Binary files /dev/null and b/img/courses/Arabic-English-Translation.jpg differ diff --git a/img/courses/IELTS-TOEFL.jpg b/img/courses/IELTS-TOEFL.jpg new file mode 100644 index 0000000..fd67241 Binary files /dev/null and b/img/courses/IELTS-TOEFL.jpg differ diff --git a/img/courses/Intermediate-Felta.jpg b/img/courses/Intermediate-Felta.jpg new file mode 100644 index 0000000..676d737 Binary files /dev/null and b/img/courses/Intermediate-Felta.jpg differ diff --git a/img/courses/Life-Skill-Coaching.jpg b/img/courses/Life-Skill-Coaching.jpg new file mode 100644 index 0000000..fa918b5 Binary files /dev/null and b/img/courses/Life-Skill-Coaching.jpg differ diff --git a/img/courses/Preparatory-Zelta.jpg b/img/courses/Preparatory-Zelta.jpg new file mode 100644 index 0000000..146b551 Binary files /dev/null and b/img/courses/Preparatory-Zelta.jpg differ diff --git a/index.html b/index.html index ebb2caf..d57f23c 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,11 @@ - Decode Plus | Language school + Dcodeplus |Institute of Languages + + - + @@ -18,30 +20,52 @@ -
+
+
+ +
-

Language School

+

Institute of Languages

- YOUR LANGUAGE
- HELPER + YOUR LANGUAGE
+ FACILITATOR

- about us + about us +
+
+
@@ -51,9 +75,9 @@

ABOUT OUR COMPANY

-

Welcome To DcodePlus

+

Welcome To Dcodeplus

- At Dcode+, we understand the importance of mastering the English + At Dcodeplus, we understand the importance of mastering the English language in today's globalized world. Whether you are looking to improve your communication skills for personal or professional reasons, our experienced trainers are here to help you achieve your @@ -66,55 +90,62 @@

Welcome To DcodePlus

in the English language. We use a combination of interactive learning activities, task-based exercises, and real-life scenarios to make learning English engaging and enjoyable. Join us and become - a part of the Dcode+ family today. Our mission is to help you unlock + a part of the Dcodeplus family today. Our mission is to help you unlock your full potential and achieve success in all aspects of your life through the power of English language proficiency.

- +
-
+
-

PHILOSOPHIES

+

PHILOSOPHY

-
-
- -

Optimism

-

- Our mindset and attitude determine success in language learning. -

-
-
- -

Synergy

-

- Total Physical Response (TPR) and Nuro Linguistic Program (NLP) can - be used as effective tools for language acquisition. -

+
+
+

"Master the Art of Language Learning with Seven Pillars of Dcodeplus"

-
- -

Auditory

-

Learn with your ears and not with your eyes.

-
-
- -

Phrasal

-

Learn phrases not words.

-
-
- -

Consistency

-

Practice and repetition are the key to spoken mastery.

+ +
+
+ +

Optimism

+

+ Our mindset and attitude determine success in language learning. +

+
+
+ +

Synergy

+

+ Total Physical Response (TPR) and Nuro Linguistic Program (NLP) can + be used as effective tools for language acquisition. +

+
+
+ +

Auditory

+

Learn with your ears and not with your eyes.

+
+
+ +

Phrasal

+

Learn phrases not words.

+
+
+ +

Consistency

+

Practice and repetition are the key to spoken mastery.

+
+
@@ -128,6 +159,7 @@

Consistency

- Dr. Faiz from Yemen

+
@@ -135,10 +167,10 @@

COURSE OFFERED

- +

Preparatory (Zelta)

-

- The preparatory level Zelta at Dcode+ aims to provide a strong +

+ The preparatory level Zelta at Dcodeplus aims to provide a strong foundation in English language skills for students who are new to the language. This course is specifically designed to cater to beginners who have little or no prior experience in English. The @@ -148,26 +180,27 @@

Preparatory (Zelta)

will learn how to read simple texts, write basic sentences, understand spoken English and communicate effectively in day-to-day situations. The course curriculum has been carefully crafted by - experienced faculty members at Dcode+ to ensure that students + experienced faculty members at Dcodeplus to ensure that students progress at a comfortable pace and gain confidence in their ability to use the language. Personal attention is given to each student to ensure that they are able to grasp the concepts taught in class. At - Dcode+, we believe that learning a new language should be an + Dcodeplus, we believe that learning a new language should be an affordable and accessible experience for everyone. Our preparatory level Zelta course is reasonably priced to ensure that students from all walks of life can avail of high-quality English language - training. Join Dcode+ today and take the first step towards + training. Join Dcodeplus today and take the first step towards improving your English language skills!

+
- +

Intermediate (Felta)

-

- Felta at Dcode+ is an intermediate-level course designed for +

+ Felta at Dcodeplus is an intermediate-level course designed for individuals who have already acquired basic knowledge of English and are looking to advance their skills. This course is suitable for - those who have completed the Dcode+ preparatory level or have + those who have completed the Dcodeplus preparatory level or have minimum proficiency in English. The Felta course focuses on enhancing reading, writing, listening, and speaking skills to a higher level of proficiency. It covers advanced grammar, vocabulary, @@ -186,12 +219,13 @@

Intermediate (Felta)

English language skills to the next level and succeed in their personal and professional lives.

+
- -

Advanced (Apex)

-

- Dcode+ Apex is designed for students who want to take their English + +

Advanced (Apexa)

+

+ Dcodeplus Apex is designed for students who want to take their English proficiency to the next level. This course is ideal for those who have already mastered the basics of the English language and are looking to refine their speaking style, improve their vocabulary, @@ -200,23 +234,24 @@

Advanced (Apex)

refined accent. Our experienced instructors will guide you through a range of speaking exercises, including role-playing, public speaking, and debates, to help you build your speaking confidence. - In addition to speaking skills, Dcode+ Apex also focuses on + In addition to speaking skills, Dcodeplus Apex also focuses on enhancing your listening, reading, and writing skills. You will work on developing your vocabulary and grammar, and learn to use advanced - language structures in your writing and speaking. At Dcode+, we + language structures in your writing and speaking. At Dcodeplus, we understand that each student has their own unique learning needs. That's why our instructors work closely with each student to develop a personalized learning plan that matches their learning style and goals. Our aim is to help you achieve high competency and confidence - in the English language. Enroll in Dcode+ Apex today and take the + in the English language. Enroll in Dcodeplus Apex today and take the next step in your English language journey!

+
- -

Decodeplus IELTS and TOEFL

-

- Decodeplus School of Languages offers comprehensive programs for + +

Dcodeplus IELTS and TOEFL

+

+ Dcodeplus School of Languages offers comprehensive programs for both the IELTS (International English Language Testing System) and TOEFL (Test of English as a Foreign Language) examinations. These programs are designed to equip individuals with the necessary skills @@ -226,15 +261,16 @@

Decodeplus IELTS and TOEFL

English. The curriculum focuses on enhancing vocabulary, grammar, and pronunciation, while also providing guidance on test-taking techniques specific to each exam. Whether preparing for academic - pursuits or professional aspirations, Decodeplus School of Languages + pursuits or professional aspirations, Dcodeplus School of Languages ensures students are well-prepared to achieve their desired scores and succeed in English-speaking environments.

+
- +

Dcodeplus Arabic English Translation

-

+

Dcodeplus Arabic English Translation course is a specialized program designed for individuals seeking certification and employment opportunities in Gulf or multinational companies. This comprehensive @@ -250,11 +286,12 @@

Dcodeplus Arabic English Translation

confidence needed to pursue successful careers as professional translators in the Gulf or multinational companies.

+
- +

Dcodeplus Life Skill Coaching

-

+

Dcodeplus Life Skill Coaching offers a transformative program designed to empower individuals with essential skills for personal and professional success. Through personalized coaching sessions, @@ -270,9 +307,11 @@

Dcodeplus Life Skill Coaching

personally and professionally, by honing their abilities and fostering personal growth.

+
+
+
+ - +
- + + +
+
+
+
+
+
+
Top
 +
+
+ + + + diff --git a/js/animated.headline.js b/js/animated.headline.js new file mode 100644 index 0000000..fc72e22 --- /dev/null +++ b/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 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] = '' + letters[i] + ''; + letters[i] = (selected) ? '' + letters[i] + '': '' + letters[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'); + } +}); \ No newline at end of file diff --git a/js/script.js b/js/script.js index 172e58e..fff66e8 100644 --- a/js/script.js +++ b/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 " - + "
" + document.getElementById("form-name").value - + ",
" - + document.getElementById("form-message").value - + "

" - + " Contact details:
email: " - + document.getElementById("form-mail").value - + "
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 " + + "
" + + document.getElementById("form-name").value + + ",
" + + document.getElementById("form-message").value + + "

" + + " Contact details:
email: " + + document.getElementById("form-mail").value + + "
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}...${moreText}`; + } +}); + +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"); +} diff --git a/style/header-animation.css b/style/header-animation.css new file mode 100644 index 0000000..e69de29 diff --git a/style/media_700px.css b/style/media_700px.css index c9f845c..5c1c377 100644 --- a/style/media_700px.css +++ b/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%; } + } diff --git a/style/style.css b/style/style.css index 74f5bb2..6e1dcea 100644 --- a/style/style.css +++ b/style/style.css @@ -3,11 +3,12 @@ padding: 0; font-family: "Montserrat", "Arial", sans-serif; scroll-behavior: smooth; - transition: 1s; + /* transition: 0.5s; */ } *::selection { - color: #000; + background-color: #727272; + color: #fff; } html, @@ -16,33 +17,39 @@ body { overflow-x: hidden; } -/* -- banner -- */ -.header { - min-height: 100vh; - width: 100%; - background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), - url(../img/BG/banner_bg.jpg); - background-position: center; - background-size: cover; - position: relative; +a { + text-decoration: none; +} + +a:hover{ + cursor: pointer; +} + +img { + pointer-events: none; } /* ******************** */ /* nav starts from here */ nav { + background-color: #ffffff; + padding: 0 4%; + font-family: "Montserrat", "Arial", sans-serif ; display: flex; - padding: 2% 6%; justify-content: space-between; align-items: center; + border-bottom: #e9e8e7 1px solid; + position: relative; } nav img { - width: 120px; + width: 80px; } .nav-links { flex: 1; text-align: right; + } .nav-links ul li { @@ -51,11 +58,18 @@ nav img { padding: 8px 12px; position: relative; } +.nav-links .fa-home::before, +.nav-links .fa-graduation-cap::before, +.nav-links .fa-file-powerpoint-o::before, +.nav-links .fa-info-circle::before, +.nav-links .fa-phone-square::before { + content: none; +} -.nav-links ul li a { - color: #fff; +.nav-links > ul > li > a { + color: #574f4f; text-decoration: none; - font-size: 16px; + font-size: 14px; } .nav-links ul li::after { @@ -71,27 +85,52 @@ nav img { .nav-links ul li:hover::after { width: 100%; } - +nav > .fa, +nav > div > .fa { + display: none; +} /* nav ends here */ /* main heading in Home page starts here */ + +.main-head-section { + display: flex; + flex-direction: row; + justify-content: space-around; + align-content: center; + flex-wrap: wrap; + padding-top: 5%; + margin: 18px 40px; +} .main-head { - position: absolute; - top: 42%; - left: 6%; + display: flex; + align-content: center; + flex-wrap: wrap; + flex-direction: column; + justify-content: center; + margin: 0px 0px 12px 0px; +} + +.main-head-img > img { + width: 420px; } + + .main-head h1 { font-family: "ShopifySans", Helvetica, Arial, sans-serif; - font-size: 4.5em; + font-size: 3.8em; font-weight: 900; - color: #e0caca; + color: #93529e; +} +.main-head span{ + color: #6f3e78; } - .main-head h3 { - color: #e0caca; + color: #adacad; font-size: 20px; font-weight: 100; + text-shadow: 0px 0px 3px #0303033b; } .main-head p { @@ -101,24 +140,22 @@ nav img { .main-about-btn { display: inline-block; text-decoration: none; - border-radius: 5px; - color: #fff; - border: 1px solid #fff; - padding: 10px 26px; - font-size: 15px; - margin-top: 25px; + border-radius: 10px; + color: #2f6ea8; + padding: 5px 5px; + font-size: 13px; + margin-top: 17px; + width: 86px; + text-align: center; + border: #93529ec4 1px solid; } .main-about-btn:hover { - border: 1px solid #f44336; - background: #16647f; + color: #fff; + background: #6f3e78; transition: 1s; } -nav .fa { - display: none; -} - /* -- sub head -- */ .sub-head { @@ -145,54 +182,73 @@ nav .fa { } .about-us-content { - padding: 40px; - display: flex; + align-content: center; flex-wrap: wrap; - justify-content: space-around; + justify-content: space-evenly; + align-items: center; + padding: 32px 46px 0 46px; } .about-para > h2 { - margin-top: 40px; + margin-bottom: 30px; font-size: 30px; font-weight: 600; color: rgb(19, 25, 38); - padding-bottom: 15px; + } .about-para { - padding-bottom: 20px; + padding: 28px; + flex: 1 1 400px; font-size: small; - min-width: 300px; - max-width: 560px; - width: 38%; line-height: 24px; } -.about-para > p{ - text-align: justify; - text-justify: inter-word; +.about-para > p { + text-align: justify; } -.about-us-img { - min-width: 500px; - max-width: 560px; - width: 50vw; - overflow: hidden; + +.about-us-img{ + flex: 1 1 318px; + padding: 28px; +} +.about-us-img img { + width: 100%; + border-radius: 2%; } /* -- philosophy -- */ -.philosophy-container { + +.philosophy-ctn{ + background-color: #f3f3f3; +} + +.philosophy-quote{ + color: #101925; + padding: 30px 0 30px 0; + text-align: center; +} + +.philosophy-quote p{ + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + /* font-family: "Montserrat", "Arial", sans-serif; */ + /* font-family: cursive; */ + font-size: 1.1em; +} + +.philosophy-items-container { display: flex; justify-content: center; flex-wrap: wrap; - background-color: #f3f3f3; + overflow: visible; } .philosophy-box { - flex-basis: 100px; + flex-basis: 160px; text-align: center; - padding: 20px; + padding: 20px 40px; } .philosophy-box p { @@ -203,19 +259,19 @@ nav .fa { } .philosophy-box img { - width: 10em; - height: 10em; + width: 6em; + height: 6em; } /* reviewed and commented */ .commented-container { - width: 60%; height: 100%; margin: 60px; padding: 40px; background-image: linear-gradient(); border-left: 10px solid #253439; + /* border-right: 10px solid #253439; */ border-radius: 10px; box-shadow: 1px 4px 10px rgb(222, 226, 228); } @@ -224,7 +280,7 @@ nav .fa { font-family: Brush Script MT, Brush Script Std, cursive; font-size: 1.5em; padding: 40px 40px 0 40px; - color: #909596; + color: #717576; } .commented-container p:nth-child(2) { @@ -236,34 +292,62 @@ nav .fa { } /* -- Courses -- */ + .course-container { width: 100vw; display: flex; flex-wrap: wrap; justify-content: center; + padding: 0 0 40px 0; } .course-box { - padding: 2.5vw; - width: 240px; + width: 280px; + height: fit-content; margin: 24px; border-radius: 10px; box-shadow: 1px 4px 10px rgb(222, 226, 228); + transition: 1s; } .course-box img { - width: 240px; + width: 280px; + border-radius: 5px; + padding-bottom: 3px; +} + +.course-box h4{ + padding: 0 1.6vw; + font-family: "Montserrat", "Arial", sans-serif; + } .course-box p { font-family: "Montserrat", "Arial", sans-serif; font-size: small; line-height: 18px; - padding: 16px 10px 0 10px ; + padding: 16px 14px 0 14px; text-align: justify; text-justify: inter-word; } +.course-box button { + margin: 10px; + padding: 0 4px 4px 4px; + border: none; + float: right; +} + +.course-box button{ + cursor: pointer; +} + +/* read more button */ + +.hide { + display: none; +} + /* -- contact form popup -- */ .btn-form-popup { width: max-content; @@ -328,16 +412,90 @@ nav .fa { font-size: 1.4em; } -/* -- footer container -- */ +/* Contact form button */ +.contact-btn{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 2%; +} +.contact-close-btn, .contact-submit-btn{ + color: #2f6ea8; + margin: 5%; + padding: 1.5% 10%; + border: none; + cursor: pointer; + border-radius: 4px; + box-shadow: #00000061 0px 0px 5px -1px; + color: white; + +} + +.contact-close-btn{ + background: linear-gradient(6deg, rgb(247 65 121) 25%, rgb(231 64 139) 73%); +} +.contact-close-btn:hover{ + background: linear-gradient(186deg, rgb(247 65 121) 25%, rgb(231 64 139) 73%); + box-shadow: #00000061 3px 3px 5px -1px; +} +.contact-submit-btn{ + background: linear-gradient(6deg, rgb(229 94 198) 25%, rgb(241 128 224) 73%); +} +.contact-submit-btn:hover{ + background: linear-gradient(1866deg, rgb(229 94 198) 25%, rgb(241 128 224) 73%); + box-shadow: #00000061 3px 3px 5px -1px; +} +/* Back to top button */ +#go2top { + display: none; + position: fixed; + bottom: 42px; + right: 30px; + z-index: 99; + border: none; + outline: none; + background-color: red; + color: white; + cursor: pointer; + padding: 9px; + border-radius: 10px; + font-size: 12px; + font-weight: 600; +} + +#chat2wa { + display: none; + position: fixed; + bottom: 90px; + right: 30px; + z-index: 99; + border: none; + outline: none; + background-color: #b5bc65; + color: white; + cursor: pointer; + padding: 4px 10px; + border-radius: 10px; +} + +#chat2wa img { + width: 20px; +} +#go2top:hover { + background-color: #555; +} + +/* -- footer container -- */ +#footer{ + background-color: #101925; +} .footer-container { width: 100%; height: 100%; - background-color: #253439; - color: #7c7b7c; font-size: small; line-height: 1.2em; - padding: 4em; display: flex; justify-content: space-between; @@ -349,8 +507,12 @@ nav .fa { margin: 10px 140px 10px 10px; } -.footer-container > div > p { +.footer-container > div p { max-width: 400px; + color: #b1adb1; +} +.footer-container > div p a{ + color: #b1adb1; } .footer-container > div > img { @@ -360,19 +522,19 @@ nav .fa { height: 6vw; } -.footer-container > div li { +.footer-container > div a li { + color: #b1adb1; cursor: pointer; width: 100%; list-style: none; padding: 0.6em; } -.footer-container > div li:hover{ +.footer-container > div li:hover { background-color: #41484b; border-bottom: 1px solid #ffffff5b; padding-left: 12px; font-size: small; - transition: .3s; - + transition: 0.3s; } .footer-container h5 { @@ -381,6 +543,14 @@ nav .fa { padding: 0.6em 0; } +.copy-right{ + font-size: small; + color: #b1adb1; + padding-bottom: 20px; + text-align: center; +} + + /* Social media link in footer */ .social .fa {