diff --git a/assets/images/conference_room.jpg b/assets/images/conference_room.jpg new file mode 100644 index 0000000..4767b50 Binary files /dev/null and b/assets/images/conference_room.jpg differ diff --git a/assets/images/google_accra.jpg b/assets/images/google_accra.jpg new file mode 100644 index 0000000..9407454 Binary files /dev/null and b/assets/images/google_accra.jpg differ diff --git a/assets/images/our_story.jpg b/assets/images/our_story.jpg new file mode 100644 index 0000000..7583f1d Binary files /dev/null and b/assets/images/our_story.jpg differ diff --git a/assets/images/workstation.jpg b/assets/images/workstation.jpg new file mode 100644 index 0000000..ee05008 Binary files /dev/null and b/assets/images/workstation.jpg differ diff --git a/index.html b/index.html index b811292..23a8951 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ /> @@ -131,6 +131,187 @@ + + +
+
+
+

+ At Khy, we design and furnish office environments where people + thrive. From enterprise headquarters to coworking spaces, we + create workspaces that balance function, comfort, and design + excellence. +

+
+
+
+ + +
+
+ +
+

+ Curated by Space +

+

+ Explore our collection of timeless, curated designs by room +

+
+ + +
+ +
+
+ Lounge Areas +
+

+ Lounge Areas +

+
+ + +
+
+ Workstations +
+

+ Workstations +

+
+ + +
+
+ Conference Rooms +
+

+ Conference Rooms +

+
+
+
+
+ + +
+
+ +
+

+ Our Story +

+
+ + +
+ +
+ Modern office interior + +
+
+ + + +
+
+
+ + +
+

+ Rooted in Ghana.
+ Inspired by beauty.
+ Timeless by design. +

+ +

+ From our first collection to now, khy has remained dedicated to + artistry, quality, and Ghanaian-inspired sophistication. +
+
+ Khy brings timeless, curated furniture and decor to offices that + tell a story. +

+ + +
+
+
+
+ + +
+
+
+

+ At Khy, we provide end-to-end solutions: interior design, bespoke + manufacturing, furniture supply, professional installation, and + dedicated after-sales care — all under one roof. +

