diff --git a/assets/icons/address.png b/assets/icons/address.png new file mode 100644 index 0000000..28e21f5 Binary files /dev/null and b/assets/icons/address.png differ diff --git a/assets/icons/admin.png b/assets/icons/admin.png new file mode 100644 index 0000000..0a70489 Binary files /dev/null and b/assets/icons/admin.png differ diff --git a/assets/icons/calendar.png b/assets/icons/calendar.png new file mode 100644 index 0000000..ff83c67 Binary files /dev/null and b/assets/icons/calendar.png differ diff --git a/assets/icons/phone.png b/assets/icons/phone.png new file mode 100644 index 0000000..1e83e1a Binary files /dev/null and b/assets/icons/phone.png differ diff --git a/assets/icons/shipping.png b/assets/icons/shipping.png new file mode 100644 index 0000000..9fb9a8f Binary files /dev/null and b/assets/icons/shipping.png differ diff --git a/assets/icons/support.png b/assets/icons/support.png new file mode 100644 index 0000000..ebb5cd6 Binary files /dev/null and b/assets/icons/support.png differ diff --git a/assets/icons/tag.png b/assets/icons/tag.png new file mode 100644 index 0000000..a020a6f Binary files /dev/null and b/assets/icons/tag.png differ diff --git a/assets/icons/time.png b/assets/icons/time.png new file mode 100644 index 0000000..d45e13b Binary files /dev/null and b/assets/icons/time.png differ diff --git a/assets/icons/trophy.png b/assets/icons/trophy.png new file mode 100644 index 0000000..c1820f9 Binary files /dev/null and b/assets/icons/trophy.png differ diff --git a/assets/icons/warranty.png b/assets/icons/warranty.png new file mode 100644 index 0000000..6448c7c Binary files /dev/null and b/assets/icons/warranty.png differ diff --git a/assets/images/blog_post_1.png b/assets/images/blog_post_1.png new file mode 100644 index 0000000..73c2647 Binary files /dev/null and b/assets/images/blog_post_1.png differ diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..39e3988 --- /dev/null +++ b/blog.html @@ -0,0 +1,493 @@ + + + + + + Blog - KHY + + + + + + +
+ +
+ +
+ +
+ +
+ Modern office interior +
+ + +
+ + +
+

+ Blog +

+
+
+ + +
+
+
+ +
+ +
+ +
+ Going all-in with millennial design +
+ + +
+ +
+ Admin + + Admin + +
+ + +
+ Calendar + + 14 Oct 2022 + +
+ + +
+ Tag + + Wood + +
+
+ + +

+ Going all-in with millennial design +

+ + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Mus mauris vitae ultricies leo integer malesuada nunc. In + nulla posuere sollicitudin aliquam ultrices. Morbi blandit + cursus risus at ultrices mi tempus imperdiet. Libero enim sed + faucibus turpis in. Cursus mattis molestie a iaculis at erat. + Nibh cras pulvinar mattis nunc sed blandit libero. + Pellentesque elit ullamcorper dignissim cras tincidunt. + Pharetra et ultrices neque ornare aenean euismod elementum. +

+ + + + Read more + +
+ + +
+ + + + +
+
+ + +
+ +
+
+ + Search +
+
+ + +
+

+ Categories +

+
+
+ Crafts + (2) +
+
+ Design + (8) +
+
+ Handmade + (7) +
+
+ Interior + (1) +
+
+ Wood + (6) +
+
+
+ + +
+

+ Recent Posts +

+
+ +
+ Blog thumbnail +
+

+ Going all-in with millennial design +

+

+ 03 Aug 2022 +

+
+
+
+
+
+
+
+
+
+ + + + + + + diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..dd1b8d4 --- /dev/null +++ b/contact.html @@ -0,0 +1,523 @@ + + + + + + Contact - KHY + + + + + + +
+ +
+ +
+ +
+ +
+ Modern office interior +
+ + +
+ + +
+

+ Contact +

+
+
+ + +
+
+ +
+

+ Get In Touch With Us +

+

+ For More Information About Our Product & Services. Please Feel + Free To Drop Us An Email. Our Staff Always Be There To Help You + Out. Do Not Hesitate! +

+
+ + +
+ +
+
+ +
+ Address +
+

+ Address +

+

+ 5 Labone Crescent,
+ Greater Accra,
+ Ghana +

+
+
+ + +
+ Phone +
+

+ Phone +

+

+ Mobile: +(233) 546-6789 +

+
+
+ + +
+ Time +
+

+ Working Time +

+

+ Monday-Friday: 9AM - 5PM +

+
+
+
+
+ + +
+
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + + +
+
+
+
+
+ + +
+
+
+ +
+
+ Trophy +
+
+

+ High Quality +

+

+ crafted from top materials +

+
+
+ + +
+
+ Guarantee +
+
+

+ Warranty Protection +

+

+ Over 2 years +

+
+
+ + +
+
+ Shipping +
+
+

+ Free Shipping +

+

+ Order over 150 $ +

+
+
+ + +
+
+ Support +
+
+

+ 24 / 7 Support +

+

+ Dedicated support +

