-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (79 loc) · 6.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Mogul - Property is for Everyone</title>
</head>
<body class="antialiased">
<!-- top color bar -->
<div class="h-2 bg-pink-600"></div>
<!-- Nav Bar -->
<nav class="font-sans text-center flex justify-between my-4 mx-auto container overflow-hidden mt-8 z-50 relative">
<a href="/" class="toggleColour text-gray-700 no-underline hover:no-underline font-bold text-2xl lg:text-4xl">
<img src="./cover.png" height="10" width="350"/>
</a>
</nav>
<!-- Hero Section -->
<section class="-mt-24 font-sans container m-auto flex min-h-screen">
<div class="flex-1 flex items-start flex-col justify-center">
<h1 class="my-4 font-medium mt-32 md:mt-16 lg:mt-0 text-4xl text-center w-full px-2 text-gray-800 xl:text-4xl lg:text-4xl lg:px-0 font-black mb-8 md:text-5xl md:w-full lg:text-left lg:-mt-4">Property investing is a <span class="text-pink-600">big deal</span> and now it's accessible to <span class="text-pink-600">everyone</span> </h1>
<p class="leading-normal mb-12 pr-36 text-lg text-center w-full px-16 text-gray-700 leading-loose xl:pr-32 md:text-center md:px-32 sm:text-center lg:text-left lg:px-0">Mogul is a platform that helps you to find the best property deals without paying an estate agent! Enter a suburb you're interested in and give it a try.</p>
<form class="flex w-full px-16 xl:pr-32 lg:pr-16 md:px-32 lg:px-0" action="https://app.us4.list-manage.com/subscribe/post?u=ba486ed71a8f78b0c952a4154&id=28a05bbb08" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<input class="bg-white border-2 border-gray-300 rounded py-2 px-4 block w-full focus:outline-none focus:border-pink-600 text-black input w-1/3" id="email" name="EMAIL" type="email" autofocus placeholder="[email protected]">
<input type="hidden" name="b_ba486ed71a8f78b0c952a4154_28a05bbb08" tabindex="-1" value="">
<button class="hover:bg-grey-darker text-white ml-4 py-2 px-6 rounded bg-pink-600 font-bold w-2/3">Submit</button>
</form>
</div>
<div class="flex-1 hidden items-start flex-col justify-center lg:flex">
<img src="./pick_image.png"/>
</div>
</section>
<svg width="100%" height="auto" class="w-full relative" viewBox="0 0 1370 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Desktop-HD" transform="translate(0.000000, -558.000000)" fill="#F9F9FC"><path d="M0,558 C243.726562,600.97601 472.059896,622.464014 685,622.464014 C897.940104,622.464014 1126.27344,600.97601 1370,558 L1370,622.464014 L0,622.464014 L0,558 Z" id="Rectangle-4"></path></g></g></svg>
<!-- Features Section -->
<section class="bg-gray-100">
<div class="container max-w-5xl mx-auto mt-0 pb-24">
<h2 class="w-full mb-16 pt-16 pt-4 text-4xl font-bold leading-tight text-center text-gray-700">Mogul is the property partner you've always dreamed of</h2>
<div class="flex flex-wrap mb-16">
<div class="w-1/6 sm:w-1/2 p-6 pl-48 pr-16">
<img src="./feature_1.png">
</div>
<div class="w-5/6 sm:w-1/2 p-6 pr-48">
<h3 class="text-3xl font-bold leading-none mb-3 mt-16 text-gray-700">Find them Deals</h3>
<p class="text-gray-600 mb-8">We help you to find that golden goose by analysing properties for the best return on investment.</p>
</div>
</div>
<div class="flex flex-wrap flex-col-reverse sm:flex-row">
<div class="w-1/6 sm:w-1/2 p-6 pl-48 pr-16">
<img src="./feature_2.png">
</div>
<div class="w-5/6 sm:w-1/2 p-6 pr-48">
<div class="align-middle">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3 mt-16 text-gray-700">Compare to Win</h3>
<p class="text-gray-600 mb-8">We compare properties in suburbs so that you can easily see what's in your interest versus what's in their interest.<br><br>
</p></div>
</div>
</div>
</div>
</section>
<!-- Footer Email Section -->
<section class="text-center pt-32 pb-40 bg-pink-600 relative">
<div class="container mx-auto text-center">
<h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-white">Sign up to be notified when we release!</h1>
<h3 class="my-4 text-3xl leading-tight text-gray-400">Enter your email below to request early access.</h3>
<form class="flex w-full px-16 xl:pr-6 lg:pr-16 md:px-32 lg:px-0 lg:w-1/2 lg:m-auto lg:mt-8" action="https://app.us4.list-manage.com/subscribe/post?u=ba486ed71a8f78b0c952a4154&id=28a05bbb08" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<input class="bg-white border-2 border-white rounded py-2 px-4 block w-full focus:outline-none focus:border-pink-400 text-black input w-1/3" name="EMAIL" type="email" autofocus="" placeholder="[email protected]">
<input type="hidden" name="b_ba486ed71a8f78b0c952a4154_28a05bbb08" tabindex="-1" value="">
<button class="hover:bg-grey-darker text-white ml-4 py-2 px-6 rounded bg-gray-800 font-bold w-2/3">Submit</button>
</form>
</div>
</section>
<script>
document.getElementById('signup_btn').addEventListener('click', function () {
document.getElementById('email').focus();
});
</script>
</body>
</html>