ourworld_web/www_ourworld_ictc
20
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

mobile view fixes

Browse Source
This commit is contained in:
timurgordon 2022-10-26 09:35:16 +03:00
parent bcb59fd7a0
commit 4512701f59
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -7,23 +7,23 @@
<body>
<div style="background-image: url(/static/images/ruins_bg1.jpg)" class="relative h-full overflow-hidden bg-cover">
<div class="relative pt-6 pb-16 md:pb-20 lg:pb-24 xl:pb-32">
<main class="mt-8 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-20 xl:mt-24">
<main class="mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-20 xl:mt-24">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 bg-white p-4 lg:px-12 lg:py-8 rounded lg:text-left">
<h2 class="mt-1 text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-5xl">
<h2 class="sm:mt-1 text-3xl tracking-tight leading-8 sm:leading-10 font-extrabold text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-5xl">
Register for the
<br class="hidden md:inline" />
<span class="text-indigo-600">Ourworld Mkusanyiko </span>
</h2>
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
<p class="mt-3 text- text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Located at Mbweni Ruins, Jungle Paradise Resort - Ourworld Mkusanyiko will bring together Africa's emerging leaders that shape the regenerative, inclusive and empowering digital future of Africa. </p>
<div class="mt-5 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
<div class="mt-3 sm:mt-5 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
<form hx-post="/register" class="mt-3 sm:flex flex-col">
<div>
<div class="md:flex">
<div class="flex-col md:mr-2">
<label for="name" class="block text-sm font-medium leading-5 text-gray-700">Name</label>
<input id="name" name="name" aria-label="Name" class="appearance-none block w-full mt-1 px-3 py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Name Surname" />
<input id="name" name="name" aria-label="Name" class="appearance-none block w-full mt-1 px-2 py-2 sm:px-3 sm:py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Name Surname" />
</div>
<div class="md:ml-2">
<label for="company_website" class="mt-1 lg:mt-0 block text-sm font-medium leading-5 text-gray-700">Organization Website</label>
@ -33,18 +33,18 @@
http://
</span>
</div>
<input id="company_website" name="org_website" class="form-input pl-16 sm:pl-14 appearance-none block w-full px-3 py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="www.example.com" />
<input id="company_website" name="org_website" class="form-input pl-16 sm:pl-14 appearance-none block w-full px-2 py-2 sm:px-3 sm:py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="www.example.com" />
</div>
</div>
</div>
</div>
<div class="mt-3 sm:flex">
<input aria-label="Email" name="email" class="appearance-none block w-full px-3 py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Enter your email" />
<button type="submit" class="mt-3 w-full px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 shadow-sm hover:bg-gray-700 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray active:bg-gray-900 transition duration-150 ease-in-out sm:mt-0 sm:ml-3 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto">
<input aria-label="Email" name="email" class="appearance-none block w-full px-2 py-2 sm:px-3 sm:py-3 border border-gray-300 text-base leading-6 rounded-md placeholder-gray-500 shadow-sm focus:outline-none focus:placeholder-gray-400 focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:flex-1" placeholder="Enter your email" />
<button type="submit" class="mt-3 w-full px-6 py-2 sm:py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 shadow-sm hover:bg-gray-700 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray active:bg-gray-900 transition duration-150 ease-in-out sm:mt-0 sm:ml-3 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto">
Register
</button>
</div>
<div class="relative mt-4 flex">
<div class="relative mt-2 sm:mt-4 flex">
<div class="flex items-center h-5">
<input id="settings-option-0" name="plus_one" type="checkbox" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out cursor-pointer" />
</div>
@ -55,21 +55,21 @@
</span>
</label>
</div>
<div class="relative mt-4 flex">
<div class="relative mt-2 sm:mt-4 flex">
<div class="flex items-center h-5">
<input id="settings-option-1" name="receive_communication" type="checkbox" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out cursor-pointer" checked />
</div>
<label for="settings-option-1" class="ml-3 flex flex-col cursor-pointer">
<!-- On: "text-indigo-900", Off: "text-gray-900" -->
<span class="block text-sm leading-5 font-normal">
I want to receive communication and e-mails about Ourworld.
I want to receive communication about Ourworld.
</span>
</label>
</div>
</form>
<p class="mt-3 text-sm leading-5 text-gray-500">
<p class="mt-2 sm:mt-3 text-sm leading-5 text-gray-500">
We care about the protection of your data. Read our
<a href="#" class="font-medium text-gray-900 underline">Privacy Policy</a>.
<a href="https://library.threefold.me/info/legal/#/legal__privacypolicy" target="_blank" class="font-medium text-gray-900 underline">Privacy Policy</a>.
</p>
</div>
</div>