+
+
+
+
+
+
+ + + + + + + diff --git a/styles/main.css b/styles/main.css index daf3732..188587d 100644 --- a/styles/main.css +++ b/styles/main.css @@ -639,6 +639,18 @@ video { margin-top: 7rem; } +.mb-1 { + margin-bottom: 0.25rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + +.mt-1 { + margin-top: 0.25rem; +} + .block { display: block; } @@ -715,6 +727,14 @@ video { height: 100vh; } +.h-80 { + height: 20rem; +} + +.h-5 { + height: 1.25rem; +} + .w-12 { width: 3rem; } @@ -767,6 +787,14 @@ video { width: 100%; } +.w-20 { + width: 5rem; +} + +.w-5 { + width: 1.25rem; +} + .max-w-4xl { max-width: 56rem; } @@ -791,6 +819,10 @@ video { max-width: 24rem; } +.max-w-2xl { + max-width: 42rem; +} + .flex-1 { flex: 1 1 0%; } @@ -809,13 +841,12 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.rotate-45 { - --tw-rotate: 45deg; +.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.resize-none { + resize: none; } .grid-cols-1 { @@ -866,6 +897,10 @@ video { gap: 2rem; } +.gap-16 { + gap: 4rem; +} + .space-x-10 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(2.5rem * var(--tw-space-x-reverse)); @@ -884,6 +919,12 @@ video { margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } +.space-y-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + .space-y-16 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse))); @@ -896,12 +937,6 @@ video { margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } -.space-y-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} - .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); @@ -914,10 +949,22 @@ video { margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } -.space-y-1 > :not([hidden]) ~ :not([hidden]) { +.space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-x-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(2rem * var(--tw-space-x-reverse)); + margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); } .overflow-hidden { @@ -967,6 +1014,11 @@ video { border-color: rgb(184 135 63 / var(--tw-border-opacity, 1)); } +.border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); +} + .border-opacity-20 { --tw-border-opacity: 0.2; } @@ -981,11 +1033,6 @@ video { background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); } -.bg-dark-charcoal-ii { - --tw-bg-opacity: 1; - background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1)); -} - .bg-floral-white { --tw-bg-opacity: 1; background-color: rgb(251 249 243 / var(--tw-bg-opacity, 1)); @@ -1020,10 +1067,24 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } +.bg-linen { + --tw-bg-opacity: 1; + background-color: rgb(250 240 230 / var(--tw-bg-opacity, 1)); +} + +.bg-uc-gold { + --tw-bg-opacity: 1; + background-color: rgb(184 135 63 / var(--tw-bg-opacity, 1)); +} + .bg-opacity-70 { --tw-bg-opacity: 0.7; } +.bg-opacity-60 { + --tw-bg-opacity: 0.6; +} + .object-contain { -o-object-fit: contain; object-fit: contain; @@ -1039,10 +1100,23 @@ video { object-position: top; } +.object-center { + -o-object-position: center; + object-position: center; +} + .p-4 { padding: 1rem; } +.p-8 { + padding: 2rem; +} + +.p-6 { + padding: 1.5rem; +} + .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; @@ -1088,6 +1162,11 @@ video { padding-bottom: 1rem; } +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + .pb-16 { padding-bottom: 4rem; } @@ -1112,10 +1191,18 @@ video { padding-top: 2rem; } +.pr-12 { + padding-right: 3rem; +} + .text-center { text-align: center; } +.text-justify { + text-align: justify; +} + .font-playfair { font-family: Playfair Display, serif; } @@ -1163,6 +1250,11 @@ video { line-height: 1rem; } +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + .font-bold { font-weight: 700; } @@ -1276,11 +1368,41 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.blur-sm { + --tw-blur: blur(4px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.blur-lg { + --tw-blur: blur(16px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.blur-md { + --tw-blur: blur(12px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.blur { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .drop-shadow-sm { --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -1293,6 +1415,11 @@ video { transition-duration: 150ms; } +.hover\:border-gray-600:hover { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)); +} + .hover\:bg-uc-gold:hover { --tw-bg-opacity: 1; background-color: rgb(184 135 63 / var(--tw-bg-opacity, 1)); @@ -1302,6 +1429,10 @@ video { --tw-bg-opacity: 0.8; } +.hover\:bg-opacity-90:hover { + --tw-bg-opacity: 0.9; +} + .hover\:text-black:hover { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); @@ -1322,6 +1453,11 @@ video { border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } +.focus\:border-uc-gold:focus { + --tw-border-opacity: 1; + border-color: rgb(184 135 63 / var(--tw-border-opacity, 1)); +} + .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -1400,6 +1536,11 @@ video { font-size: 1.25rem; line-height: 1.75rem; } + + .md\:text-5xl { + font-size: 3rem; + line-height: 1; + } } @media (min-width: 1024px) { @@ -1407,6 +1548,14 @@ video { top: 29rem; } + .lg\:col-span-1 { + grid-column: span 1 / span 1; + } + + .lg\:col-span-2 { + grid-column: span 2 / span 2; + } + .lg\:w-36 { width: 9rem; } @@ -1435,6 +1584,10 @@ video { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .lg\:gap-12 { gap: 3rem; } @@ -1475,4 +1628,9 @@ video { font-size: 1.25rem; line-height: 1.75rem; } + + .lg\:text-6xl { + font-size: 3.75rem; + line-height: 1; + } }