60 lines
2.6 KiB
HTML
60 lines
2.6 KiB
HTML
|
|
<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:pt-20 pt-8">
|
|
<div class="flex flex-wrap justify-center items-center w-full md:w-1/3">
|
|
<h1 class="font-semibold">The Vision</h1>
|
|
<h3 class="blue font-normal my-0">Pioneering. Empowering.</h3>
|
|
</div>
|
|
<div class="w-full md:w-2/3">
|
|
<div class="flex flex-wrap justify-center md:justify-end">
|
|
<div class="relative my-6 mx-2">
|
|
<img class="w-full object-cover rounded-md" src="/images/vision1.png" alt="Random image">
|
|
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 duration-300 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Most countries only rely on cable networks, meaning they lack control over their own digital infrastructure. </div>
|
|
</div>
|
|
<div class="relative my-6 mx-2">
|
|
<img class="w-full object-cover rounded-md" src="/images/vision2.png" alt="Random image">
|
|
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Today, most of the cloud is owned and operated by a few major companies taking all the profits and control of the Internet.</div>
|
|
</div>
|
|
<div class="relative my-6 mx-2">
|
|
<img class="w-full object-cover rounded-md" src="/images/vision3.png" alt="Random image">
|
|
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Digital experiences should not manipulate people, rather they should empower them. </div>
|
|
</div>
|
|
<div class="relative my-6 mx-2">
|
|
<img class="w-full object-cover rounded-md" src="/images/vision4.png" alt="Random image">
|
|
<div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Current IT infrastructures consume far too much energy. Now it is time we do something about it.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.cardhover{
|
|
background-color: rgba(224, 224, 224, 0);
|
|
|
|
|
|
}
|
|
|
|
.cardhover:hover{
|
|
background-color: rgba(224, 224, 224, 0.8);
|
|
animation-duration: 200;
|
|
|
|
}
|
|
|
|
|
|
@media (max-width: 640px) {
|
|
.cardhover{
|
|
background-color: rgba(224, 224, 224, 0.8);
|
|
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|