+
+
+
diff --git a/styles/main.css b/styles/main.css index 7742f84..b49bd98 100644 --- a/styles/main.css +++ b/styles/main.css @@ -582,6 +582,14 @@ video { top: 20rem; } +.right-4 { + right: 1rem; +} + +.top-1\/2 { + top: 50%; +} + .z-10 { z-index: 10; } @@ -599,6 +607,22 @@ video { margin-top: 7rem; } +.mb-16 { + margin-bottom: 4rem; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.mb-8 { + margin-bottom: 2rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + .inline-block { display: inline-block; } @@ -607,6 +631,10 @@ video { display: flex; } +.grid { + display: grid; +} + .h-16 { height: 4rem; } @@ -623,6 +651,22 @@ video { height: 100vh; } +.h-96 { + height: 24rem; +} + +.h-12 { + height: 3rem; +} + +.h-6 { + height: 1.5rem; +} + +.h-auto { + height: auto; +} + .w-auto { width: auto; } @@ -631,6 +675,14 @@ video { width: 100%; } +.w-12 { + width: 3rem; +} + +.w-6 { + width: 1.5rem; +} + .max-w-6xl { max-width: 72rem; } @@ -639,15 +691,44 @@ video { max-width: 80rem; } +.max-w-4xl { + max-width: 56rem; +} + +.max-w-sm { + max-width: 24rem; +} + +.max-w-lg { + max-width: 32rem; +} + +.max-w-md { + max-width: 28rem; +} + +.max-w-5xl { + max-width: 64rem; +} + .-translate-x-1\/2 { --tw-translate-x: -50%; 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)); } +.-translate-y-1\/2 { + --tw-translate-y: -50%; + 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)); } +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + .items-start { align-items: flex-start; } @@ -664,16 +745,80 @@ video { justify-content: space-between; } +.gap-8 { + gap: 2rem; +} + +.gap-4 { + gap: 1rem; +} + +.gap-6 { + gap: 1.5rem; +} + +.gap-12 { + gap: 3rem; +} + +.gap-16 { + gap: 4rem; +} + +.gap-24 { + gap: 6rem; +} + +.gap-28 { + gap: 7rem; +} + .space-x-10 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(2.5rem * var(--tw-space-x-reverse)); margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse))); } +.space-y-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + +.space-y-6 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} + +.space-y-12 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(3rem * 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))); + margin-bottom: calc(4rem * var(--tw-space-y-reverse)); +} + +.overflow-hidden { + overflow: hidden; +} + .rounded-xl { border-radius: 0.75rem; } +.rounded-lg { + border-radius: 0.5rem; +} + +.rounded-full { + border-radius: 9999px; +} + .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); @@ -694,6 +839,16 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } +.bg-blue-50 { + --tw-bg-opacity: 1; + background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); +} + .bg-opacity-70 { --tw-bg-opacity: 0.7; } @@ -728,10 +883,77 @@ video { padding-bottom: 2rem; } +.py-20 { + padding-top: 5rem; + padding-bottom: 5rem; +} + +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.px-16 { + padding-left: 4rem; + padding-right: 4rem; +} + +.px-24 { + padding-left: 6rem; + padding-right: 6rem; +} + +.py-12 { + padding-top: 3rem; + padding-bottom: 3rem; +} + +.py-16 { + padding-top: 4rem; + padding-bottom: 4rem; +} + .pt-32 { padding-top: 8rem; } +.pb-20 { + padding-bottom: 5rem; +} + +.pt-16 { + padding-top: 4rem; +} + +.pt-12 { + padding-top: 3rem; +} + +.pt-8 { + padding-top: 2rem; +} + +.pt-4 { + padding-top: 1rem; +} + +.pb-12 { + padding-bottom: 3rem; +} + +.pb-16 { + padding-bottom: 4rem; +} + +.pt-24 { + padding-top: 6rem; +} + .text-center { text-align: center; } @@ -754,6 +976,16 @@ video { line-height: 1.75rem; } +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + .font-extralight { font-weight: 200; } @@ -766,10 +998,34 @@ video { font-weight: 400; } +.font-bold { + font-weight: 700; +} + +.font-semibold { + font-weight: 600; +} + +.font-medium { + font-weight: 500; +} + +.font-thin { + font-weight: 100; +} + .leading-tight { line-height: 1.25; } +.leading-relaxed { + line-height: 1.625; +} + +.leading-loose { + line-height: 2; +} + .tracking-wider { letter-spacing: 0.05em; } @@ -794,6 +1050,15 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } +.text-axolotl { + --tw-text-opacity: 1; + color: rgb(111 119 107 / var(--tw-text-opacity, 1)); +} + +.text-opacity-90 { + --tw-text-opacity: 0.9; +} + .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -811,6 +1076,16 @@ video { transition-duration: 150ms; } +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.hover\:bg-opacity-80:hover { + --tw-bg-opacity: 0.8; +} + .hover\:text-gray-600:hover { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); @@ -821,6 +1096,14 @@ video { top: 24rem; } + .md\:h-\[484px\] { + height: 484px; + } + + .md\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .md\:pr-0 { padding-right: 0px; } @@ -838,6 +1121,21 @@ video { font-size: 2.25rem; line-height: 2.5rem; } + + .md\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + + .md\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } + + .md\:text-lg { + font-size: 1.125rem; + line-height: 1.75rem; + } } @media (min-width: 1024px) { @@ -845,6 +1143,22 @@ video { top: 29rem; } + .lg\:col-span-3 { + grid-column: span 3 / span 3; + } + + .lg\:col-span-2 { + grid-column: span 2 / span 2; + } + + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lg\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + .lg\:pr-2 { padding-right: 0.5rem; } @@ -862,4 +1176,19 @@ video { font-size: 3rem; line-height: 1; } + + .lg\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } + + .lg\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } + + .lg\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } }