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/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/courses/Advanced-Apex.jpg b/img/courses/Advanced-Apex.jpg new file mode 100644 index 0000000..6106d03 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..3ae6249 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..67f6303 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..fac8846 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..0b0a831 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..4e4fda1 Binary files /dev/null and b/img/courses/Preparatory-Zelta.jpg differ diff --git a/index.html b/index.html index ebb2caf..6ceba98 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,10 @@ Decode Plus | Language school + + - + @@ -18,7 +20,7 @@ -
+
+
+ +

Language School

- YOUR LANGUAGE
+ YOUR LANGUAGE
HELPER

about us
+
+ +
@@ -78,20 +102,20 @@

Welcome To DcodePlus

-
+

PHILOSOPHIES

- +

Optimism

Our mindset and attitude determine success in language learning.

- +

Synergy

Total Physical Response (TPR) and Nuro Linguistic Program (NLP) can @@ -99,22 +123,23 @@

Synergy

- +

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 +153,7 @@

Consistency

- Dr. Faiz from Yemen

+
@@ -135,9 +161,9 @@

COURSE OFFERED

- +

Preparatory (Zelta)

-

+

The preparatory level Zelta at Dcode+ 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 @@ -159,11 +185,12 @@

Preparatory (Zelta)

training. Join Dcode+ today and take the first step towards improving your English language skills!

+
- +

Intermediate (Felta)

-

+

Felta at Dcode+ 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 @@ -186,11 +213,12 @@

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 proficiency to the next level. This course is ideal for those who have already mastered the basics of the English language and are @@ -211,11 +239,12 @@

Advanced (Apex)

in the English language. Enroll in Dcode+ Apex today and take the next step in your English language journey!

+
- +

Decodeplus IELTS and TOEFL

-

+

Decodeplus 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 @@ -230,11 +259,12 @@

Decodeplus IELTS and TOEFL

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 +280,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 +301,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..4b3f108 100644 --- a/js/script.js +++ b/js/script.js @@ -3,41 +3,101 @@ 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: "ajmalullanam5@gmail.com", + 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) => { + 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..fd0aa48 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,19 +23,28 @@ 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; } @@ -48,14 +63,14 @@ padding: 5px; } .course-box { - padding: 20px; + width: 260px; margin: 60px 8px 8px 8px; } .course-box img { - width: 240px; + width: 260px; } .footer-container > div { diff --git a/style/style.css b/style/style.css index 74f5bb2..15a8716 100644 --- a/style/style.css +++ b/style/style.css @@ -3,11 +3,11 @@ padding: 0; font-family: "Montserrat", "Arial", sans-serif; scroll-behavior: smooth; - transition: 1s; + /* transition: 0.5s; */ } *::selection { - color: #000; + color: #3e09ff; } html, @@ -16,33 +16,35 @@ 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; +} + +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 +53,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,23 +80,44 @@ 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: 0px 40px; +} .main-head { - position: absolute; - top: 42%; - left: 6%; + display: flex; + align-content: center; + flex-wrap: wrap; + flex-direction: column; + justify-content: center; +} + +.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; font-size: 20px; @@ -101,24 +131,22 @@ nav img { .main-about-btn { display: inline-block; text-decoration: none; - border-radius: 5px; - color: #fff; - border: 1px solid #fff; + border-radius: 10px; + color: #2f6ea8; padding: 10px 26px; font-size: 15px; - margin-top: 25px; + margin-top: 26px; + width: 86px; + text-align: center; + border: #6f3e78 2px 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 { @@ -146,7 +174,6 @@ nav .fa { .about-us-content { padding: 40px; - display: flex; flex-wrap: wrap; justify-content: space-around; @@ -169,7 +196,7 @@ nav .fa { width: 38%; line-height: 24px; } -.about-para > p{ +.about-para > p { text-align: justify; text-justify: inter-word; } @@ -190,9 +217,9 @@ nav .fa { } .philosophy-box { - flex-basis: 100px; + flex-basis: 160px; text-align: center; - padding: 20px; + padding: 20px 40px; } .philosophy-box p { @@ -203,19 +230,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); } @@ -236,6 +263,7 @@ nav .fa { } /* -- Courses -- */ + .course-container { width: 100vw; display: flex; @@ -244,26 +272,52 @@ nav .fa { } .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 +382,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: 100px; + 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 +477,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 +492,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 +513,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 {