From 8887e50316eeb4f53d9b3b1e26207e99cc3d5bd4 Mon Sep 17 00:00:00 2001 From: winsdominoes Date: Sat, 2 Mar 2024 07:45:46 +0700 Subject: [PATCH] Added styles - multiple pages --- assets/css/carousel.css | 160 ++++++++++++++++++++++++++++++++++++ assets/css/feature.css | 27 ++++++ assets/css/style.css | 8 ++ assets/js/color-modes.js | 80 ++++++++++++++++++ contact.php | 0 facilities.php | 0 gallery.php | 0 includes/footer.php | 22 ++++- includes/header.php | 158 +++++++++++++++++++++++++++++++++-- index.php | 173 ++++++++++++++++++++++++++++++++++++++- services.php | 0 11 files changed, 613 insertions(+), 15 deletions(-) create mode 100644 assets/css/carousel.css create mode 100644 assets/css/feature.css create mode 100644 assets/css/style.css create mode 100644 assets/js/color-modes.js create mode 100644 contact.php create mode 100644 facilities.php create mode 100644 gallery.php create mode 100644 services.php diff --git a/assets/css/carousel.css b/assets/css/carousel.css new file mode 100644 index 0000000..196d2b6 --- /dev/null +++ b/assets/css/carousel.css @@ -0,0 +1,160 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-top: 3rem; + padding-bottom: 3rem; + color: rgb(var(--bs-tertiary-color-rgb)); +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 4rem; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + bottom: 3rem; + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel-item { + height: 32rem; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 1.5rem; + text-align: center; +} +/* rtl:begin:ignore */ +.marketing .col-lg-4 p { + margin-right: .75rem; + margin-left: .75rem; +} +/* rtl:end:ignore */ + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 5rem 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ +/* rtl:begin:remove */ +.featurette-heading { + letter-spacing: -.05rem; +} + +/* rtl:end:remove */ + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 40em) { + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 1.25rem; + font-size: 1.25rem; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 62em) { + .featurette-heading { + margin-top: 7rem; + } +} + +.bd-placeholder-img { + font-size: 1.125rem; + text-anchor: middle; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +@media (min-width: 768px) { + .bd-placeholder-img-lg { + font-size: 3.5rem; + } +} + +.b-example-divider { + width: 100%; + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.b-example-vr { + flex-shrink: 0; + width: 1.5rem; + height: 100vh; +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} + +.nav-scroller .nav { + display: flex; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +.btn-bd-primary { + --bd-violet-bg: #712cf9; + --bd-violet-rgb: 112.520718, 44.062154, 249.437846; + + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bs-white); + --bs-btn-bg: var(--bd-violet-bg); + --bs-btn-border-color: var(--bd-violet-bg); + --bs-btn-hover-color: var(--bs-white); + --bs-btn-hover-bg: #6528e0; + --bs-btn-hover-border-color: #6528e0; + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: #5a23c8; + --bs-btn-active-border-color: #5a23c8; +} + +.bd-mode-toggle { + z-index: 1500; +} + +.bd-mode-toggle .dropdown-menu .active .bi { + display: block !important; +} + diff --git a/assets/css/feature.css b/assets/css/feature.css new file mode 100644 index 0000000..9af945d --- /dev/null +++ b/assets/css/feature.css @@ -0,0 +1,27 @@ +.feature-icon { + width: 4rem; + height: 4rem; + border-radius: .75rem; + } + + .icon-square { + width: 3rem; + height: 3rem; + border-radius: .75rem; + } + + .text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); } + .text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); } + .text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); } + + .card-cover { + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + } + + .feature-icon-small { + width: 3rem; + height: 3rem; + } + \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..c1c4610 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,8 @@ +@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); + +html, body { + font-family: "Rubik", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} \ No newline at end of file diff --git a/assets/js/color-modes.js b/assets/js/color-modes.js new file mode 100644 index 0000000..8a0dabf --- /dev/null +++ b/assets/js/color-modes.js @@ -0,0 +1,80 @@ +/*! + * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2024 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + */ + +(() => { + 'use strict' + + const getStoredTheme = () => localStorage.getItem('theme') + const setStoredTheme = theme => localStorage.setItem('theme', theme) + + const getPreferredTheme = () => { + const storedTheme = getStoredTheme() + if (storedTheme) { + return storedTheme + } + + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + + const setTheme = theme => { + if (theme === 'auto') { + document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')) + } else { + document.documentElement.setAttribute('data-bs-theme', theme) + } + } + + setTheme(getPreferredTheme()) + + const showActiveTheme = (theme, focus = false) => { + const themeSwitcher = document.querySelector('#bd-theme') + + if (!themeSwitcher) { + return + } + + const themeSwitcherText = document.querySelector('#bd-theme-text') + const activeThemeIcon = document.querySelector('.theme-icon-active use') + const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) + const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') + + document.querySelectorAll('[data-bs-theme-value]').forEach(element => { + element.classList.remove('active') + element.setAttribute('aria-pressed', 'false') + }) + + btnToActive.classList.add('active') + btnToActive.setAttribute('aria-pressed', 'true') + activeThemeIcon.setAttribute('href', svgOfActiveBtn) + const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})` + themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) + + if (focus) { + themeSwitcher.focus() + } + } + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + const storedTheme = getStoredTheme() + if (storedTheme !== 'light' && storedTheme !== 'dark') { + setTheme(getPreferredTheme()) + } + }) + + window.addEventListener('DOMContentLoaded', () => { + showActiveTheme(getPreferredTheme()) + + document.querySelectorAll('[data-bs-theme-value]') + .forEach(toggle => { + toggle.addEventListener('click', () => { + const theme = toggle.getAttribute('data-bs-theme-value') + setStoredTheme(theme) + setTheme(theme) + showActiveTheme(theme, true) + }) + }) + }) +})() diff --git a/contact.php b/contact.php new file mode 100644 index 0000000..e69de29 diff --git a/facilities.php b/facilities.php new file mode 100644 index 0000000..e69de29 diff --git a/gallery.php b/gallery.php new file mode 100644 index 0000000..e69de29 diff --git a/includes/footer.php b/includes/footer.php index b91a2e3..8506ee2 100644 --- a/includes/footer.php +++ b/includes/footer.php @@ -1,5 +1,19 @@ - - - + + + + - \ No newline at end of file + diff --git a/includes/header.php b/includes/header.php index b744ad8..69f9b4a 100644 --- a/includes/header.php +++ b/includes/header.php @@ -1,11 +1,151 @@ - - - - - EMPower Engineering Co.,Ltd + + + + + + EMPower Engineering Co.,Ltd + + + + + - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
\ No newline at end of file diff --git a/index.php b/index.php index 2245950..f5dea10 100644 --- a/index.php +++ b/index.php @@ -1,9 +1,178 @@ +
+ + +
\ No newline at end of file diff --git a/services.php b/services.php new file mode 100644 index 0000000..e69de29