50 lines
2.4 KiB
HTML
50 lines
2.4 KiB
HTML
|
|
<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:py-20 py-8">
|
|
<div class="flex flex-wrap justify-center items-center w-full md:w-1/3">
|
|
<h1 class="font-medium">The Vision</h1>
|
|
<h3 class="blue font-normal">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="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 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="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 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="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 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="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 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>
|
|
|
|
.test2{
|
|
background-color: rgba(224, 224, 224, 0);
|
|
|
|
|
|
}
|
|
|
|
.test2:hover{
|
|
background-color: rgba(224, 224, 224, 0.8);
|
|
animation-duration: 200;
|
|
|
|
}
|
|
</style>
|
|
|
|
|