92 lines
2.4 KiB
HTML
92 lines
2.4 KiB
HTML
<head>
|
|
<link href="./output.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<div class="relative isolate overflow-hidden h-screen my-8">
|
|
<video autoplay loop muted class="absolute inset-0 -z-10 h-full w-full object-cover">
|
|
<source src="/videos/cybercity_comp.mp4" type="video/mp4">
|
|
</video>
|
|
<div class="flex flex-col justify-center items-center mx-auto max-w-3xl py-32 sm:py-48 lg:py-56 text-center h-full">
|
|
<div class="text-center">
|
|
<img src="/images/logo_s.svg" alt="Cybercity Logo" class="w-30 h-auto mx-auto" />
|
|
<h2 class="text-xl lg:text-2xl text-gray-200 font-normal">Welcome to a New Regenerative Startup City in the Heart of Zanzibar</h2>
|
|
<p class="mt-2 text-lg sm:text-xl leading-7 sm:leading-8 font-light text-black mx-4 sm:mx-0">Spanning 700,000m² in the heart of Fumba, Zanzibar, CyberCity is a place where talent meets opportunity, innovation embraces sustainability, and collaboration fuels progress.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.relative.isolate.overflow-hidden.h-screen {
|
|
height: 100vh;
|
|
}
|
|
|
|
video {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.bg-black {
|
|
color: white;
|
|
background: #000;
|
|
}
|
|
|
|
.main-button {
|
|
color: #fff;
|
|
padding: 1rem;
|
|
background-color: blue;
|
|
}
|
|
|
|
.bg-hover {
|
|
color: white;
|
|
background: #020202;
|
|
|
|
}
|
|
|
|
/* Define the fade-in animation */
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Apply the fade-in animation to elements with the 'fade-in' class */
|
|
.fade-in {
|
|
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
|
|
}
|
|
|
|
/* Optional: Delay the animation for a more staggered effect */
|
|
h2 {
|
|
animation-delay: 0.5s; /* Delay for header */
|
|
}
|
|
|
|
p {
|
|
animation-delay: 1s; /* Delay for paragraphs */
|
|
}
|
|
|
|
/* Custom styles for smaller font, margin adjustments, and line spacing for mobile */
|
|
@media (max-width: 640px) {
|
|
h1 {
|
|
font-size: 2rem; /* Smaller font for mobile */
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25rem; /* Smaller font for mobile */
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem; /* Smaller font for mobile */
|
|
margin-left: 1rem; /* Margin left for mobile */
|
|
margin-right: 1rem; /* Margin right for mobile */
|
|
line-height: 1.5; /* Smaller line spacing */
|
|
}
|
|
}
|
|
</style>
|