├── .prettierignore ├── .prettierrc ├── assets ├── images │ ├── team1.jpg │ ├── team2.jpg │ ├── team3.jpg │ ├── team4.jpg │ ├── blog │ │ ├── code.jpg │ │ ├── dev.jpg │ │ ├── meadow.jpg │ │ ├── nature.jpg │ │ └── people.jpg │ ├── for-hire.jpg │ ├── keiko-icon.ico │ ├── keiko-logo.png │ ├── for-hire_old.jpg │ ├── mobile-hire.jpg │ ├── keiko-logo-og.png │ ├── mobile-hire_old.jpg │ ├── favicon_io │ │ ├── favicon.ico │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── apple-touch-icon.png │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ └── site.webmanifest │ ├── subscribe-icon.svg │ ├── logos │ │ ├── Admob_logo.svg │ │ ├── Google_logo.svg │ │ ├── Adobe_logo.svg │ │ ├── Facebook_Logo.svg │ │ ├── Amazon_logo.svg │ │ ├── Google_Play_Services_logo.svg │ │ ├── Appodeal_logo.svg │ │ ├── intel.svg │ │ └── samsung.svg │ └── about.svg ├── css │ ├── meet-the-team.css │ ├── privacy-policy.css │ ├── scroll-bar.css │ ├── animations.css │ ├── media-queries.css │ ├── companies-banner.css │ ├── faq.css │ ├── scroll-down.css │ ├── footer.css │ ├── about.css │ ├── job-listing.css │ ├── support.css │ ├── neverMissAnUpdate.css │ ├── contact.css │ ├── testimonials.css │ ├── blog_page.css │ ├── login.css │ └── nav-styles.css ├── demo │ └── style-1-demo-dark.jpg ├── js │ ├── set-mode.js │ ├── debug.log │ ├── accordion.js │ ├── scroll-down.js │ ├── progressbar.js │ ├── navbar.js │ ├── footer.js │ ├── script.js │ ├── animate.js │ └── dark-mode.js └── global.css ├── design-assets ├── Color Scheme.png ├── Large Tablet.png ├── Desktop Layout.png ├── Mobile Layout.png ├── Vertical Tablet.png ├── png │ └── keiko-logo.psd └── Buttons & Hover States.png ├── testimonials ├── assets │ └── images │ │ ├── team1.jpg │ │ ├── team2.jpg │ │ ├── team3.jpg │ │ └── team4.jpg ├── style.css └── index.html ├── terms ├── script.js ├── style.css └── index.html ├── LICENSE ├── .github └── workflows │ └── format-code.yml ├── .gitignore ├── CONTRIBUTORS.md ├── README.md ├── meet-the-team.html ├── about.html ├── contact.html ├── support.html └── faq.html /.prettierignore: -------------------------------------------------------------------------------- 1 | .prettierrc 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | trailingComma: "es5" 2 | tabWidth: 2 3 | semi: true 4 | singleQuote: true 5 | -------------------------------------------------------------------------------- /assets/images/team1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/team1.jpg -------------------------------------------------------------------------------- /assets/images/team2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/team2.jpg -------------------------------------------------------------------------------- /assets/images/team3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/team3.jpg -------------------------------------------------------------------------------- /assets/images/team4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/team4.jpg -------------------------------------------------------------------------------- /assets/css/meet-the-team.css: -------------------------------------------------------------------------------- 1 | #team > h2 { 2 | color: var(--heading); 3 | font-size: var(--lgHeading); 4 | } 5 | -------------------------------------------------------------------------------- /assets/images/blog/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/blog/code.jpg -------------------------------------------------------------------------------- /assets/images/blog/dev.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/blog/dev.jpg -------------------------------------------------------------------------------- /assets/images/for-hire.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/for-hire.jpg -------------------------------------------------------------------------------- /assets/images/keiko-icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/keiko-icon.ico -------------------------------------------------------------------------------- /assets/images/keiko-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/keiko-logo.png -------------------------------------------------------------------------------- /assets/images/blog/meadow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/blog/meadow.jpg -------------------------------------------------------------------------------- /assets/images/blog/nature.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/blog/nature.jpg -------------------------------------------------------------------------------- /assets/images/blog/people.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/blog/people.jpg -------------------------------------------------------------------------------- /assets/images/for-hire_old.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/for-hire_old.jpg -------------------------------------------------------------------------------- /assets/images/mobile-hire.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/mobile-hire.jpg -------------------------------------------------------------------------------- /design-assets/Color Scheme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/design-assets/Color Scheme.png -------------------------------------------------------------------------------- /design-assets/Large Tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/design-assets/Large Tablet.png -------------------------------------------------------------------------------- /assets/demo/style-1-demo-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/demo/style-1-demo-dark.jpg -------------------------------------------------------------------------------- /assets/images/keiko-logo-og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/keiko-logo-og.png -------------------------------------------------------------------------------- /assets/images/mobile-hire_old.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/mobile-hire_old.jpg -------------------------------------------------------------------------------- /design-assets/Desktop Layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/design-assets/Desktop Layout.png -------------------------------------------------------------------------------- /design-assets/Mobile Layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/design-assets/Mobile Layout.png -------------------------------------------------------------------------------- /design-assets/Vertical Tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/design-assets/Vertical Tablet.png -------------------------------------------------------------------------------- /design-assets/png/keiko-logo.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/design-assets/png/keiko-logo.psd -------------------------------------------------------------------------------- /assets/images/favicon_io/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/favicon_io/favicon.ico -------------------------------------------------------------------------------- /testimonials/assets/images/team1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/testimonials/assets/images/team1.jpg -------------------------------------------------------------------------------- /testimonials/assets/images/team2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/testimonials/assets/images/team2.jpg -------------------------------------------------------------------------------- /testimonials/assets/images/team3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/testimonials/assets/images/team3.jpg -------------------------------------------------------------------------------- /testimonials/assets/images/team4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/testimonials/assets/images/team4.jpg -------------------------------------------------------------------------------- /design-assets/Buttons & Hover States.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/design-assets/Buttons & Hover States.png -------------------------------------------------------------------------------- /assets/images/favicon_io/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/favicon_io/favicon-16x16.png -------------------------------------------------------------------------------- /assets/images/favicon_io/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/favicon_io/favicon-32x32.png -------------------------------------------------------------------------------- /assets/js/set-mode.js: -------------------------------------------------------------------------------- 1 | const currentTheme = localStorage.getItem('theme'); 2 | document.documentElement.setAttribute('data-theme', currentTheme); 3 | -------------------------------------------------------------------------------- /assets/images/favicon_io/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/favicon_io/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/images/favicon_io/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/favicon_io/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/images/favicon_io/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Keiko-Corp/HEAD/assets/images/favicon_io/android-chrome-512x512.png -------------------------------------------------------------------------------- /assets/js/debug.log: -------------------------------------------------------------------------------- 1 | [1003/133745.745:ERROR:registration_protocol_win.cc(103)] CreateFile: The system cannot find the file specified. (0x2) 2 | [1003/144304.312:ERROR:registration_protocol_win.cc(103)] CreateFile: The system cannot find the file specified. (0x2) 3 | -------------------------------------------------------------------------------- /assets/images/subscribe-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/js/accordion.js: -------------------------------------------------------------------------------- 1 | var acc = document.getElementsByClassName('accordion'); 2 | var i; 3 | 4 | for (i = 0; i < acc.length; i++) { 5 | acc[i].addEventListener('click', function () { 6 | this.classList.toggle('active-accordion'); 7 | var panel = this.nextElementSibling; 8 | if (panel.style.display === 'block') { 9 | panel.style.display = 'none'; 10 | } else { 11 | panel.style.display = 'block'; 12 | } 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /assets/images/favicon_io/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /assets/css/privacy-policy.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: #fe6655; 3 | padding-left: 10px; 4 | font-size: 30px; 5 | } 6 | 7 | p { 8 | padding-left: 20px; 9 | padding-bottom: 20px; 10 | padding-top: 10px; 11 | } 12 | 13 | #third-party { 14 | display: inline-flex; 15 | justify-content: space-around; 16 | align-items: center; 17 | } 18 | 19 | .third { 20 | width: 50px; 21 | height: 50px; 22 | } 23 | 24 | #appo, 25 | #google { 26 | width: 80px; 27 | height: 80px; 28 | } 29 | 30 | ul { 31 | list-style-type: none; 32 | } 33 | -------------------------------------------------------------------------------- /assets/css/scroll-bar.css: -------------------------------------------------------------------------------- 1 | /* scroll-bar width */ 2 | ::-webkit-scrollbar { 3 | width: 15px; 4 | height: 0; 5 | } 6 | 7 | /* scroll-bar Track */ 8 | ::-webkit-scrollbar-track { 9 | -webkit-box-shadow: inset 0 0 5px grey; 10 | box-shadow: inset 0 0 5px grey; 11 | border-radius: 2px; 12 | } 13 | 14 | /* scroll-bar Handle */ 15 | ::-webkit-scrollbar-thumb { 16 | background: var(--red); 17 | border-radius: 10px; 18 | } 19 | 20 | /* for cross-browser support */ 21 | body { 22 | -ms-overflow-style: none; 23 | } 24 | 25 | .no-scroll { 26 | overflow: hidden; 27 | } 28 | -------------------------------------------------------------------------------- /assets/js/scroll-down.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var btnScrollDown = document.querySelector('#scroll_down'); 5 | 6 | function scrollDown() { 7 | var windowCoords = document.documentElement.clientHeight; 8 | (function scroll() { 9 | if (window.pageYOffset < windowCoords) { 10 | window.scrollBy(0, 10); 11 | setTimeout(scroll, 0); 12 | } 13 | if (window.pageYOffset > windowCoords) { 14 | window.scrollTo(0, windowCoords); 15 | } 16 | })(); 17 | } 18 | 19 | btnScrollDown.addEventListener('click', scrollDown); 20 | })(); 21 | -------------------------------------------------------------------------------- /terms/script.js: -------------------------------------------------------------------------------- 1 | // Get the modal 2 | var modal = document.getElementById('modalBox'); 3 | 4 | // Get the button that opens the modal 5 | var btn = document.getElementById('openModal'); 6 | 7 | // Get the element that closes the modal 8 | var span = document.getElementsByClassName('close')[0]; 9 | 10 | // When the user clicks on the button, open the modal 11 | btn.onclick = function () { 12 | modal.style.display = 'block'; 13 | }; 14 | 15 | // When the user clicks on (x), close the modal 16 | span.onclick = function () { 17 | modal.style.display = 'none'; 18 | }; 19 | 20 | // When the user clicks anywhere outside of the modal, close it 21 | window.onclick = function (event) { 22 | if (event.target == modal) { 23 | modal.style.display = 'none'; 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /assets/images/logos/Admob_logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/js/progressbar.js: -------------------------------------------------------------------------------- 1 | // define functions 2 | function fillScrollLine() { 3 | const windowHeight = window.innerHeight; 4 | const fullHeight = document.body.clientHeight; 5 | const scrollY = window.scrollY; 6 | const scrolled = (scrollY / (fullHeight - windowHeight)) * 100; 7 | } 8 | 9 | function debounce(func, wait = 15, immediate) { 10 | var timeout; 11 | return function () { 12 | var context = this, 13 | args = arguments; 14 | var later = function () { 15 | timeout = null; 16 | if (!immediate) func.apply(context, args); 17 | }; 18 | var callNow = immediate && !timeout; 19 | clearTimeout(timeout); 20 | timeout = setTimeout(later, wait); 21 | if (callNow) func.apply(context, args); 22 | }; 23 | } 24 | 25 | // event listeners here 26 | window.addEventListener('scroll', debounce(fillScrollLine)); 27 | -------------------------------------------------------------------------------- /assets/js/navbar.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector('.nav-button'); 2 | const sticky = document.querySelector('.sticky'); 3 | const body = document.body; 4 | // const list = document.querySelectorall("nav a"); 5 | // const active = document.querySelector('.nav-click'); 6 | 7 | // list.addEventListener("click", function () { 8 | // console.log("click") 9 | // }); 10 | 11 | function openMenu() { 12 | const menu = document.querySelector('.menu'); 13 | menu.classList.toggle('open'); 14 | } 15 | 16 | let lastScrollTop = 0; 17 | function toggleNavbar() { 18 | var scrollTop = body.scrollTop || document.documentElement.scrollTop; 19 | if (scrollTop > lastScrollTop) { 20 | sticky.style.top = '-80px'; 21 | } else { 22 | sticky.style.top = '0px'; 23 | } 24 | lastScrollTop = scrollTop; 25 | } 26 | 27 | button.addEventListener('click', openMenu); 28 | body.addEventListener('scroll', toggleNavbar); 29 | -------------------------------------------------------------------------------- /assets/css/animations.css: -------------------------------------------------------------------------------- 1 | .from-left { 2 | animation: from-left 0.7s forwards; 3 | } 4 | .from-right { 5 | animation: from-right 0.75s forwards; 6 | } 7 | @keyframes from-left { 8 | from { 9 | transform: translateX(-100px); 10 | opacity: 0; 11 | } 12 | to { 13 | transform: translateX(0px); 14 | opacity: 1; 15 | } 16 | } 17 | @keyframes from-right { 18 | from { 19 | transform: translateX(100px); 20 | opacity: 0; 21 | } 22 | to { 23 | transform: translateX(0px); 24 | opacity: 1; 25 | } 26 | } 27 | 28 | @keyframes small-from-bottom { 29 | from { 30 | transform: translateY(+50px); 31 | opacity: 0; 32 | } 33 | to { 34 | transform: translateY(0px); 35 | opacity: 1; 36 | } 37 | } 38 | @keyframes medium-from-bottom { 39 | from { 40 | transform: translateY(+70px); 41 | opacity: 0; 42 | } 43 | to { 44 | transform: translateY(0px); 45 | opacity: 1; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Matt Smith 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /assets/css/media-queries.css: -------------------------------------------------------------------------------- 1 | /* width range - [-,640px] */ 2 | @media (max-width: 640px) { 3 | } 4 | 5 | /* width range - [641px,768px] */ 6 | @media (max-width: 768px) { 7 | header { 8 | margin-bottom: 2rem; 9 | } 10 | .hero { 11 | flex-direction: column; 12 | padding: 1.5rem; 13 | overflow-x: hidden; 14 | } 15 | 16 | .hero_content { 17 | padding: var(--smPadding); 18 | max-width: 25rem; 19 | margin-left: 0; 20 | } 21 | 22 | .hero_content > h1 { 23 | font-size: var(--lgHeading); 24 | line-height: 1.1; 25 | } 26 | 27 | .hero_content > p { 28 | font-size: var(--lgText); 29 | margin-bottom: var(--mdMargin); 30 | } 31 | 32 | .hero_image img { 33 | width: 55vw; 34 | height: auto; 35 | object-fit: contain; 36 | margin-bottom: var(--mdMargin); 37 | } 38 | .CTA { 39 | font-size: var(--lgText); 40 | width: 10rem; 41 | } 42 | } 43 | 44 | /* width range - [768px,1023px] */ 45 | @media (min-width: 768px) { 46 | } 47 | 48 | /* width range - [1024,1279px] */ 49 | @media (min-width: 1024px) { 50 | } 51 | 52 | /* width range - [1280,-] */ 53 | @media (min-width: 1280px) { 54 | } 55 | -------------------------------------------------------------------------------- /.github/workflows/format-code.yml: -------------------------------------------------------------------------------- 1 | name: Format Code 2 | on: push 3 | 4 | jobs: 5 | format: 6 | runs-on: ubuntu-20.04 7 | 8 | steps: 9 | - name: Pull Repo 10 | uses: actions/checkout@v2 11 | with: 12 | fetch-depth: 0 13 | ref: ${{ github.event.pull_request.head.ref }} 14 | - name: Install Prettier 15 | env: 16 | PRETTIER_VERSION: 2 17 | run: | 18 | sudo npm i -g prettier@$PRETTIER_VERSION 19 | - name: Format 20 | run: | 21 | # don't format if there's no .prettierrc file 22 | if [ ! -f .prettierrc ]; then 23 | echo ".prettierrc not found" 24 | echo "terminating workflow..." 25 | exit 1; 26 | fi 27 | 28 | prettier --check . --ignore-unknown --write 29 | - name: Push Back Formatted Code 30 | run: | 31 | # configure git 32 | git config --global user.name "Zero to Mastery" 33 | git config --global user.email "zero-to-mastery@users.noreply.github.com" 34 | 35 | git add . 36 | git commit -m "(CI) format code" || echo "nothing to commit" 37 | git push 38 | -------------------------------------------------------------------------------- /testimonials/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | body { 4 | background: #ff416c; 5 | background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c); 6 | background: linear-gradient(to right, #ff4b2b, #ff416c); 7 | font-family: 'Roboto', sans-serif; 8 | } 9 | 10 | .testimonials { 11 | background: #fff; 12 | width: 450px; 13 | height: 250px; 14 | margin: 70px auto; 15 | white-space: nowrap; 16 | overflow: hidden; 17 | box-sizing: border-box; 18 | box-shadow: 0 1px 6px #777; 19 | } 20 | 21 | .testimonial-reviews { 22 | display: table-row; 23 | white-space: nowrap; 24 | padding-left: 100%; 25 | animation: slider 80s linear infinite; 26 | } 27 | 28 | .review { 29 | width: 450px; 30 | padding-left: 450px; 31 | display: table-cell; 32 | } 33 | 34 | .review img { 35 | border-radius: 50%; 36 | } 37 | 38 | .review em { 39 | vertical-align: middle; 40 | } 41 | 42 | @keyframes slider { 43 | 0% { 44 | transform: translate(0, 0); 45 | } 46 | 100% { 47 | transform: translate(-100%, 0); 48 | } 49 | } 50 | 51 | footer { 52 | position: fixed; 53 | bottom: 25px; 54 | left: 25px; 55 | width: 100%; 56 | display: flex; 57 | justify-content: center; 58 | } 59 | -------------------------------------------------------------------------------- /assets/css/companies-banner.css: -------------------------------------------------------------------------------- 1 | .companies-banner-container { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: space-evenly; 5 | align-items: center; 6 | background-color: var(--purple); 7 | vertical-align: auto; 8 | padding-top: var(--lgPadding); 9 | padding-bottom: var(--lgPadding); 10 | } 11 | 12 | .companies-title-section p { 13 | text-align: center; 14 | color: #f4f7fe; 15 | } 16 | 17 | .company-container { 18 | max-width: var(--maxWidth); 19 | } 20 | 21 | .company-title { 22 | color: #f4f7fe; 23 | font-size: 32px; 24 | line-height: 36px; 25 | text-align: center; 26 | font-weight: 700; 27 | } 28 | 29 | .company-title-description { 30 | font-size: 12px; 31 | font-weight: 400; 32 | line-height: 16px; 33 | margin-top: var(--lgMargin); 34 | color: #f4f7fe; 35 | } 36 | 37 | @media (min-width: 768px) { 38 | .company-title-description { 39 | margin-top: var(--smMargin); 40 | } 41 | } 42 | 43 | .company-logo-section { 44 | display: flex; 45 | justify-content: center; 46 | align-items: center; 47 | padding-top: var(--lgMargin); 48 | } 49 | 50 | .company-logo { 51 | width: clamp(14vmin, 10vw, 17vmin); 52 | height: 100%; 53 | } 54 | 55 | /* Making the logos responsive */ 56 | .company-logo + .company-logo { 57 | margin-left: 3vw; 58 | } 59 | 60 | /* For the facebook logo */ 61 | .company-logo:nth-child(3) { 62 | margin-bottom: 2vmin; 63 | } 64 | -------------------------------------------------------------------------------- /assets/css/faq.css: -------------------------------------------------------------------------------- 1 | .faq .container { 2 | justify-content: start; 3 | align-items: start; 4 | text-align: left; 5 | margin-bottom: 4rem; 6 | height: auto; 7 | background: transparent; 8 | } 9 | 10 | .faq h1 { 11 | font-size: 2.5rem; 12 | text-align: center; 13 | color: var(--heroText); 14 | font-weight: 600; 15 | text-transform: uppercase; 16 | margin-bottom: 3.125rem; 17 | } 18 | 19 | .faq h2 { 20 | font-size: 1.8rem; 21 | font-style: black; 22 | color: var(--heroText); 23 | font-weight: 900; 24 | margin-bottom: 1.25rem; 25 | margin-top: 1.875rem; 26 | } 27 | 28 | .faq p { 29 | font-size: 1.1rem; 30 | letter-spacing: 0.2px; 31 | font-weight: 400; 32 | color: var(--heroText); 33 | line-height: 1.4; 34 | margin-bottom: 1.25rem; 35 | text-align: left; 36 | } 37 | 38 | @media (max-width: 768px) { 39 | .faq .container { 40 | padding: 1.5rem; 41 | } 42 | } 43 | 44 | .accordion { 45 | background-color: #eee; 46 | color: #444; 47 | cursor: pointer; 48 | padding: 18px; 49 | width: 100%; 50 | border-bottom: 1px solid black; 51 | text-align: left; 52 | outline: none; 53 | font-size: 15px; 54 | transition: 0.4s ease-in-out; 55 | } 56 | .fas { 57 | float: right; 58 | } 59 | 60 | .active-accordion i { 61 | transform: rotate(180deg); 62 | } 63 | 64 | .active-accordion, 65 | .accordion:hover { 66 | background-color: #ccc; 67 | } 68 | 69 | .panel { 70 | padding: 10px 18px; 71 | display: none; 72 | background-color: var(--mainBackground); 73 | color: var(--heroText); 74 | overflow: hidden; 75 | } 76 | -------------------------------------------------------------------------------- /assets/css/scroll-down.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | text-align: center; 3 | margin-left: auto; 4 | margin-right: auto; 5 | position: relative; 6 | } 7 | button.scroll_down { 8 | position: absolute; 9 | margin-left: auto; 10 | margin-right: auto; 11 | margin-bottom: 2rem; 12 | left: 0; 13 | right: 0; 14 | height: 50px; 15 | width: 30px; 16 | bottom: 60px; 17 | background-color: transparent; 18 | border: 2px solid #50555a; 19 | border-radius: 20px; 20 | cursor: pointer; 21 | outline: none; 22 | } 23 | button.scroll_down:before { 24 | position: absolute; 25 | top: 10px; 26 | left: 50%; 27 | content: ''; 28 | width: 6px; 29 | height: 6px; 30 | margin-left: -3px; 31 | background-color: #50555a; 32 | border-radius: 100%; 33 | -webkit-animation: scroll_down_btn-animation 2s infinite; 34 | animation: scroll_down_btn-animation 2s infinite; 35 | box-sizing: border-box; 36 | } 37 | 38 | @keyframes scroll_down_btn-animation { 39 | 0% { 40 | transform: translate(0, 0); 41 | opacity: 0; 42 | } 43 | 40% { 44 | opacity: 1; 45 | } 46 | 80% { 47 | transform: translate(0, 20px); 48 | opacity: 0; 49 | } 50 | 100% { 51 | opacity: 0; 52 | } 53 | } 54 | 55 | @-webkit-keyframes scroll_down_btn-animation { 56 | 0% { 57 | -webkit-transform: translate(0, 0); 58 | transform: translate(0, 0); 59 | opacity: 0; 60 | } 61 | 40% { 62 | opacity: 1; 63 | } 64 | 80% { 65 | -webkit-transform: translate(0, 20px); 66 | transform: translate(0, 20px); 67 | opacity: 0; 68 | } 69 | 100% { 70 | opacity: 0; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /terms/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | font-family: 'Roboto', sans-serif; 11 | } 12 | 13 | p { 14 | line-height: 135%; 15 | margin: 3.5%; 16 | } 17 | 18 | /* view the terms of the site */ 19 | #openModal { 20 | background-color: rgba(0, 0, 0, 0.385); 21 | border: none; 22 | color: white; 23 | display: block; 24 | font-family: inherit; 25 | margin: 15% auto; 26 | padding: 10px 15px; 27 | } 28 | 29 | /* the modal buttons */ 30 | .terms { 31 | border: none; 32 | border-radius: 3px; 33 | cursor: pointer; 34 | color: white; 35 | float: right; 36 | font-family: inherit; 37 | margin-top: -15px; 38 | margin-right: 3px; 39 | padding: 5px; 40 | } 41 | 42 | .success { 43 | background-color: green; 44 | } 45 | 46 | .reject { 47 | background-color: red; 48 | } 49 | 50 | /* The background of the modal */ 51 | .modal { 52 | display: none; /* to allow the modal box to be hidden initially */ 53 | position: fixed; /* the modal box will not change it's original position */ 54 | z-index: 1; /* the modal box will stay on top of other elements */ 55 | left: 0; 56 | top: 0; 57 | width: 100%; /* the modal box takes up the full width of the device */ 58 | height: 100%; /* the modal box takes up the full height of the device */ 59 | overflow: auto; /* the user can scroll through the modal box */ 60 | background-color: rgb(0, 0, 0); /* Fallback color */ 61 | background-color: rgba(0, 0, 0, 0.4); /* Black with some opacity */ 62 | } 63 | 64 | /* Modal Text Container */ 65 | .modalText { 66 | background-color: #fefefe; 67 | margin: 15% auto; /* 15% from the top and centered */ 68 | padding: 20px; 69 | border: 1px solid #888; 70 | width: 80%; /* depending on screen size */ 71 | } 72 | 73 | /* The Close Button */ 74 | .close { 75 | color: #777; 76 | float: right; 77 | font-size: 28px; 78 | font-weight: bold; 79 | } 80 | 81 | .close:hover, 82 | .close:focus { 83 | color: black; 84 | text-decoration: none; 85 | cursor: pointer; 86 | } 87 | 88 | footer { 89 | position: fixed; 90 | bottom: 10px; 91 | left: 25px; 92 | } 93 | -------------------------------------------------------------------------------- /assets/js/footer.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | const footer = document.querySelector('footer'); 3 | 4 | footer.innerHTML = ` 5 | 6 | 55 | 56 | 62 | 63 | `; 64 | })(); 65 | -------------------------------------------------------------------------------- /assets/css/footer.css: -------------------------------------------------------------------------------- 1 | footer { 2 | margin-bottom: 0; 3 | } 4 | .footer-column .sub-footer-link { 5 | display: inline-block; 6 | } 7 | footer > .footer-row { 8 | display: grid; 9 | grid-template-columns: repeat(4, 1fr); 10 | display: -ms-flexbox; 11 | display: -moz-flex; 12 | flex-wrap: wrap; 13 | -webkit-flex-wrap: wrap; 14 | padding: 0 10vw; 15 | margin-top: 10vh; 16 | justify-content: center; 17 | } 18 | 19 | .footer-column { 20 | border: 1px solid gray; 21 | display: flex; 22 | flex-direction: column; 23 | align-items: center; 24 | text-align: center; 25 | padding: 30px; 26 | box-sizing: border-box; 27 | min-width: 300px; 28 | max-width: 300px; 29 | gap: 25px; 30 | } 31 | 32 | .footer-column-content { 33 | margin: auto 0; 34 | } 35 | 36 | .footer-column h2 { 37 | font-size: large; 38 | color: var(--heroText); 39 | opacity: 1; 40 | font-weight: bolder; 41 | } 42 | 43 | .footer-column .sub-footer-link { 44 | display: flex; 45 | flex-wrap: wrap; 46 | flex-direction: column; 47 | gap: 10px; 48 | } 49 | 50 | .footer-column .sub-footer .socials { 51 | display: flex; 52 | flex-direction: row; 53 | } 54 | 55 | .sub-footer-link a { 56 | font-size: medium; 57 | color: var(--text); 58 | text-decoration: none; 59 | cursor: pointer; 60 | } 61 | 62 | .sub-footer-link a:hover { 63 | opacity: 0.7; 64 | transition: 0.3s; 65 | } 66 | 67 | .sub-footer-link.socials a i { 68 | font-size: 23px; 69 | justify-content: center; 70 | } 71 | 72 | #sub-footer { 73 | height: auto; 74 | font-size: var(--smText); 75 | padding-bottom: var(--lgMargin); 76 | display: flex; 77 | flex-direction: row; 78 | justify-content: center; 79 | width: 100%; 80 | margin-top: 5vh; 81 | } 82 | 83 | #sub-footer p { 84 | font-size: 14px; 85 | } 86 | /* Footer Social Media Icons*/ 87 | 88 | footer ul { 89 | display: flex; 90 | gap: 15px; 91 | } 92 | 93 | footer ul > li { 94 | list-style-type: none; 95 | } 96 | footer ul > li > a, 97 | footer ul > li > a:visited { 98 | text-decoration: none; 99 | color: black; 100 | } 101 | footer ul > li > a:hover { 102 | text-decoration: none; 103 | color: rgba(0, 0, 0, 0.9); 104 | font-weight: 500; 105 | } 106 | footer ul > li > a > img:hover { 107 | transition: all 0.9; 108 | transform: scale(1.1); 109 | } 110 | 111 | @media screen and (min-width: 991.99px) { 112 | .footer-column { 113 | min-width: 200px; 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .DS_STORE 3 | 4 | *.log 5 | 6 | 7 | # Created by https://www.toptal.com/developers/gitignore/api/node 8 | # Edit at https://www.toptal.com/developers/gitignore?templates=node 9 | 10 | ### Node ### 11 | # Logs 12 | logs 13 | *.log 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | lerna-debug.log* 18 | 19 | # Diagnostic reports (https://nodejs.org/api/report.html) 20 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 21 | 22 | # Runtime data 23 | pids 24 | *.pid 25 | *.seed 26 | *.pid.lock 27 | 28 | # Directory for instrumented libs generated by jscoverage/JSCover 29 | lib-cov 30 | 31 | # Coverage directory used by tools like istanbul 32 | coverage 33 | *.lcov 34 | 35 | # nyc test coverage 36 | .nyc_output 37 | 38 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 39 | .grunt 40 | 41 | # Bower dependency directory (https://bower.io/) 42 | bower_components 43 | 44 | # node-waf configuration 45 | .lock-wscript 46 | 47 | # Compiled binary addons (https://nodejs.org/api/addons.html) 48 | build/Release 49 | 50 | # Dependency directories 51 | node_modules/ 52 | jspm_packages/ 53 | 54 | # TypeScript v1 declaration files 55 | typings/ 56 | 57 | # TypeScript cache 58 | *.tsbuildinfo 59 | 60 | # Optional npm cache directory 61 | .npm 62 | 63 | # Optional eslint cache 64 | .eslintcache 65 | 66 | # Microbundle cache 67 | .rpt2_cache/ 68 | .rts2_cache_cjs/ 69 | .rts2_cache_es/ 70 | .rts2_cache_umd/ 71 | 72 | # Optional REPL history 73 | .node_repl_history 74 | 75 | # Output of 'npm pack' 76 | *.tgz 77 | 78 | # Yarn Integrity file 79 | .yarn-integrity 80 | 81 | # dotenv environment variables file 82 | .env 83 | .env.test 84 | .env*.local 85 | 86 | # parcel-bundler cache (https://parceljs.org/) 87 | .cache 88 | .parcel-cache 89 | 90 | # Next.js build output 91 | .next 92 | 93 | # Nuxt.js build / generate output 94 | .nuxt 95 | dist 96 | 97 | # Gatsby files 98 | .cache/ 99 | # Comment in the public line in if your project uses Gatsby and not Next.js 100 | # https://nextjs.org/blog/next-9-1#public-directory-support 101 | # public 102 | 103 | # vuepress build output 104 | .vuepress/dist 105 | 106 | # Serverless directories 107 | .serverless/ 108 | 109 | # FuseBox cache 110 | .fusebox/ 111 | 112 | # DynamoDB Local files 113 | .dynamodb/ 114 | 115 | # TernJS port file 116 | .tern-port 117 | 118 | # Stores VSCode versions used for testing VSCode extensions 119 | .vscode-test 120 | 121 | # End of https://www.toptal.com/developers/gitignore/api/node 122 | -------------------------------------------------------------------------------- /assets/css/about.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #eee; 3 | } 4 | 5 | body.dark-theme { 6 | background-color: #343a40; 7 | } 8 | 9 | .container { 10 | max-width: 100%; 11 | margin: 0 auto; 12 | padding: 0 16px; 13 | background-color: var(--mainBackground); 14 | } 15 | 16 | .hero { 17 | background-color: var(--lightBlue) !important; 18 | border-radius: 4px; 19 | padding: 24px !important; 20 | box-shadow: 1px 2px 15px 1px gray; 21 | } 22 | 23 | .intro { 24 | display: flex; 25 | flex-direction: column; 26 | align-items: flex-end; 27 | justify-content: center; 28 | min-height: 50vh; 29 | } 30 | 31 | .intro header { 32 | max-width: 100vw; 33 | min-height: 50vh; 34 | } 35 | 36 | .intro h2 { 37 | font-size: 72px; 38 | margin: 32px 0; 39 | font-weight: 700; 40 | font-size: var(--xlHeading); 41 | text-transform: uppercase; 42 | line-height: 1.1; 43 | color: var(--heading); 44 | } 45 | 46 | .intro p { 47 | color: var(--text, #757575); 48 | font-size: var(--xlText); 49 | word-spacing: 0.2em; 50 | line-height: 1.3; 51 | font-weight: 400; 52 | } 53 | 54 | .intro-image { 55 | width: 95%; 56 | } 57 | 58 | .intro-btn { 59 | margin: 15px 0; 60 | display: inline-block; 61 | background-color: #fe6655; 62 | color: white; 63 | padding: 16px; 64 | border-radius: 12px; 65 | text-transform: uppercase; 66 | cursor: pointer; 67 | transition: transform 0.3s ease-in-out; 68 | text-decoration: none; 69 | } 70 | 71 | .intro-btn:hover { 72 | transform: scale(1.2); 73 | } 74 | 75 | #intro-title { 76 | font-family: 'Roboto', sans-serif; 77 | font-weight: 700; 78 | font-size: var(--xlHeading); 79 | text-transform: uppercase; 80 | line-height: 1.1; 81 | margin-bottom: 1.5rem; 82 | color: var(--heading); 83 | /* letter-spacing: 0.2rem; */ 84 | text-align: left; 85 | } 86 | 87 | #intro-section { 88 | color: var(--text, #757575); 89 | font-size: var(--xlText); 90 | word-spacing: 0.2em; 91 | line-height: 1.2; 92 | font-weight: 400; 93 | margin-bottom: 2rem; 94 | text-align: left; 95 | } 96 | 97 | #sub-footer p { 98 | font-size: 1rem; 99 | } 100 | 101 | /* Styles for tablet and bigger screen */ 102 | @media only screen and (min-width: 768px) { 103 | about { 104 | min-height: 100vh; 105 | } 106 | .container { 107 | max-width: 1200px; 108 | margin: 0 auto; 109 | } 110 | 111 | .intro { 112 | display: flex; 113 | flex-direction: row; 114 | align-items: center; 115 | } 116 | 117 | .intro header { 118 | max-width: 40vw; 119 | } 120 | 121 | .intro-image { 122 | margin-left: 16px; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /assets/images/logos/Google_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /terms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Keiko Corp | Terms & Conditions 13 | 14 | 15 | 16 | 17 | 18 | 19 | 53 | 54 |
55 | © 56 | 59 | Keiko Corp | Terms & Conditions | 60 | comebackid87 61 | | All Rights Reserved 62 |
63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /assets/css/job-listing.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: var(--mainBackground); 3 | } 4 | 5 | main { 6 | max-width: 100%; 7 | height: 100%; 8 | background-color: var(--mainBackground); 9 | margin: 0 !important; 10 | } 11 | 12 | .hero-image { 13 | text-align: center; 14 | background-image: url(../images/for-hire.jpg); 15 | background-repeat: no-repeat; 16 | background-size: cover; 17 | max-width: 100%; 18 | height: 450px; 19 | clip-path: polygon(0% 0%, 100% 1%, 100% 49%, 0 99%, 0% 100%); 20 | background-position: center center; 21 | position: relative; 22 | } 23 | 24 | .job-posts { 25 | color: var(--heroText); 26 | background-color: var(--mainBackground); 27 | } 28 | 29 | .job-posts h1 { 30 | font-size: 1.7rem; 31 | margin-top: 10px; 32 | color: var(--heroText); 33 | background-color: var(--mainBackground); 34 | align-items: center; 35 | } 36 | 37 | .job-posts h2, 38 | h1 { 39 | display: flex; 40 | justify-content: center; 41 | } 42 | 43 | .job-posts span img { 44 | max-width: 50px; 45 | height: auto; 46 | vertical-align: middle; 47 | margin-left: 10px; 48 | margin-bottom: 10px; 49 | margin-top: -25px; 50 | } 51 | 52 | table { 53 | border-collapse: collapse; 54 | color: var(--heroText); 55 | 56 | width: 100%; 57 | margin-top: 15px; 58 | margin-bottom: 25px; 59 | background-color: var(--mainBackground); 60 | box-shadow: 0px 2px 10px grey; 61 | } 62 | 63 | th { 64 | background-color: #fe6655; 65 | font-size: 1.5rem; 66 | } 67 | 68 | tbody { 69 | background-color: var(--lightBlue); 70 | } 71 | 72 | td { 73 | vertical-align: middle; 74 | } 75 | 76 | .job-posting-info { 77 | width: 100%; 78 | padding: 5px 20px; 79 | background-color: var(--mainBackground); 80 | } 81 | 82 | #mobile-table { 83 | display: none; 84 | } 85 | @media only screen and (max-width: 600px) { 86 | #mobile-table { 87 | display: block; 88 | background-color: var(--mainBackground); 89 | color: var(--text); 90 | width: 100%; 91 | margin-left: auto; 92 | margin-right: auto; 93 | } 94 | 95 | #mobile-table div { 96 | background-color: var(--lightBlue); 97 | } 98 | 99 | #large-table-display { 100 | display: none; 101 | } 102 | 103 | .job-posts h1 { 104 | font-size: 1.2rem; 105 | margin-bottom: 15px; 106 | background-color: var(--mainBackground); 107 | } 108 | .hero-image { 109 | background-image: url(../images/mobile-hire.jpg); 110 | } 111 | .job-posting-info { 112 | background-color: transparent; 113 | } 114 | } 115 | 116 | @media only screen and (min-width: 601px) and (max-width: 768px) { 117 | .hero-image { 118 | background-position: 40% 50%; 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /assets/css/support.css: -------------------------------------------------------------------------------- 1 | .support .container { 2 | justify-content: start; 3 | align-items: start; 4 | text-align: left; 5 | margin-bottom: 4rem; 6 | height: auto; 7 | background: transparent; 8 | } 9 | 10 | .support h1 { 11 | font-size: 2.5rem; 12 | text-align: center; 13 | color: var(--heroText); 14 | font-weight: 600; 15 | text-transform: uppercase; 16 | margin-bottom: 3.125rem; 17 | } 18 | 19 | .support h2 { 20 | font-size: 1.8rem; 21 | font-style: black; 22 | color: var(--heroText); 23 | font-weight: 900; 24 | margin-bottom: 1.25rem; 25 | margin-top: 1.875rem; 26 | } 27 | 28 | .support p { 29 | font-size: 1.1rem; 30 | letter-spacing: 0.2px; 31 | font-weight: 400; 32 | color: var(--heroText); 33 | line-height: 1.4; 34 | margin-bottom: 1.25rem; 35 | text-align: left; 36 | } 37 | 38 | .support .btn_primary { 39 | background-color: var(--darkBlue); 40 | padding: 0.8rem; 41 | color: white; 42 | border-radius: 5px; 43 | word-spacing: 0.2rem; 44 | outline: none; 45 | border: none; 46 | font-weight: 600; 47 | font-size: 1rem; 48 | border: transparent solid 2px; 49 | text-transform: uppercase; 50 | cursor: pointer; 51 | transition: all 0.5s ease-in-out; 52 | } 53 | 54 | .support .btn_primary:hover { 55 | background-color: white; 56 | color: var(--red); 57 | border-color: currentColor; 58 | } 59 | 60 | .support .btn_secondary { 61 | background-color: white; 62 | color: #fe6655; 63 | padding: 0.75rem; 64 | border-radius: 5px; 65 | word-spacing: 0.2rem; 66 | outline: none; 67 | border: none; 68 | font-weight: 600; 69 | font-size: 1rem; 70 | border: #fe6655 solid 2px; 71 | text-transform: uppercase; 72 | cursor: pointer; 73 | transition: all 0.5s ease-in-out; 74 | } 75 | 76 | .support .btn_secondary:hover { 77 | background-color: #fe6655; 78 | color: white; 79 | border-color: #fe6655; 80 | } 81 | 82 | [data-theme='dark'] .support .btn_secondary { 83 | color: var(--text); 84 | background-color: var(--lightBlue); 85 | } 86 | 87 | [data-theme='dark'] .support .btn_secondary:hover { 88 | background-color: white; 89 | color: var(--red); 90 | border-color: currentColor; 91 | } 92 | 93 | .support_banner { 94 | display: flex; 95 | flex-direction: column; 96 | text-align: center; 97 | background-color: var(--lightBlue); 98 | justify-content: center; 99 | align-items: center; 100 | margin-bottom: 3rem; 101 | height: auto; 102 | padding-bottom: 3rem; 103 | } 104 | 105 | @media (max-width: 768px) { 106 | .support .container, 107 | .support_banner { 108 | padding: 1.5rem; 109 | } 110 | } 111 | 112 | .browse_resources { 113 | width: 10rem !important; 114 | margin-bottom: 0.5rem !important; 115 | } 116 | -------------------------------------------------------------------------------- /testimonials/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Testimonials 8 | 9 | 10 |
11 |
12 |
13 |

14 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus 15 | nesciunt odit corporis cumque expedita! Reprehenderit autem quam 16 | earum expedita hic vero. 17 |

18 | team-member1 23 | Person Name, Co-founder at Company 24 |
25 | 26 |
27 |

28 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus 29 | nesciunt odit orporis cumque expedita! Reprehenderit autem quam 30 | earum expedita hic vero. 31 |

32 | team-member2 37 | Person Name, Co-founder at Company 38 |
39 | 40 |
41 |

42 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus 43 | nesciunt odit orporis cumque expedita! Reprehenderit autem quam 44 | earum expedita hic vero. 45 |

46 | team-member2 51 | Person Name, Co-founder at Company 52 |
53 | 54 |
55 |

56 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus 57 | nesciunt odit orporis cumque expedita! Reprehenderit autem quam 58 | earum expedita hic vero. 59 |

60 | team-member2 65 | Person Name, Co-founder at Company 66 |
67 |
68 |
69 | 70 |
71 | © 72 | 75 | Testimonials - 76 | comebackid87 - All 77 | Rights Reserved 78 |
79 | 80 | 81 | -------------------------------------------------------------------------------- /assets/images/logos/Adobe_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/images/logos/Facebook_Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | /******* RESET ********/ 4 | 5 | /* allows width and height values to apply to content, padding, and border. */ 6 | *, 7 | ::before, 8 | ::after { 9 | box-sizing: border-box; 10 | margin: 0; 11 | padding: 0; 12 | border: none; 13 | font: inherit; 14 | vertical-align: baseline; 15 | } 16 | 17 | html, 18 | body { 19 | scroll-behavior: smooth; 20 | line-height: 1.5; 21 | height: 100%; 22 | font-family: 'Roboto', sans-serif; 23 | text-rendering: optimizeLegibility; 24 | } 25 | 26 | /******* STYLES *******/ 27 | :root { 28 | /* max width for site content */ 29 | --maxWidth: 1280px; 30 | 31 | /* colors */ 32 | --red: #ef5b59; 33 | /*checked*/ 34 | --lightBlue: #f4f7fe; 35 | --darkBlue: #fe6655; 36 | --purple: #20014d; 37 | --yellow: #f1c40f; 38 | --darkRed: #de4a46; 39 | --green: #2cb629; 40 | --heading: #020100; 41 | --text: #757575; 42 | --mainBackground: #fff; 43 | --heroText: #343a40; 44 | --toggleBackground: #20014d; 45 | /* Added a custom property for the darktheme button background*/ 46 | --pricingBackground: #f4f7fe; 47 | 48 | /* text sizes */ 49 | --smText: 0.64rem; 50 | --mdText: 0.8rem; 51 | --lgText: 1rem; 52 | --xlText: 1.25rem; 53 | --smHeading: 1.563rem; 54 | --mdHeading: 1.953rem; 55 | --lgHeading: 2.441rem; 56 | --xlHeading: 3.052rem; 57 | 58 | /* spacing */ 59 | --smPadding: 0.5rem; 60 | --mdPadding: 1rem; 61 | --lgPadding: 1.5rem; 62 | --smMargin: 0.5rem; 63 | --mdMargin: 1rem; 64 | --lgMargin: 1.5rem; 65 | --xlMargin: 2rem; 66 | 67 | /* button styles */ 68 | --br: 0.25rem; 69 | --btnHeight: 40px; 70 | --btnPadding: 12px 16px; 71 | 72 | /* transition */ 73 | --transition: 0.2s all ease-in; 74 | 75 | /* shadows */ 76 | --smShadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.25); 77 | --mdShadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.25); 78 | --lgShadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 79 | 0 10px 10px -5px rgba(0, 0, 0, 0.04); 80 | --focusShadow: 0 0 0 3px #1f014d2f; 81 | 82 | /* breakpoints */ 83 | --sm: 640px; 84 | /* @media (min-width: 640px) { ... } */ 85 | --md: 768px; 86 | /* @media (min-width: 768px) { ... } */ 87 | --lg: 1024px; 88 | /* @media (min-width: 1024px) { ... } */ 89 | --xl: 1280px; 90 | /* @media (min-width: 1280px) { ... } */ 91 | 92 | /* Filters */ 93 | --svgIconFilter: none; 94 | } 95 | 96 | [data-theme='dark'] { 97 | --lightBlue: #ef5b59; 98 | --text: #fff; 99 | --mainBackground: #343a40; 100 | --heroText: #fff; 101 | --heading: #fff; 102 | --darkBlue: #343a40; 103 | --toggleBackground: #f4f7fe; 104 | --pricingBackground: #de4a46; 105 | --svgIconFilter: brightness(5); 106 | } 107 | 108 | body { 109 | color: var(--text); 110 | font-size: 1rem; 111 | } 112 | 113 | h1, 114 | h2, 115 | h3, 116 | h4, 117 | h5, 118 | h6 { 119 | color: var(--heading); 120 | } 121 | 122 | img { 123 | max-width: 100%; 124 | display: block; 125 | } 126 | 127 | input, 128 | textarea { 129 | line-height: 2; 130 | padding: 0.5rem; 131 | border: 1px solid var(--heading); 132 | border-radius: 0.25rem; 133 | } 134 | 135 | input:focus, 136 | textarea:focus { 137 | outline: none; 138 | box-shadow: 0 0 0 3px var(--yellow); 139 | } 140 | -------------------------------------------------------------------------------- /assets/css/neverMissAnUpdate.css: -------------------------------------------------------------------------------- 1 | .neverMissUpdate { 2 | width: 100vw; 3 | height: auto; 4 | display: flex; 5 | justify-content: center; 6 | background-color: var(--lightBlue); 7 | } 8 | .neverMissUpdateContainer h1 { 9 | font-size: 40px; 10 | } 11 | .neverMissUpdateContainer { 12 | height: 500px; 13 | width: 440px; 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | 19 | position: relative; 20 | width: 100%; 21 | } 22 | 23 | .neverMissUpdateContainer i { 24 | font-size: 65px; 25 | color: #2c86fc; 26 | } 27 | 28 | .neverMissUpdateContainer h2 { 29 | font-size: min(max(16px, 4vw), 18px); 30 | font-weight: 300; 31 | width: 421px; 32 | line-height: 28px; 33 | 34 | position: relative; 35 | width: 100%; 36 | max-width: 420px; 37 | } 38 | .neverMissUpdateContainer h3 { 39 | color: whitesmoke; 40 | } 41 | 42 | .neverMissUpdateContainer h1, 43 | h2, 44 | form, 45 | h5 { 46 | text-align: center; 47 | margin-top: 20px; 48 | color: var(--text); 49 | } 50 | 51 | .neverMissUpdateContainer .update-heading { 52 | /* color: black; */ 53 | font-weight: 600; 54 | opacity: 0.9; 55 | color: var(--heading); 56 | 57 | position: relative; 58 | width: 100%; 59 | font-size: min(max(18px, 10vw), 40px); 60 | } 61 | 62 | #neverMissUpdateemail { 63 | font-style: italic; 64 | font-weight: 600; 65 | color: var(--heroText); 66 | font-size: 14px; 67 | width: 550px; 68 | } 69 | 70 | .input-group-append { 71 | display: flex; 72 | } 73 | 74 | #button-addon2 { 75 | display: inline-block; 76 | font-weight: 400; 77 | font-size: 18px; 78 | color: #ffffff; 79 | text-align: center; 80 | vertical-align: middle; 81 | cursor: pointer; 82 | -webkit-user-select: none; 83 | -moz-user-select: none; 84 | -ms-user-select: none; 85 | user-select: none; 86 | background-color: var(--darkBlue); 87 | border: 1px solid transparent; 88 | padding: 0.6rem 0.75rem; 89 | line-height: 1.2; 90 | border-radius: 0.25rem; 91 | transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 92 | border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 93 | height: 50px; 94 | margin: 8px 10px; 95 | flex: 1; 96 | width: 200px; 97 | } 98 | 99 | #button-addon2:hover { 100 | background-color: white; 101 | color: var(--red); 102 | border-color: currentColor; 103 | } 104 | 105 | #button-addon2:active { 106 | box-shadow: var(--smShadow); 107 | transform: translateY(0.3rem); 108 | } 109 | 110 | h2 { 111 | color: var(--text); 112 | } 113 | 114 | .form-control { 115 | display: inline-block; 116 | width: 22rem; 117 | padding: 0.375rem 0.75rem; 118 | font-size: 1em; 119 | color: #495057; 120 | background-color: #fff; 121 | background-clip: padding-box; 122 | border: 1px solid #ced4da; 123 | border-radius: 0.25rem; 124 | transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 125 | } 126 | 127 | .neverMissUpdateContainer .input-group { 128 | position: relative; 129 | width: 100%; 130 | max-width: 430px; 131 | min-width: 320px; 132 | } 133 | 134 | .neverMissUpdateContainer .input-group-append { 135 | margin: auto 10px; 136 | } 137 | 138 | .neverMissUpdateContainer .input-group-append .form-control { 139 | flex: 4; 140 | font-size: 18px; 141 | height: 50px; 142 | width: 244px; 143 | } 144 | 145 | #neverMissUpdateemail { 146 | position: relative; 147 | width: 100%; 148 | max-width: 440px; 149 | min-width: 290px; 150 | padding: 0 10px; 151 | } 152 | 153 | svg { 154 | fill: red; 155 | } 156 | 157 | .svg-icon { 158 | filter: var(--svgIconFilter); 159 | } 160 | -------------------------------------------------------------------------------- /assets/css/contact.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primar-color: #757575; 3 | } 4 | 5 | #container { 6 | margin: 2rem 7rem; 7 | } 8 | 9 | a { 10 | text-decoration: none; 11 | color: rgb(13, 165, 211); 12 | } 13 | 14 | header p { 15 | font-size: 1.2rem; 16 | width: 60%; 17 | } 18 | 19 | header h1 { 20 | margin-bottom: 1rem; 21 | } 22 | 23 | main { 24 | display: grid; 25 | grid-template-columns: 1fr 1fr; 26 | grid-gap: 6rem; 27 | padding: 1rem; 28 | } 29 | 30 | @media (max-width: 640px) { 31 | #container { 32 | margin: 1rem 1rem; 33 | } 34 | main { 35 | grid-template-columns: 1fr; 36 | grid-gap: 2rem; 37 | } 38 | } 39 | 40 | @media (max-width: 768px) { 41 | #container { 42 | margin: 2rem 1rem; 43 | } 44 | main { 45 | grid-gap: 3rem; 46 | } 47 | } 48 | 49 | .cards { 50 | display: grid; 51 | grid-template-columns: 100%; 52 | grid-gap: 1.5rem; 53 | } 54 | 55 | .cards a { 56 | display: block; 57 | margin-top: 1rem; 58 | } 59 | 60 | form { 61 | display: grid; 62 | grid-template-columns: 100%; 63 | grid-gap: 1.5rem; 64 | } 65 | 66 | form input, 67 | select, 68 | textarea { 69 | padding: 0.3rem; 70 | } 71 | 72 | .form-input { 73 | display: grid; 74 | grid-template-columns: 100%; 75 | } 76 | 77 | .form-input.multiple { 78 | display: grid; 79 | grid-template-columns: 47% 47%; 80 | grid-column-gap: 6%; 81 | } 82 | 83 | #button { 84 | font-weight: 400; 85 | color: var(--red); 86 | text-align: center; 87 | cursor: pointer; 88 | -webkit-user-select: none; 89 | -moz-user-select: none; 90 | -ms-user-select: none; 91 | user-select: none; 92 | background-color: transparent; 93 | border: 2px solid var(--red); 94 | padding: 0.6rem 0.75rem; 95 | font-size: 1rem; 96 | line-height: 1.2; 97 | border-radius: 0.25rem; 98 | transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 99 | border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 100 | height: 50px; 101 | margin: 0.5rem 0; 102 | width: 8rem; 103 | } 104 | 105 | #button:hover { 106 | background-color: var(--red); 107 | color: white; 108 | transition: 0.3s ease; 109 | } 110 | 111 | textarea[name='message'] { 112 | width: 100%; 113 | height: 12rem; 114 | resize: none; 115 | padding: 0.8rem 1.2rem; 116 | display: inline-block; 117 | border: 1px solid #ccc; 118 | border-radius: 4px; 119 | margin: 0.5rem 0rem; 120 | } 121 | 122 | input[type='text'] { 123 | width: 100%; 124 | padding: 0.8rem 1.2rem; 125 | margin: 0.5rem 0; 126 | display: inline-block; 127 | border: 1px solid #ccc; 128 | border-radius: 4px; 129 | box-sizing: border-box; 130 | } 131 | 132 | input[type='email'] { 133 | width: 100%; 134 | padding: 0.8rem 1.2rem; 135 | margin: 0.5rem 0; 136 | display: inline-block; 137 | border: 1px solid #ccc; 138 | border-radius: 4px; 139 | box-sizing: border-box; 140 | } 141 | 142 | input[type='tel'] { 143 | width: 100%; 144 | padding: 0.8rem 1.2rem; 145 | margin: 0.5rem 0; 146 | display: inline-block; 147 | border: 1px solid #ccc; 148 | border-radius: 4px; 149 | box-sizing: border-box; 150 | } 151 | 152 | select { 153 | width: 100%; 154 | padding: 0.8rem 1rem; 155 | margin: 0.5rem 0; 156 | display: inline-block; 157 | border: 1px solid #ccc; 158 | border-radius: 4px; 159 | box-sizing: border-box; 160 | } 161 | 162 | select:required:invalid { 163 | color: #666; 164 | } 165 | option[value=''][disabled] { 166 | display: none; 167 | } 168 | option { 169 | color: #000; 170 | } 171 | 172 | h1 { 173 | font-size: 2.5rem; 174 | font-weight: bold; 175 | } 176 | 177 | .form h2 { 178 | font-size: 32px; 179 | font-weight: bold; 180 | } 181 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | let currentScrollY = 0; 2 | let showScrollButton = false; 3 | 4 | function onScroll() { 5 | currentScrollY = window.pageYOffset; 6 | showScrollButton = Boolean(currentScrollY > 1); 7 | if (typeof scrollButton !== 'undefined' && scrollButton !== null) { 8 | showScrollButton 9 | ? scrollButton.classList.remove('scroll-to-top-wrapper--hide') 10 | : scrollButton.classList.add('scroll-to-top-wrapper--hide'); 11 | } 12 | 13 | if (currentScrollY > 0) { 14 | mainHeader.classList.add('scroll'); 15 | logo.style.height = '80px'; 16 | } else { 17 | mainHeader.classList.remove('scroll'); 18 | logo.style.height = '80px'; 19 | } 20 | } 21 | 22 | window.onload = function () { 23 | main = document.getElementById('main'); 24 | mainHeader = document.querySelector('header'); 25 | logo = document.querySelector('.logo'); 26 | scrollButton = document.getElementById('scroll-to-top-wrapper'); 27 | document.addEventListener('scroll', onScroll, false); 28 | }; 29 | 30 | // modals 31 | 32 | // document.getElementById('loginModal1').addEventListener('click', function() { 33 | // document.getElementById('loginModal1').style.display = 'block' 34 | // } 35 | 36 | let loginModal = document.getElementById('loginModal1'); 37 | let registerModal = document.getElementById('registerModal1'); 38 | let loginBtn = document.getElementById('login'); 39 | let registerBtn = document.getElementById('register'); 40 | let loginClose = document.getElementsByClassName('login-close')[0]; 41 | let registerClose = document.getElementsByClassName('register-close')[0]; 42 | let password = document.getElementById('password'); 43 | let eye = document.getElementById('visibility'); 44 | let reg = document.querySelector('.register'); 45 | let log = document.querySelector('.login'); 46 | /* Password visiblity toggle */ 47 | if (eye != null) { 48 | eye.onclick = function () { 49 | // Toggle the type attribute 50 | const passwordState = 51 | password.getAttribute('type') === 'password' ? 'text' : 'password'; 52 | password.setAttribute('type', passwordState); 53 | 54 | // Toggle color 55 | passwordState === 'password' 56 | ? (eye.style.color = '#757575') 57 | : (eye.style.color = '#FD6854'); 58 | }; 59 | } 60 | 61 | /* Password visibility toggle end */ 62 | /*Toggling modal using bottom links*/ 63 | if (reg != null) { 64 | reg.onclick = function () { 65 | if (registerModal.style.display === 'block') { 66 | return; 67 | } 68 | loginModal.style.display = 'none'; 69 | registerModal.style.display = 'block'; 70 | /*let regCheck=document.getElementById("toggle-on") 71 | regCheck.checked=true*/ 72 | }; 73 | } 74 | 75 | if (log != null) { 76 | log.onclick = function () { 77 | if (loginModal.style.display === 'block') { 78 | return; 79 | } 80 | registerModal.style.display = 'none'; 81 | loginModal.style.display = 'block'; 82 | /*let logCheck=document.getElementById("toggle-off") 83 | logCheck.checked=true*/ 84 | }; 85 | } 86 | 87 | if (loginBtn != null) { 88 | loginBtn.onclick = function () { 89 | if (loginModal.style.display === 'block') { 90 | return; 91 | } 92 | registerModal.style.display = 'none'; 93 | loginModal.style.display = 'block'; 94 | }; 95 | } 96 | 97 | if (registerBtn != null) { 98 | registerBtn.onclick = function () { 99 | if (registerModal.style.display === 'block') { 100 | return; 101 | } 102 | loginModal.style.display = 'none'; 103 | registerModal.style.display = 'block'; 104 | }; 105 | } 106 | 107 | /***loginClose.onclick = function () { 108 | loginModal.style.display = 'none'; 109 | }; 110 | registerClose.onclick = function () { 111 | registerModal.style.display = 'none'; 112 | };***/ 113 | 114 | window.onclick = function (event) { 115 | /*if (event.target == modal) { 116 | modal.style.display = "none"; //modal is not define.Why? 117 | }*/ 118 | if (event.target == loginModal) { 119 | loginModal.style.display = 'none'; 120 | } else if (event.target == registerModal) { 121 | registerModal.style.display = 'none'; 122 | } 123 | }; 124 | -------------------------------------------------------------------------------- /assets/images/logos/Amazon_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/js/animate.js: -------------------------------------------------------------------------------- 1 | // for all headings of sections 2 | headingsObserver = new IntersectionObserver( 3 | (entries, observer) => { 4 | entries.forEach((entry) => { 5 | if (!entry.isIntersecting) { 6 | entry.target.style.opacity = '0'; 7 | return; 8 | } else { 9 | entry.target.style.animation = `small-from-bottom 1s forwards`; 10 | observer.unobserve(entry.target); 11 | } 12 | }); 13 | }, 14 | { rootMargin: '-150px' } 15 | ); 16 | 17 | // for features section 18 | const mainContent = document.querySelector('.feature '); 19 | const leftChildren = mainContent.querySelectorAll(':scope .left-part'); 20 | const rightChildren = mainContent.querySelectorAll(':scope .right-part'); 21 | const featuresHeading = document.querySelector('.features-heading'); 22 | headingsObserver.observe(featuresHeading); 23 | leftChildrenObserver = new IntersectionObserver( 24 | (children, observer) => { 25 | children.forEach((child) => { 26 | if (!child.isIntersecting) { 27 | child.target.style.opacity = '0'; 28 | return; 29 | } else { 30 | child.target.classList.add('from-left'); 31 | observer.unobserve(child.target); 32 | } 33 | }); 34 | }, 35 | { rootMargin: '-150px' } 36 | ); 37 | 38 | leftChildren.forEach((child) => { 39 | leftChildrenObserver.observe(child); 40 | }); 41 | 42 | rightChildrenObserver = new IntersectionObserver( 43 | (children, observer) => { 44 | children.forEach((child) => { 45 | if (!child.isIntersecting) { 46 | child.target.style.opacity = '0'; 47 | return; 48 | } else { 49 | child.target.classList.add('from-right'); 50 | observer.unobserve(child.target); 51 | } 52 | }); 53 | }, 54 | { rootMargin: '-150px' } 55 | ); 56 | 57 | rightChildren.forEach((child) => { 58 | rightChildrenObserver.observe(child); 59 | }); 60 | 61 | //feature section ends 62 | //companies logo section 63 | const mainCompanySection = document.querySelector('.company-logo-section'); 64 | const companyLogoTitle = document.querySelector('.companies-title-section'); 65 | const companyLogos = mainCompanySection.querySelectorAll( 66 | ':scope .company-logo' 67 | ); 68 | bottomSmallPopup = new IntersectionObserver( 69 | (logos, observer) => { 70 | logos.forEach((logo) => { 71 | if (!logo.isIntersecting) { 72 | return; 73 | } else { 74 | logo.target.style.animation = `small-from-bottom 0.75s ${logo.target.dataset.delay} forwards`; 75 | observer.unobserve(logo.target); 76 | } 77 | }); 78 | }, 79 | { rootMargin: '-100px' } 80 | ); 81 | 82 | companyLogos.forEach((logo) => { 83 | logo.style.opacity = '0'; 84 | bottomSmallPopup.observe(logo); 85 | }); 86 | headingsObserver.observe(companyLogoTitle); 87 | //logo section ends here 88 | //testimonial section 89 | const testimonialHeading = document.querySelector('.testimonial_heading'); 90 | const testimonialItem = document.querySelectorAll('.testimonial_item'); 91 | bottomMediumPopup = new IntersectionObserver( 92 | (entries, observer) => { 93 | entries.forEach((entry) => { 94 | if (!entry.isIntersecting) { 95 | return; 96 | } else { 97 | entry.target.style.animation = `medium-from-bottom 0.5s ${entry.target.dataset.delay} forwards`; 98 | observer.unobserve(entry.target); 99 | } 100 | }); 101 | }, 102 | { rootMargin: '-50px' } 103 | ); 104 | testimonialItem.forEach((item) => { 105 | item.style.opacity = '0'; 106 | bottomSmallPopup.observe(item); 107 | }); 108 | headingsObserver.observe(testimonialHeading); 109 | 110 | //testimonial section ends here 111 | //pricing section 112 | const pricingHeader = document.querySelector('.pricing-header'); 113 | headingsObserver.observe(pricingHeader); 114 | const pricingCards = document.querySelectorAll('.price-card'); 115 | pricingCards.forEach((card) => { 116 | card.style.opacity = '0'; 117 | bottomMediumPopup.observe(card); 118 | }); 119 | 120 | //pricing section ends here 121 | //logos in pricing section 122 | const mainSection = document.querySelector('.wrapper'); 123 | const iconButtons = mainSection.querySelectorAll(':scope .button'); 124 | iconButtons.forEach((button) => { 125 | button.style.opacity = '0'; 126 | bottomSmallPopup.observe(button); 127 | }); 128 | //end 129 | -------------------------------------------------------------------------------- /assets/css/testimonials.css: -------------------------------------------------------------------------------- 1 | .testimonial-section { 2 | margin-top: 20px; 3 | background-color: var(--mainbackground); 4 | } 5 | 6 | #testimonials h1 { 7 | font-size: 3rem; 8 | text-align: center; 9 | color: var(--heroText); 10 | font-weight: 600; 11 | } 12 | 13 | #testimonials p { 14 | margin: 10px auto 0; 15 | padding: 0 26%; 16 | text-align: center; 17 | color: var(--text); 18 | } 19 | 20 | [data-theme='dark'] #testimonial > p { 21 | color: #fff; 22 | } 23 | 24 | #testimonial-carousel { 25 | width: 80%; 26 | margin: 25px auto; 27 | } 28 | 29 | #testimonial-carousel .carousel-inner { 30 | display: flex; 31 | align-items: center; 32 | margin-top: 36px; 33 | } 34 | .test-per-test { 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | margin-top: 2em; 39 | } 40 | 41 | .test-per-test img { 42 | margin-right: 1em; 43 | } 44 | 45 | #testimonial-carousel .carousel-item { 46 | display: inline-block; 47 | width: 33%; 48 | border-radius: 5px; 49 | background-color: transparent; 50 | margin: 20px; 51 | padding: 20px 2px; 52 | } 53 | 54 | #testimonial-carousel .carousel-item img { 55 | border-radius: 50%; 56 | } 57 | .testimonial-image { 58 | width: 28%; 59 | border-radius: 5%; 60 | } 61 | em.testimonial-text { 62 | width: 72%; 63 | display: inline-block; 64 | text-align: left; 65 | /* position: absolute; 66 | top: 16em; */ 67 | margin: 0.5em 1em; 68 | color: var(--text); 69 | } 70 | h3.testimonial-text { 71 | margin-top: 10px; 72 | text-align: left; 73 | color: #858585; 74 | } 75 | 76 | .testimonial-text span { 77 | font-weight: bold; 78 | color: var(--heading); 79 | font-size: 1.3em; 80 | } 81 | .test-per { 82 | display: flex; 83 | width: 100%; 84 | margin: 1.3em 0; 85 | } 86 | .quote-box { 87 | width: auto; 88 | height: auto; 89 | margin: 0 auto; 90 | background: whitesmoke; 91 | padding: 20px; 92 | text-align: center; 93 | font-style: italic; 94 | color: #757575; 95 | font-family: arial; 96 | position: relative; 97 | font-size: var(--smText); 98 | border-radius: 10px; 99 | box-shadow: 0 10px 10px #bababa; 100 | } 101 | 102 | @media screen and (max-width: 1302px) { 103 | #testimonial-carousel { 104 | width: 90%; 105 | } 106 | } 107 | @media screen and (max-width: 1224px) { 108 | #testimonial-carousel { 109 | width: 100%; 110 | margin: 20px 2px; 111 | } 112 | #testimonial-carousel .carousel-item { 113 | margin: 8px; 114 | } 115 | } 116 | 117 | @media screen and (max-width: 970px) { 118 | #testimonial-carousel { 119 | margin: 30px 40px; 120 | } 121 | #testimonial-carousel .carousel-inner { 122 | flex-direction: column; 123 | } 124 | 125 | #testimonial-carousel .carousel-item { 126 | width: 80%; 127 | margin: 30px 5%; 128 | } 129 | .testimonial-text span { 130 | font-size: 1.6em; 131 | } 132 | .test-per { 133 | justify-content: space-around; 134 | } 135 | .test-per em.testimonial-text { 136 | margin-top: 2.4em; 137 | } 138 | .quote { 139 | width: 42%; 140 | } 141 | .testimonial-image { 142 | width: 16%; 143 | } 144 | } 145 | 146 | @media screen and (max-width: 812px) { 147 | #testimonial-carousel { 148 | margin: 30px 20px; 149 | } 150 | #testimonial-carousel .carousel-item { 151 | width: 80%; 152 | margin: 15px 5%; 153 | } 154 | .quote { 155 | width: 48%; 156 | } 157 | } 158 | 159 | @media (max-width: 663px) { 160 | #testimonial-carousel { 161 | margin: 30px 10px; 162 | } 163 | .quote { 164 | width: 65%; 165 | } 166 | #testimonial-carousel .carousel-item { 167 | margin-top: 15px; 168 | margin-bottom: 15px; 169 | } 170 | .testimonial-image { 171 | width: 16%; 172 | height: 60%; 173 | } 174 | .test-per em.testimonial-text { 175 | margin-top: 1.6em; 176 | } 177 | } 178 | @media (max-width: 520px) { 179 | .quote { 180 | width: 70%; 181 | } 182 | #testimonial-carousel .carousel-item { 183 | margin: 10px 5%; 184 | width: 80%; 185 | } 186 | .test-per em.testimonial-text { 187 | margin-top: 1.2em; 188 | } 189 | } 190 | @media (max-width: 426px) { 191 | .quote { 192 | width: 80%; 193 | } 194 | .test-per em.testimonial-text { 195 | margin-top: 0.4em; 196 | } 197 | #testimonial-carousel .carousel-item { 198 | margin: 10px 5%; 199 | width: 80%; 200 | } 201 | } 202 | -------------------------------------------------------------------------------- /assets/images/logos/Google_Play_Services_logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/logos/Appodeal_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | 10 | 20 | 27 | 35 | 41 | 46 | 52 | 57 | 60 | 66 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /CONTRIBUTORS.md: -------------------------------------------------------------------------------- 1 | **[Back](/README.md/)** 2 | 3 | **Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github). 4 | 5 | ## Contributors 6 | 7 | This is a list showing the GitHub usernames of all who have contributed to this open-source project! **Make sure to add yourself and submit a pull request if you've contributed.** 8 | 9 | - [@dhakshinesh](https://github.com/dhakshinesh) 10 | - [@Mehul1011](https://github.com/mehul1011) 11 | - [@kelvinchan2406](https://github.com/kelvinchan2406) 12 | - [@Dhamodhar-DDR](https://github.com/Dhamodhar-DDR) 13 | - [@chetas411](https://github.com/chetas411) 14 | - [@leonarhv](https://github.com/leonarhv) 15 | - [@Guitarhub786](https://github.com/guitarhub786) 16 | - [@comebackid87](https://github.com/comebackid87) 17 | - [@aapetsi](https://github.com/aapetsi) 18 | - [@leonarhv](https://github.com/leonarhv) 19 | - [@sherinechally](https://github.com/sherinechally) 20 | - [@Camilo318](https://github.com/Camilo318) 21 | - [@RedSquirrrel](https://github.com/RedSquirrrel) 22 | - [@leonarhv](https://github.com/leonarhv) 23 | - [@sherinechally](https://github.com/sherinechally) 24 | - [@devlearning9874](https://github.com/devlearning9874) 25 | - [@rashidmakki](https://github.com/rashidmakki) 26 | - [@pritesh11-10](https://github.com/pritesh11-10) 27 | - [@armedev](https://github.com/armedev) 28 | - [@sridarshan-webjava](https://github.com/sridarshan-webjava) 29 | - [@mohitms007](https://github.com/mohitms007) 30 | - [@monddelmundo](https://github.com/monddelmundo) 31 | - [@wroblewskim95](https://github.com/wroblewskim95) 32 | - [@SkyC0der](https://github.com/SkyC0der) 33 | - [@Agilulfe](https://github.com/Agilulfe) 34 | - [@botarsh](https://github.com/botarsh) 35 | - [@afrazz](https://github.com/afrazz) 36 | - [@f0rSaaa](https://github.com/f0rSaaa) 37 | - [@f0rSaaa](https://github.com/f0rSaaa) 38 | - [@SkyC0der](https://github.com/SkyC0der) 39 | - [@Agilulfe](https://github.com/Agilulfe) 40 | - [@leonyangela](https://github.com/leonyangela) 41 | - [@shray0027](https://githun.com/shray0027) 42 | - [@AnastasiaCortes](https://github.com/AnastasiaCortes) 43 | - [@GoGi2712](https://github.com/GoGi2712) 44 | - [@girishsontakke](https://github.com/girishsontakke) 45 | - [@Agilulfe](https://github.com/Agilulfe) 46 | - [@Agilulfe](https://github.com/Agilulfe) 47 | - [@AKSHAYBHOPANI](https://github.com/akshaybhopani) 48 | - [@shray0027](https://githun.com/shray0027) 49 | - [@AnastasiaCortes](https://github.com/AnastasiaCortes) 50 | - [@jomefavourite](https://github.com/jomefavourite) 51 | - [@bbtora](https://github.com/bbtora) 52 | - [@carmeniancu](https://github.com/CarmenIancu) 53 | - [@matthewdbrock1968](https://github.com/matthewdbrock1968) 54 | - [@jeelpatel17](https://github.com/jeelpatel17) 55 | - [@navdeepsingh4298](https://github.com/navdeepsingh4298) 56 | - [@shafayetrajit](https://github.com/ShafayetRajit) 57 | - [@Krypton](https://github.com/KryptonBD) 58 | - [@Surya742](https://github.com/Surya742) 59 | - [@arnabuchiha](https://github.com/arnabuchiha) 60 | - [@Theo](https://github.com/theodorenguyen45) 61 | - [@thomashewett](https://github.com/thomashewett) 62 | - [@TaylorJonesTRT](https://github.com/taylorjonestrt) 63 | - [@initialsky0](https://github.com/initialsky0) 64 | - [@AmrutaKoshe](https://github.com/AmrutaKoshe) 65 | - [@aviad198](https://github.com/aviad198) 66 | - [@BhuvaneshPatil](https://github.com/BhuvaneshPatil) 67 | - [@khoaHyh](https://github.com/khoaHyh) 68 | - [@xafm](https://github.com/xafm) 69 | - [@kofosu2289](https://github.com/kofosu2289) 70 | - [@Tanishh2207](https://github.com/Tanish2207) 71 | - [@dabralyogesh](https://github.com/dabralyogesh) 72 | - [@vggithub7](https://github.com/vggithub7) 73 | - [@StrykerKent](https://github.com/StrykerKent) 74 | - [@ivioje](https://github.com/ivioje) 75 | - [@dpcoolmufa](https://github.com/dpcoolmufa) 76 | - [@WayneMacMavis](https://github.com/WayneMacMavis) 77 | - [@theenthusiastprogrammer](https://github.com/theenthusiastprogrammer) 78 | - [@Gauravkkumar](https://github.com/Gauravkkumar) 79 | - [@VrajKD](https://github.com/VrajKD) 80 | - [@amandabrbz](https://github.com/amandabrbz) 81 | - [@SMD-1](https://github.com/SMD-1) 82 | - [@KateKalashnikova](https://github.com/KateKalashnikova) 83 | - [@AyeshaMunwar](https://github.com/AyeshaMunawar-profile) 84 | - [@jihmmi](https://github.com/jihmmi) 85 | [@RojinPm](https://github.com/RojinPm) 86 | - [@Haider-Ali-Dev](https://github.com/Haider-Ali-Dev) 87 | - [@KarlCullington](https://github.com/KarlCullington) 88 | - [@Beekaybanky](https://github.com/Beekaybanky) 89 | - [@NoelCodes](https://github.com/NoelCov) 90 | -------------------------------------------------------------------------------- /assets/js/dark-mode.js: -------------------------------------------------------------------------------- 1 | const toggleContainer = document.querySelector('#toggle-container'); 2 | const inputCheckDesktop = document.querySelectorAll( 3 | 'input[type="checkbox"]' 4 | )[1]; 5 | const neverMissUpdate = document.querySelector('.neverMissUpdate'); 6 | const content = document.querySelector('.hero_content'); 7 | const inputCheckMobile = document.querySelectorAll('input[type="checkbox"]')[0]; 8 | inputCheckMobile.addEventListener('change', switchTheme); 9 | // const contentPara = document.querySelector('.hero_content > p'); 10 | // const contenttitle = document.querySelector('#hero-heading'); 11 | // const toggleBar = document.querySelector('#toggle-bar'); 12 | // const updateBanner = document.querySelector('.neverMissUpdate'); 13 | // const updateHeading = document.querySelector('.update-heading'); 14 | // const updateHeading2 = document.querySelector('.update-heading2'); 15 | // const updateHeading5 = document.querySelector('.updateHeading5'); 16 | // const footerLink = document.querySelectorAll('.sub-footer-link > li > a'); 17 | // const footerIcons = document.querySelectorAll('.icon'); 18 | // const teamMemberName = document.querySelectorAll('.team-member h3'); 19 | // const footerrow = document.querySelectorAll('.footer-column>h2:nth-child(1)'); 20 | 21 | function switchTheme(event) { 22 | if (event.target.checked) { 23 | document.documentElement.setAttribute('data-theme', 'dark'); 24 | localStorage.setItem('theme', 'dark'); 25 | } else { 26 | document.documentElement.setAttribute('data-theme', 'light'); 27 | localStorage.setItem('theme', 'light'); 28 | } 29 | } 30 | 31 | // check local storage for theme 32 | const currentTheme = localStorage.getItem('theme'); 33 | if (currentTheme) { 34 | document.documentElement.setAttribute('data-theme', currentTheme); 35 | if (currentTheme === 'dark') { 36 | inputCheckMobile.checked = true; 37 | inputCheckDesktop.checked = true; 38 | } 39 | } 40 | 41 | //event listener to toggle betwen light and dark modes 42 | inputCheckDesktop.addEventListener('change', switchTheme); 43 | 44 | // //dark mode 45 | // function changeToDarkMode() { 46 | // body.style.background = '#132743'; 47 | // body.style.color = '#fff'; 48 | // content.style.color = '#eaeaea'; 49 | // contentPara.style.color = '#aeaeae'; 50 | // toggleBar.style.background = '#01a9b4'; 51 | // contenttitle.style.color = '#FFFFFF'; 52 | // footerrow.forEach((item, index) => { 53 | // footerrow[index].style.color = '#00FFFF'; 54 | // }); 55 | // updateBanner.style.backgroundColor = '#0B1728'; 56 | // updateHeading.style.color = '#fff'; 57 | // updateHeading2.style.color = '#fff'; 58 | // updateHeading5.style.color = '#fff'; 59 | // for (i = 0; i < footerLink.length; i++) footerLink[i].style.color = 'white'; 60 | // footerIcons.forEach((e) => (e.style.color = '#000')); 61 | // this.changeTeamMemberColor('#fff'); 62 | // } 63 | 64 | //light mode 65 | // function changeToLightMode() { 66 | // contenttitle.style.color = '#000'; 67 | // body.style.background = '#fff'; 68 | // body.style.color = '#000'; 69 | // content.style.color = '#1d1c1c'; 70 | // contentPara.style.color = 'rgb(90, 90, 90)'; 71 | // toggleBar.style.background = '#ebecf1'; 72 | // contentTitle.style.color = 'black'; 73 | // //contactBanner.style.background = '#ebecf1'; 74 | // updateBanner.style.backgroundColor = '#ebecf1'; 75 | // updateHeading.style.color = '#1d1c1c'; 76 | // updateHeading2.style.color = '#1d1c1c'; 77 | // updateHeading5.style.color = '#1d1c1c'; 78 | // this.changeTeamMemberColor('#808080'); 79 | // } 80 | 81 | // //callback function to toggle between modes 82 | // function changeBackground() { 83 | // if (inputCheck.checked) { 84 | // document.documentElement.setAttribute('data-theme', 'dark'); 85 | // changeToDarkMode(); 86 | // localStorage.setItem('theme', 'dark'); 87 | // } else { 88 | // document.documentElement.setAttribute('data-theme', 'light'); 89 | // changeToLightMode(); 90 | // localStorage.setItem('theme', 'light'); 91 | // } 92 | // } 93 | 94 | // //event listener to toggle between light and dark modes 95 | // inputCheck.addEventListener('change', changeBackground); 96 | 97 | // //to retain the mode with the help of local storage 98 | // const currentTheme = localStorage.getItem('theme'); 99 | // if (currentTheme) { 100 | // document.documentElement.setAttribute('data-theme', currentTheme); 101 | // if (currentTheme === 'dark') { 102 | // inputCheck.checked = true; 103 | // changeToDarkMode(); 104 | // } 105 | // } 106 | 107 | // function changeTeamMemberColor(color) { 108 | // console.log('called'); 109 | // document.querySelector('#team>h2').style.color = color; 110 | // Array.from(teamMemberName).forEach((item) => { 111 | // item.style.color = color; 112 | // }); 113 | // } 114 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | > ### **UPDATE:** Hacktoberfest 2020 Event Concluded! 3 | > 4 | > **This project started as a project for Hacktoberfest 2020, Thank you to everyone that participated and made this project what it is today and we look forward to seeing you all at Hacktoberfest 2021!. 5 | > Feel free to continue contributing to the master branch, you can check out the following links to see the project as it was at the end of the event:** 6 | > - [Live Preview](https://keiko-corp.netlify.app/) 7 | > - [Code Base](https://github.com/zero-to-mastery/Keiko-Corp/tree/HACKTOBERFEST-2020-EDITION) - (PRs to this branch will not be accepted) 8 | > 9 | > **Interested in more events? keep an eye on our Events page [HERE](https://zerotomastery.io/events?utm_source=github&utm_medium=keiko-corp)** 10 | --- 11 | 12 | 13 | 14 | # Keikocorp.com 15 | 16 | Welcome to the HTML challenge for Hacktoberfest 2020 ([What is Hacktoberfest?](https://github.com/zero-to-mastery/coding_challenge-31/blob/master/README.md#what-is-hacktoberfest)) A project with beginners and aspiring developers in mind, utilizing HTML, CSS & maybe a dash of JavaScript to achieve a simplistic yet elegant website for the greatest start up of all time; Keiko Corp. 17 | 18 | Everyone is encouraged to participate, regardless of your skill level. This is a practice project and should be considered a playground. This project has plenty of options for collaboration, here are just a few of the many that we welcome pull requests for:- 19 | 20 | - HTML elements. 21 | - CSS styling. 22 | - Images. 23 | - Text/Copy. 24 | - Documentation. 25 | - Fix Typos, Code Bugs or Accessibility oversights. 26 | 27 | ## Project Brief 28 | 29 | Incredibly, Bruno the CEO of Keiko Corp has built the fastest growing tech start up in Silicon Valley, without ever having launched a website. Bruno's marketing team is insisting that they need a website in order to gain the confidence of the potential clients to reach this quarters sales targets. 30 | 31 | Bruno has put together a quick [Figma mockup](https://www.figma.com/file/NY0Do1PFf4xl0ZuSTA1X9U/Keiko-Corp-Hacktoberfest-Project?node-id=2%3A10g) to demonstrate the layout and simplistic design they are looking for. Although Bruno did request the website be as immaculate and as impressive as his hair, the design is totally open to interpretation and modification during the first iteration of development. 32 | 33 | ## Getting Started 34 | 35 | Ok, so you have read the brief and checked out the [designs](https://www.figma.com/file/NY0Do1PFf4xl0ZuSTA1X9U/Keiko-Corp-Hacktoberfest-Project?node-id=2%3A10). Ready to contribute, but not sure how or where to start? 36 | 37 | > If you've never made a pull request before, or participated in an open-source project, we recommend taking a look at our [Start Here Guidelines](https://github.com/zero-to-mastery/start-here-guidelines). This repo has everything you need to learn about open-source, with a step-by-step guide to making your very first PR. 38 | > Once you've got your feet wet, you're ready to come back and dive into Hacktoberfest fun! 39 | 40 | 1. First up you need to fork (make a copy) this repo to your Github account. 41 | 2. Clone (download) your fork to your computer. 42 | 3. Set your streams so you can sync your clone with the original repo (get the latest updates). 43 | 44 | - `git remote add upstream https://github.com/zero-to-mastery/Keiko-Corp.git` 45 | - `git pull upstream master` 46 | - The above 2 commands will synchronize your forked version of the project with the actual repository. 47 | 48 | 4. Create a branch for your task and complete the task. 49 | 5. Pull from the upstream again, like we did in step 3. This is to ensure we still have the latest code. 50 | - `git pull upstream master` 51 | 6. Commit and push the code to your fork. 52 | 7. Create a pull request to have the changes merged into the origin. 53 | - Ensure you add to the comments of the pull request `fixes #`, replacing **** with the number of your issue will automatically close the issue when the pull request is merged. 54 | 55 | ## Rules, Notes & Guidelines 56 | 57 | To ensure everyone has the best chance at participating in this project. Please follow these simple guidelines where ever possible:- 58 | 59 | - Simplicity is key: There is no need for React, Sass etc here. Let's stick with vanilla HTML, CSS & JavaScript. 60 | - Commenting: Try to comment your code, so everyone can understand what is going on and could learn a thing or two. 61 | - Respect Content: Only use images/content that we are licensed to use. 62 | 63 | ## Disclaimer 64 | 65 | Keiko Corp is a fictitious company, initially fabricated back in 2018 to enrich the learning process for the students of the Junior to Senior course. Keiko Corp, Bruno & his impeccable hair have since featured in several [Zero To Mastery](https://academy.zerotomastery.io/p/academy?utm_source=github&utm_campaign=keiko-corp-hf20) courses becoming the favourite topic of conversation amongst students. 66 | 67 | Zero To Mastery receives no commission or incentives for your participating in either building this website or entering the Hacktoberfest event. 68 | -------------------------------------------------------------------------------- /assets/images/logos/intel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/css/blog_page.css: -------------------------------------------------------------------------------- 1 | .heading { 2 | text-align: center; 3 | padding: 2rem; 4 | } 5 | /*********Box Shadow*****/ 6 | .hover:hover { 7 | box-shadow: 0px 0px 30px 7px rgba(97, 58, 58, 0.4); 8 | -webkit-box-shadow: 0px 0px 30px 7px rgba(97, 58, 58, 0.4); 9 | -moz-box-shadow: 0px 0px 30px 7px rgba(97, 58, 58, 0.4); 10 | cursor: pointer; 11 | } 12 | 13 | .blog-container, 14 | .newsletter-container { 15 | width: 95%; 16 | max-width: 1200px; 17 | margin: auto; 18 | } 19 | 20 | body { 21 | font-family: 'Roboto'; 22 | } 23 | 24 | .main { 25 | margin: 2em 0; 26 | background-color: var(--mainBackground); 27 | margin: 0 !important; 28 | } 29 | 30 | .newsletter { 31 | margin-top: var(--mdMargin); 32 | padding-bottom: var(--lgPadding); 33 | border-bottom: 1px solid rgba(0, 0, 0, 0.253); 34 | } 35 | 36 | .newsletter h2 { 37 | font-size: var(--smHeading); 38 | text-align: center; 39 | } 40 | 41 | .newsletter__signup { 42 | margin-top: var(--mdPadding); 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | width: 50%; 47 | margin: 1.5rem auto 0.5rem; 48 | } 49 | 50 | .newsletter__signup input { 51 | width: 70%; 52 | border-radius: 0.5em; 53 | } 54 | 55 | .newsletter__signup button { 56 | width: 50%; 57 | padding: var(--btnPadding); 58 | background: #fe6655; 59 | border-radius: 0.5em; 60 | margin-left: 1rem; 61 | color: #fff; 62 | text-transform: uppercase; 63 | cursor: pointer; 64 | transition: color 0.15s ease-in-out; 65 | background-color: 0.15s ease-in-out; 66 | border-color: 0.15s ease-in-out; 67 | box-shadow: 0.15s ease-in-out; 68 | } 69 | 70 | .blog { 71 | padding-top: var(--lgPadding); 72 | } 73 | 74 | .blog__pictures { 75 | color: #fff; 76 | margin-bottom: 4em; 77 | } 78 | 79 | .blog__picture { 80 | position: relative; 81 | width: 100%; 82 | background: rgba(0, 0, 0, 0.609); 83 | height: 250px; 84 | border-radius: 0.5em; 85 | background-size: cover; 86 | } 87 | 88 | .blog__picture--content { 89 | position: absolute; 90 | left: 0; 91 | right: 0; 92 | bottom: 0; 93 | margin-bottom: 20px; 94 | text-align: center; 95 | padding: 0 40px 0; 96 | } 97 | 98 | .blog__picture--content h3 { 99 | margin-top: 1rem; 100 | font-size: clamp(1em, calc(3vmin + 1px), 3em); 101 | color: #fff; 102 | } 103 | 104 | .blog__picture--content p { 105 | text-transform: uppercase; 106 | } 107 | 108 | .blog__picture + .blog__picture { 109 | margin-top: 1.2em; 110 | } 111 | 112 | .blog__post + .blog__post { 113 | margin-top: 2em; 114 | } 115 | 116 | .blog__post--image { 117 | width: 100%; 118 | height: 200px; 119 | background: rgba(0, 0, 0, 0.383); 120 | border-radius: 0.5em; 121 | } 122 | 123 | .blog__post--content { 124 | /* align-self: center; */ 125 | margin: 1em 0; 126 | } 127 | 128 | .blog__post--content h4 { 129 | margin-bottom: 0.5em; 130 | } 131 | 132 | .blog__post--content p { 133 | /* font-size: 1.2rem; */ 134 | max-width: 620px; 135 | } 136 | 137 | .blog__post--content a { 138 | color: var(--text); 139 | font-weight: 700; 140 | } 141 | 142 | .loadmore { 143 | display: block; 144 | background: var(--red); 145 | border: 2px solid var(--red); 146 | padding: 0.7em 1.4em; 147 | border-radius: 18px; 148 | text-transform: uppercase; 149 | font-weight: 700; 150 | margin: 3em auto 0; 151 | color: white; 152 | } 153 | 154 | .loadmore:hover { 155 | display: block; 156 | background: var(--white); 157 | border: 2px solid var(--red); 158 | padding: 0.7em 1.4em; 159 | border-radius: 20px; 160 | text-transform: uppercase; 161 | font-weight: 700; 162 | margin: 3em auto 0; 163 | color: red; 164 | } 165 | 166 | /* DARK MODE 167 | [data-theme='dark'] .container { 168 | background: #343a40; 169 | } */ 170 | 171 | @media (min-width: 768px) { 172 | .newsletter { 173 | display: flex; 174 | justify-content: space-between; 175 | align-items: center; 176 | } 177 | 178 | .newsletter h2 { 179 | margin-left: 5rem; 180 | } 181 | 182 | .newsletter__signup { 183 | display: flex; 184 | margin-top: 0; 185 | } 186 | 187 | .newsletter__signup input { 188 | width: 100%; 189 | } 190 | 191 | .newsletter__signup button { 192 | margin-top: 0; 193 | margin-left: var(--xlMargin); 194 | } 195 | 196 | .blog__pictures { 197 | display: grid; 198 | grid-template-columns: repeat(3, auto); 199 | grid-template-areas: 200 | 'post1 post1 post2' 201 | 'post1 post1 post3'; 202 | grid-gap: 20px; 203 | } 204 | 205 | .blog__picture + .blog__picture { 206 | margin-top: 0; 207 | } 208 | .blog__post--image { 209 | margin-left: 20px; 210 | margin-right: 20px; 211 | } 212 | 213 | .post1 { 214 | grid-area: post1; 215 | height: auto; 216 | background-image: url('../images/blog/nature.jpg'); 217 | } 218 | .post2 { 219 | grid-area: post2; 220 | background-image: url('../images/blog/people.jpg'); 221 | } 222 | .post3 { 223 | grid-area: post3; 224 | background-image: url('../images/blog/dev.jpg'); 225 | } 226 | .post4 { 227 | background-image: url('../images/blog/meadow.jpg'); 228 | } 229 | .post5 { 230 | background-image: url('../images/blog/code.jpg'); 231 | } 232 | 233 | .overlay { 234 | background-color: #000; 235 | position: absolute; 236 | top: 0; 237 | right: 0; 238 | bottom: 0; 239 | left: 0; 240 | opacity: 0.4; 241 | border-radius: 0.5em; 242 | } 243 | 244 | .blog__post { 245 | display: flex; 246 | } 247 | 248 | .blog__post--image { 249 | margin-right: 40px; 250 | margin-left: 40px; 251 | max-width: 300px; 252 | } 253 | } 254 | -------------------------------------------------------------------------------- /assets/images/logos/samsung.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/images/about.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 56 | 57 | 58 | 61 | 62 | 65 | 67 | 69 | 71 | 72 | 74 | 75 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 86 | 88 | 91 | 93 | 94 | 96 | 98 | 100 | 103 | 105 | 108 | 110 | 112 | 114 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /assets/css/login.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-facebook: #3b5998; 3 | --color-google: #ea4335; 4 | --color-twitter: #1da1f2; 5 | --style-1-color: #009688; 6 | --style-2-color: #009688; 7 | --style-3-color: #009688; 8 | --style-4-color: #fd6854; 9 | } 10 | 11 | .button-card img { 12 | border: 1px solid #f1f1f1; 13 | border-radius: 5px; 14 | height: 950px; 15 | width: 400px; 16 | position: relative; 17 | } 18 | #loginModal1 { 19 | display: none; 20 | } 21 | 22 | #registerModal1 { 23 | display: block; 24 | } 25 | 26 | .modal-style-1 .modal-login { 27 | width: 100%; 28 | font-size: 13px; 29 | display: flex; 30 | justify-content: center; 31 | } 32 | 33 | .modal-header { 34 | padding: 0; 35 | margin-top: 1rem; 36 | margin-bottom: 1rem; 37 | } 38 | 39 | .modal-style-1 .modal-login .modal-header { 40 | border-bottom: none; 41 | position: relative; 42 | justify-content: center; 43 | } 44 | .modal-style-1 .modal-login h4 { 45 | color: var(--style-4-color); 46 | text-align: center; 47 | font-size: 18px; 48 | margin-top: 20px; 49 | border-bottom: 0; 50 | text-transform: uppercase; 51 | line-height: 1; 52 | letter-spacing: 3px; 53 | font-weight: 900; 54 | width: 100%; 55 | } 56 | .modal-style-1 .modal-header .close { 57 | position: absolute; 58 | right: 10px; 59 | top: -23px; 60 | background-color: transparent; 61 | } 62 | .modal-style-1 .close:focus, 63 | .modal-style-1 .close:active { 64 | outline: none !important; 65 | box-shadow: none; 66 | } 67 | .modal-style-1 .modal-login a { 68 | text-decoration: none; 69 | color: var(--style-4-color); 70 | } 71 | 72 | .modal-style-1 .modal-login form { 73 | width: 280px; 74 | margin: 0 auto; 75 | } 76 | 77 | .modal-style-1 .modal-login span.input-group-addon { 78 | width: 60px; 79 | text-align: center; 80 | border-radius: 7px 0 0 7px; 81 | border: 1px solid var(--style-4-color); 82 | padding: 11px; 83 | margin-right: 5px; 84 | color: #fff; 85 | background-color: var(--style-4-color); 86 | } 87 | .modal-style-1 .modal-login span.input-group-addon i { 88 | font-size: 16px; 89 | } 90 | 91 | #item_checkbox { 92 | padding-top: 10px; 93 | } 94 | 95 | .modal-style-1 input.form-control { 96 | padding: 10px; 97 | border-radius: 0 7px 7px 0; 98 | font-size: 13px; 99 | border: 2px solid var(--style-1-color); 100 | width: 70%; 101 | height: auto; 102 | } 103 | 104 | .modal-style-1 .btn-signin { 105 | border-radius: 10px; 106 | width: 60%; 107 | text-transform: uppercase; 108 | font-weight: 600; 109 | letter-spacing: 1.5px; 110 | background-color: var(--style-4-color); 111 | border: 1px solid var(--style-4-color); 112 | font-size: var(--lgText); 113 | height: var(--btnHeight); 114 | padding: 5px 8px; 115 | } 116 | 117 | .btn-signin { 118 | color: white; 119 | } 120 | 121 | .btn-signin:hover { 122 | background-color: white; 123 | color: #fe6655; 124 | border-color: currentColor; 125 | cursor: pointer; 126 | } 127 | .hint-text { 128 | margin-top: 1rem; 129 | } 130 | 131 | .modal-style-1 p.hint-text { 132 | text-align: center; 133 | } 134 | 135 | .modal-style-1 .register { 136 | color: var(--style-4-color); 137 | font-weight: 600px; 138 | } 139 | 140 | .modal-style-1 .social-login a { 141 | text-decoration: none; 142 | color: #fff; 143 | margin: 2px; 144 | height: 30px; 145 | display: inline-block; 146 | width: 30px; 147 | padding: 5px 0; 148 | text-align: center; 149 | cursor: pointer; 150 | border-radius: 50%; 151 | } 152 | .modal-style-1 .btn-facebook { 153 | background-color: var(--color-facebook); 154 | } 155 | 156 | .modal-style-1 .btn-google { 157 | background-color: var(--color-google); 158 | } 159 | 160 | .modal-style-1 .btn-twitter { 161 | background-color: var(--color-twitter); 162 | } 163 | 164 | .social-login { 165 | display: flex; 166 | flex-direction: row; 167 | justify-content: center; 168 | text-align: center; 169 | } 170 | 171 | .social-login a { 172 | text-align: center; 173 | justify-content: center; 174 | text-transform: uppercase; 175 | } 176 | 177 | .social-login a i { 178 | margin-right: 0.6rem; 179 | margin-left: 0.6rem; 180 | } 181 | 182 | #visibility { 183 | transform: translate(-33px, 10px); 184 | position: absolute; 185 | cursor: pointer; 186 | font-size: 20px; 187 | color: #757575; 188 | } 189 | 190 | .modal-content div { 191 | position: relative; 192 | display: block; 193 | width: 300px; 194 | margin: 0 auto; 195 | max-width: 400px; 196 | text-align: center; 197 | margin-bottom: 1rem; 198 | margin-top: 1rem; 199 | } 200 | 201 | .form-group { 202 | text-align: center; 203 | } 204 | 205 | .close { 206 | background-color: #0b0b1f; 207 | color: #aaa; 208 | float: right; 209 | font-size: 28px; 210 | font-weight: bold; 211 | } 212 | 213 | .close:hover, 214 | .close:focus { 215 | color: var(--style-4-color); 216 | text-decoration: none; 217 | cursor: pointer; 218 | } 219 | 220 | .dark.modal-style-1 .modal-content { 221 | background: #0b0b1f; 222 | color: #fff; 223 | width: 80vw; 224 | } 225 | .dark.modal-style-1 .close, 226 | .modal-style-1.dark .modal-login h4 { 227 | color: #fff; 228 | } 229 | 230 | .dark .text-danger { 231 | color: #777 !important; 232 | } 233 | @media only screen and (max-width: 360px) { 234 | .modal-style-1 .modal-login { 235 | width: 100%; 236 | margin: 0px; 237 | } 238 | 239 | .modal-style-1 .modal-login form { 240 | width: 100%; 241 | } 242 | } 243 | 244 | .main-container { 245 | width: 1140px; 246 | margin: 0 auto; 247 | } 248 | 249 | .main-container { 250 | text-align: center; 251 | margin-top: 1.5rem; 252 | font-size: var(--mdHeading); 253 | } 254 | 255 | .main-container h1 { 256 | text-align: center; 257 | } 258 | 259 | .text-12 { 260 | font-size: 12px; 261 | } 262 | 263 | .button-card { 264 | margin: 0 auto; 265 | box-shadow: 1px 2px 5px 2px #d1d1d1; 266 | padding: 30px; 267 | border-radius: 5px; 268 | max-width: 30vw; 269 | min-width: 300px; 270 | } 271 | .button-card img { 272 | border: 1px solid #f1f1f1; 273 | border-radius: 5px; 274 | height: 100%; 275 | width: 100%; 276 | position: relative; 277 | } 278 | 279 | .btn-theme { 280 | width: 100px; 281 | height: 35px; 282 | padding: 8px 16px; 283 | border-radius: 7px; 284 | color: white; 285 | text-decoration: none; 286 | } 287 | 288 | .btn-success { 289 | background-color: #28a745; 290 | border: 2px solid #28a745; 291 | } 292 | 293 | .btn-primary { 294 | border: 2px #28a745 solid; 295 | color: white; 296 | } 297 | 298 | .btn-primary:hover { 299 | background: #28a745; 300 | } 301 | 302 | /**#login{ 303 | color: whitesmoke; 304 | } 305 | 306 | #login:hover{ 307 | color: whitesmoke; 308 | }**/ 309 | 310 | .action-buttons { 311 | /*margin-bottom: 1rem; /* mb-3 */ 312 | margin: 1rem; 313 | text-align: center; 314 | padding: 6px; 315 | width: 100%; 316 | } 317 | 318 | .col { 319 | width: 100%; 320 | } 321 | 322 | .row { 323 | text-align: center; 324 | margin-top: 1rem; 325 | } 326 | 327 | div > a { 328 | cursor: pointer; 329 | } 330 | 331 | @media only screen and (max-width: 768px) { 332 | .button-card { 333 | margin: 60px auto; 334 | max-width: 80%; 335 | } 336 | } 337 | 338 | @media only screen and (max-width: 480px) { 339 | .button-card { 340 | max-width: 90vw; 341 | max-width: 70%; 342 | } 343 | 344 | .button-card .action-buttons { 345 | width: 100%; 346 | height: auto; 347 | } 348 | .modal-style-1 .modal-login { 349 | width: 100%; 350 | margin: 0px; 351 | } 352 | } 353 | @media only screen and (max-width: 380px) { 354 | .main-container { 355 | width: 100%; 356 | margin: 0 5px; 357 | } 358 | .button-card { 359 | max-width: 100%; 360 | padding: 0px; 361 | } 362 | .modal-style-1 .modal-login { 363 | width: 100%; 364 | margin: 0px; 365 | } 366 | .dark.modal-style-1 .modal-content { 367 | width: 100%; 368 | } 369 | } 370 | 371 | @media only screen and (max-width: 240px) { 372 | .input-group-addon { 373 | display: none; 374 | } 375 | .modal-style-1 input.form-control { 376 | border-radius: 7px; 377 | width: 80%; 378 | } 379 | .modal-style-1 .modal-login { 380 | width: 100%; 381 | margin: 0px; 382 | } 383 | .modal-content { 384 | width: 100%; 385 | } 386 | .modal-style-1 .modal-header .close { 387 | right: 5px; 388 | top: -25px; 389 | } 390 | } 391 | .modal-body { 392 | display: flex; 393 | flex-wrap: wrap; 394 | flex-direction: column; 395 | justify-content: center; 396 | align-items: center; 397 | } 398 | 399 | /**.btn { 400 | border: 2px solid rgb(38, 204, 38); 401 | border-radius: 10px; 402 | margin:10px; 403 | display: inline-block; 404 | padding: 10px; 405 | text-align: center; 406 | -webkit-transition: background 600ms ease, color 600ms ease; 407 | transition: background 600ms ease, color 600ms ease; 408 | }**/ 409 | 410 | input[type='radio'].toggle { 411 | display: none; 412 | } 413 | input[type='radio'].toggle + label { 414 | cursor: pointer; 415 | min-width: 60px; 416 | color: var(--color-google); 417 | font-size: 18px; 418 | font-weight: bolder; 419 | letter-spacing: 3px; 420 | } 421 | input[type='radio'].toggle + label:hover { 422 | background: none; 423 | color: var(--color-google); 424 | } 425 | input[type='radio'].toggle + label:after { 426 | background: #1a1a1a; 427 | content: ''; 428 | height: 100%; 429 | position: absolute; 430 | top: 0; 431 | -webkit-transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1); 432 | transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1); 433 | width: 100%; 434 | z-index: -1; 435 | } 436 | /**input[type="radio"].toggle.toggle-left + label { 437 | border-right: 2px; 438 | } 439 | input[type="radio"].toggle.toggle-left + label:after { 440 | left: 100%; 441 | } 442 | 443 | input[type="radio"].toggle.toggle-right + label:after { 444 | left: -100%; 445 | }**/ 446 | input[type='radio'].toggle:checked + label { 447 | background: var(--color-google); 448 | cursor: default; 449 | color: whitesmoke; 450 | -webkit-transition: color 200ms; 451 | transition: color 200ms; 452 | } 453 | input[type='radio'].toggle:checked + label:after { 454 | left: 0; 455 | } 456 | -------------------------------------------------------------------------------- /meet-the-team.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Meet the Team 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 30 | 31 | 32 | 33 |
34 | 35 |
36 | 37 |
38 | 43 | 145 |
146 |
147 | 148 | 149 |
150 |

Meet Our Team

151 |
152 |
153 | 154 |

Jenifer Ray

155 |

"Wild Question Marks, but the Little Blind"

156 |
157 |
158 | 159 |

Nick Smith

160 |

"Wild Question Marks, but the Little Blind"

161 |
162 |
163 | 164 |

Daniel Frost

165 |

"Wild Question Marks, but the Little Blind"

166 |
167 |
168 | 169 |

Mary Thomas

170 |

"Wild Question Marks, but the Little Blind"

171 |
172 |
173 |
174 | 175 | 176 |
177 | 242 | 243 | 252 |
253 |
254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /assets/css/nav-styles.css: -------------------------------------------------------------------------------- 1 | /* Start navbar styles */ 2 | header { 3 | height: 88px; 4 | padding: 1rem; 5 | margin: 0 auto 6rem; 6 | } 7 | 8 | .no-user-select { 9 | -webkit-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | user-select: none; 13 | } 14 | 15 | .container-nav { 16 | width: 90%; 17 | max-width: var(--maxWidth); 18 | margin: auto; 19 | display: flex; 20 | justify-content: center; 21 | z-index: 999; 22 | } 23 | 24 | /* Sticky Header */ 25 | /*.scroll { 26 | position: fixed; 27 | z-index: 1; 28 | background-color: var(--mainBackground); 29 | padding: 0.5rem; 30 | -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); 31 | -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); 32 | box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); 33 | width: 100%; 34 | top: 0px; 35 | }*/ 36 | 37 | /* Dark mode toggle button styles */ 38 | /* ----------------------------------------------- */ 39 | .toggle-bar { 40 | position: relative; 41 | display: inline-block; 42 | width: 58px; 43 | height: 26px; 44 | } 45 | 46 | #toggle-checkbox { 47 | opacity: 0; 48 | width: 0; 49 | height: 0; 50 | } 51 | .slider { 52 | position: absolute; 53 | cursor: pointer; 54 | top: 0; 55 | left: 0; 56 | right: 0; 57 | bottom: 0; 58 | background-color: #20014d; 59 | -webkit-transition: 0.4s; 60 | transition: 0.4s; 61 | } 62 | .slider:before { 63 | position: absolute; 64 | content: ''; 65 | height: 20px; 66 | width: 20px; 67 | left: 4px; 68 | top: 50%; 69 | background-color: #f1c40f; 70 | -webkit-transition: 0.4s; 71 | transition: 0.4s; 72 | transform: translateY(-50%); 73 | } 74 | 75 | [data-theme='dark'] .slider { 76 | background-color: #ef5b59; 77 | } 78 | input:focus + .slider { 79 | box-shadow: 0 0 1px #20014d; 80 | } 81 | [data-theme='dark'] .slider:before { 82 | left: calc(100% - (20px + 4px)); 83 | background-color: #f1c40f; 84 | } 85 | .slider.round { 86 | border-radius: 40px; 87 | padding: 0; 88 | } 89 | 90 | .slider.round:before { 91 | border-radius: 50%; 92 | } 93 | /* Slider hover effect unnecessary */ 94 | /* .toggle-bar:hover .slider.round::before { 95 | transform: translateX(14px); 96 | transition: all 0.3s; 97 | } 98 | .toggle-bar:hover .slider { 99 | background-color: #ee6a68; 100 | } */ 101 | 102 | /* ------------------------------------------------- */ 103 | /*Managing navbar as per theme start*/ 104 | [data-theme='dark'] .navbar { 105 | background: #343a40; 106 | } 107 | [data-theme='dark'] .navbar ul.menu li { 108 | color: #ddd; 109 | } 110 | [data-theme='dark'] .navbar ul.menu li:hover { 111 | color: #fff; 112 | } 113 | [data-theme='dark'] .navbar ul.menu li.active { 114 | color: #fff; 115 | font-weight: bold; 116 | } 117 | [data-theme='dark'] .navbar ul { 118 | background-color: #343a40; 119 | } 120 | 121 | [data-theme='dark'] .navbar button { 122 | color: #ffff; 123 | } 124 | 125 | [data-theme='dark'] .navbar .red-btn { 126 | color: var(--text); 127 | background-color: var(--lightBlue); 128 | } 129 | 130 | [data-theme='dark'] .navbar .red-btn:hover { 131 | background-color: white; 132 | color: var(--red); 133 | border-color: currentColor; 134 | } 135 | 136 | [data-theme='dark'] .navbar .red-btn:active { 137 | box-shadow: var(--smShadow); 138 | transform: translateY(0.3rem); 139 | } 140 | 141 | [data-theme='dark'] .toggle-container { 142 | background: #fe6655; 143 | } 144 | 145 | /*Maneging navbar as per theme ends*/ 146 | .navbar { 147 | display: flex; 148 | height: 80px; 149 | align-items: center; 150 | width: 100%; 151 | background: white; 152 | } 153 | 154 | .navbar #link-btn { 155 | cursor: pointer; 156 | color: black; 157 | } 158 | 159 | .logo { 160 | width: auto; 161 | height: 80px; 162 | cursor: pointer; 163 | } 164 | 165 | /* menu class unnecessary if .navbar .menu*/ 166 | /* .menu { 167 | display: flex; 168 | justify-content: flex-end !important; 169 | } */ 170 | 171 | .navbar .menu { 172 | display: flex; 173 | flex: 1; 174 | justify-content: space-evenly; 175 | align-items: center; 176 | height: 100%; 177 | list-style: none; 178 | /* padding-left: 70px; */ 179 | } 180 | 181 | .navbar ul.menu li { 182 | cursor: pointer; 183 | /* margin-bottom: 60px; */ 184 | /* line-height: 80px; */ 185 | font-size: clamp(1em, 20vw, 1.2em); 186 | color: #423f3f; 187 | transition: all ease-in 0.1s; 188 | } 189 | 190 | .menu li + li { 191 | margin-left: -2vmin; 192 | } 193 | 194 | .navbar ul.menu li:hover { 195 | color: #000000; 196 | } 197 | 198 | /* margins unnecessary */ 199 | /* .navbar ul.menu li + li { 200 | margin-left: 20px; 201 | } 202 | .navbar .menu li:last-child { 203 | margin-left: -30px; 204 | } */ 205 | 206 | .navbar ul.menu li.active { 207 | color: #000000; 208 | font-weight: bold; 209 | } 210 | 211 | /* bottom border for link after clicked */ 212 | .nav-click { 213 | border-bottom: 2px solid; 214 | border-color: #fe6655; 215 | } 216 | 217 | .navbar a { 218 | /* background: transparent; */ 219 | color: #000000; 220 | font-size: 1em; 221 | /* padding: 5px 20px; */ 222 | text-decoration: none; 223 | } 224 | 225 | /* Added elements for nav */ 226 | 227 | .navbar ul.menu li:hover { 228 | border-bottom: 2px solid; 229 | border-color: #fe6655; 230 | transform: translateY(-3%); 231 | } 232 | .navbar .user-forms a:last-child { 233 | margin-left: 20px; 234 | } 235 | 236 | /* manage drop-down for extra nav space */ 237 | .navbar .dropdown .drop-price, 238 | .navbar .dropdown .drop-team { 239 | display: none; 240 | } 241 | 242 | @media only screen and (max-width: 1200px) { 243 | .navbar .dropdown .drop-price { 244 | display: block; 245 | } 246 | 247 | .navbar .menu-price { 248 | display: none; 249 | } 250 | } 251 | 252 | @media only screen and (max-width: 1000px) { 253 | .navbar .dropdown .drop-team { 254 | display: block; 255 | } 256 | 257 | .navbar .menu-team { 258 | display: none; 259 | } 260 | } 261 | 262 | .nav-button { 263 | cursor: pointer; 264 | width: 30px; 265 | height: 30px; 266 | display: flex; 267 | flex-direction: column; 268 | justify-content: space-around; 269 | position: absolute; 270 | top: 15px; 271 | right: 0; 272 | transform: translate(-50%, 50%); 273 | } 274 | .navbar button { 275 | background-color: transparent; 276 | } 277 | .nav-button span { 278 | width: 100%; 279 | background-color: var(--toggleBackground); 280 | height: 3px; 281 | } 282 | 283 | /* new header styling */ 284 | .red-btn { 285 | cursor: pointer; 286 | border: 2px solid var(--red); 287 | border-radius: 5px; 288 | color: var(--red); 289 | font-size: clamp(1em, 20vw, 1.2em); 290 | padding: 10px 15px !important; 291 | border-radius: 5px; 292 | } 293 | 294 | header { 295 | padding-top: 5px; 296 | } 297 | 298 | *:focus { 299 | outline: 0 !important; 300 | } 301 | 302 | .menu li:first-child { 303 | position: absolute; 304 | left: 8%; 305 | } 306 | 307 | .navbar ul li a button { 308 | background: transparent; 309 | } 310 | 311 | [data-theme='dark'] .navbar ul li a button { 312 | color: #fff; 313 | } 314 | 315 | .navbar ul li a button:hover { 316 | cursor: pointer; 317 | } 318 | 319 | .toggle-bar-mobile { 320 | margin: 0 54px; 321 | width: 58px; 322 | height: 24px; 323 | background: var(--toggleBackground) !important; 324 | border-radius: 50px; 325 | position: absolute; 326 | cursor: pointer; 327 | top: 15px; 328 | right: 0; 329 | transform: translate(-50%, 75%); 330 | } 331 | 332 | .red-btn:hover { 333 | color: #fff; 334 | background-color: var(--darkRed); 335 | transition: 0.3s ease; 336 | } 337 | 338 | [data-theme='dark'] .red-btn:hover { 339 | color: #fff; 340 | background-color: var(--pricingBackground); 341 | transition: 0.3s ease; 342 | } 343 | 344 | /* dropdown styling */ 345 | .dropbtn { 346 | background-color: var(--red); 347 | font-size: 16px; 348 | border: none; 349 | /* padding: 10px 20px 5px 20px!important; */ 350 | border-radius: 5px; 351 | } 352 | 353 | .dropdown { 354 | position: relative; 355 | display: inline-block; 356 | } 357 | 358 | #caret-down { 359 | margin-left: 3px; 360 | } 361 | .dropdown-content { 362 | display: none; 363 | position: absolute; 364 | background-color: var(--mainBackground); 365 | min-width: 160px; 366 | box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 367 | z-index: 1; 368 | border-radius: var(--br); 369 | } 370 | 371 | [data-theme='dark'] .dropdown-content { 372 | display: none; 373 | position: absolute; 374 | /* background-color: var(--red); */ 375 | min-width: 160px; 376 | box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 377 | z-index: 1; 378 | border-radius: var(--br); 379 | } 380 | 381 | .dropdown-content a { 382 | color: black; 383 | padding: 12px 16px; 384 | text-decoration: none; 385 | display: block; 386 | } 387 | 388 | [data-theme='dark'] .dropdown-content a { 389 | color: var(--text); 390 | padding: 12px 16px; 391 | text-decoration: none; 392 | display: block; 393 | } 394 | 395 | .dropdown-content a:hover { 396 | background-color: var(--lightBlue); 397 | } 398 | 399 | .dropdown:hover .dropdown-content { 400 | display: block; 401 | } 402 | 403 | .dropdown:hover .dropbtn { 404 | color: #ec705d; 405 | transition: 0.3s ease; 406 | } 407 | /* end of dropdown styling */ 408 | 409 | @media only screen and (max-width: 900px) { 410 | .navbar { 411 | padding: 0 50px; 412 | background-color: white; 413 | z-index: 100; 414 | } 415 | 416 | .navbar button { 417 | background-color: transparent; 418 | } 419 | .toggle-bar { 420 | display: none; 421 | } 422 | .navbar .menu { 423 | flex-direction: column; 424 | justify-content: space-around; 425 | text-align: center; 426 | top: 100px; 427 | left: 0; 428 | position: absolute; 429 | background-color: rgb(240, 234, 234); 430 | height: 0; 431 | width: 100%; 432 | overflow: hidden; 433 | transition: all ease-in-out 0.3s; 434 | -webkit-transition: all ease-in-out 0.3s; 435 | -moz-transition: all ease-in-out 0.3s; 436 | -ms-transition: all ease-in-out 0.3s; 437 | -o-transition: all ease-in-out 0.3s; 438 | } 439 | 440 | .navbar ul.open { 441 | height: 500px; 442 | } 443 | 444 | /* restore menu items */ 445 | .navbar .menu-price, 446 | .navbar .menu-team { 447 | display: initial; 448 | } 449 | 450 | .navbar .dropdown .drop-price, 451 | .navbar .dropdown .drop-team { 452 | display: none; 453 | } 454 | 455 | /* .navbar ul.menu li { 456 | margin-bottom: 30px; 457 | margin-top: 30px; 458 | } */ 459 | 460 | .dropdown:hover .dropdown-content { 461 | display: flex; 462 | justify-content: center; 463 | align-items: center; 464 | position: relative; 465 | } 466 | 467 | .navbar ul.menu li + li { 468 | margin-left: 0px; 469 | } 470 | } 471 | 472 | @media only screen and (min-width: 900px) { 473 | .nav-button { 474 | display: none; 475 | visibility: hidden; 476 | } 477 | .toggle-bar-mobile { 478 | display: none; 479 | } 480 | .navbar { 481 | background-color: white; 482 | } 483 | 484 | .navbar ul.menu li { 485 | line-height: normal; 486 | } 487 | 488 | .navbar span { 489 | padding: 3px; 490 | } 491 | } 492 | 493 | @media only screen and (max-width: 768px) { 494 | .slider:before { 495 | position: absolute; 496 | content: ''; 497 | height: 18px; 498 | width: 18px; 499 | left: 4px; 500 | bottom: 1px; 501 | background-color: #f1c40f; 502 | -webkit-transition: 0.4s; 503 | transition: 0.4s; 504 | } 505 | 506 | .toggle-bar-mobile { 507 | margin: 0 34px; 508 | } 509 | } 510 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Keiko Corp - About Us 11 | 12 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 |
54 | 59 | 172 |
173 |
174 | 175 | 176 |
177 |
178 |

ABOUT US

179 |

180 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla illo 181 | sequi ea beatae eaque sit. Animi porro magni, neque ratione incidunt 182 | esse deserunt? Perspiciatis error minima, tenetur ad pariatur 183 | dignissimos sequi iste molestiae maxime enim veritatis fugit 184 | laboriosam itaque commodi, vitae officiis, soluta adipisci est 185 | consequatur accusamus rerum cumque aut at excepturi? 186 |

187 | 190 |
191 |
192 | Hero Image 197 |
198 |
199 | 200 | 201 |
202 | 290 | 291 | 300 |
301 |
302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | Contact Us 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 |
39 | 121 |
122 |
123 | 124 |
125 | 126 |
127 |

Contact Us

128 |

129 | Far far away, behind the word mountains, far from the countries 130 | Vokalia and consonantia, there live the blind texts. 131 |

132 |
133 | 134 |
135 | 136 |
137 |
138 |

Call or email

139 |

140 | Support, Sales and Account Management services are currently 141 | available in English. 142 |

143 |
144 |
145 |

Support

146 | +800 3005 4300 147 | Contact Support 148 |

149 | Our technical support is available by phone or email from 11am to 150 | 11pm BST, Monday to Friday. 151 |

152 |
153 |
154 |

Sales

155 | +800 3005 4300 156 | Contact Sales 157 |

158 | Our technical support is available by phone or email from 11am to 159 | 11pm BST, Monday to Friday. 160 |

161 |
162 |
163 |

General inquiries

164 | hello@website.com 165 |
166 |
167 | 168 | 169 |
170 |

Drop us a line

171 |
172 |
173 | 179 | 185 |
186 |
187 | 188 |
189 |
190 | 191 |
192 | 193 |
194 | 195 | 201 |
202 |
203 | 209 |
210 | 211 |
212 | 219 |
220 |
221 | 222 | 223 |
224 |
225 |
226 |
227 |
228 | 229 | 230 |
231 | 319 | 320 | 329 |
330 | 331 | 332 | 333 | 334 | -------------------------------------------------------------------------------- /support.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Support | Keiko Corp 11 | 12 | 16 | 17 | 18 | 19 | 23 | 27 | 28 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 | 64 | 171 |
172 |
173 | 174 | 175 |
176 |
177 |

Get Help from Keiko Corp.

178 |

Products

179 |

180 | The best Lorem Ipsum Generator in all the sea! Heave this scurvy 181 | copyfiller fer yar next adventure and cajol yar clients into walking 182 | the plank with ev'ry layout! 183 |

184 | 185 |

Services

186 |

187 | The best Lorem Ipsum Generator in all the sea! Heave this scurvy 188 | copyfiller fer yar next adventure and cajol yar clients into walking 189 | the plank with ev'ry layout! 190 |

191 | 192 |
193 |
194 | 195 | 196 |
197 |
198 |

Prefer Realtime Support via Text?

199 |

Our Agents are standing by 24 hours a day, 7 days a week.

200 | 201 |
202 |
203 | 204 | 205 |
206 |
207 |

Browse Resources

208 | 214 | 220 | 226 |
227 |
228 | 229 | 230 |
231 | 308 | 309 | 318 |
319 |
320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | -------------------------------------------------------------------------------- /faq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Keiko Corp 10 | 11 | 15 | 16 | 17 | 18 | 22 | 23 | 24 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 |
54 | 59 | 134 |
135 |
136 | 137 | 138 |
139 |
140 |

Frequently Asked Questions

141 | 144 |
145 |

146 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 147 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 148 | enim ad minim veniam, quis nostrud exercitation ullamco laboris 149 | nisi ut aliquip ex ea commodo consequat. 150 |

151 |
152 | 153 | 156 | 157 |
158 |

159 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 160 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 161 | enim ad minim veniam, quis nostrud exercitation ullamco laboris 162 | nisi ut aliquip ex ea commodo consequat. 163 |

164 |
165 | 166 | 169 |
170 |

171 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 172 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 173 | enim ad minim veniam, quis nostrud exercitation ullamco laboris 174 | nisi ut aliquip ex ea commodo consequat. 175 |

176 |
177 | 180 |
181 |

182 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 183 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 184 | enim ad minim veniam, quis nostrud exercitation ullamco laboris 185 | nisi ut aliquip ex ea commodo consequat. 186 |

187 |
188 | 189 | 199 |
200 |
201 | 202 | 203 |
204 | 292 | 293 | 302 |
303 |
304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | --------------------------------------------------------------------------------