-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
231 lines (213 loc) · 12.3 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<script src="https://cdn.tailwindcss.com"></script>
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="bg-white">
<div class="relative overflow-hidden">
<header class="relative">
<div class="bg-gray-900 pt-6">
<nav class="relative max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6" aria-label="Global">
<div class="flex items-center flex-1">
<div class="flex items-center justify-between w-full md:w-auto">
<a href="#">
<h1 class="text-red-500 text-2xl font-bold leading-7 sm:text-3xl sm:truncate">Media Market</h1>
</a>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Heroicon name: outline/menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
<div class="hidden space-x-8 md:flex md:ml-10">
<a href="#our-services" class="text-base font-medium text-white hover:text-gray-300">Services</a>
<a href="#contact-us" class="text-base font-medium text-white hover:text-gray-300">Contact Us</a>
</div>
</div>
<div class="hidden md:flex md:items-center md:space-x-6">
</div>
</nav>
</div>
<!--
Mobile menu, show/hide based on menu open state.
Entering: "duration-150 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div class="absolute top-0 inset-x-0 p-2 transition transform origin-top md:hidden">
<div class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="px-5 pt-4 flex items-center justify-between">
<div>
<h1>Media Market</h1>
</div>
<div class="-mr-2">
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-600">
<span class="sr-only">Close menu</span>
<!-- Heroicon name: outline/x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="pt-5 pb-6">
<div class="px-2 space-y-1 ml-3">
<a href="#our-services" class="text-base font-medium text-gray-900 hover:text-gray-300">Services</a>
</br>
<a href="#contact-us" class="text-base font-medium text-gray-900 hover:text-gray-300">Contact Us</a>
</div>
<div class="mt-6 px-5">
</div>
<div class="mt-6 px-5">
</div>
</div>
</div>
</div>
</header>
<main>
<div class="pt-10 bg-gray-900 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
<div class="mx-auto max-w-7xl lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-8">
<div class="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
<div class="lg:py-24">
<h1 class="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
<span class="block">Management</span>
<span class="pb-3 block bg-clip-text text-transparent bg-gradient-to-r from-red-200 to-red-800 sm:pb-5">Consultancy</span>
</h1>
<p class="text-base text-gray-300 sm:text-xl lg:text-lg xl:text-xl">Every journey has a beginning – Start yours with Media Market today.</p>
<div class="mt-10 sm:mt-12">
<form action="#" class="sm:max-w-xl sm:mx-auto lg:mx-0">
<div class="sm:flex">
<div class="min-w-0 flex-1">
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="mt-12 -mb-16 sm:-mb-48 lg:m-0 lg:relative">
<div class="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0">
<!-- Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ -->
<img class="w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none" src="https://tailwindui.com/img/component-images/cloud-illustration-teal-cyan.svg" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- ---------------- -->
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="bg-white py-16 lg:py-24">
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative py-24 px-8 bg-gray-900 rounded-xl shadow-2xl overflow-hidden lg:px-16 lg:grid lg:grid-cols-2 lg:gap-x-8">
<div class="absolute inset-0 opacity-50 filter saturate-0 mix-blend-multiply">
</div>
<div class="relative lg:col-span-1">
<blockquote class="mt-6 text-white">
<p class="text-xl font-medium sm:text-2xl">“We all want progress, but if you’re on the wrong road, progress means doing an about-turn and walking back to the right road; in that case, the man who turns back soonest is the most progressive.”</p>
<footer class="mt-6">
<p class="flex flex-col font-medium">
<span>C S Lewis</span>
</p>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
<!-- ---------------- -->
<div class="bg-white">
<!-- Header -->
<div class="relative pb-32 bg-gray-800 ">
<div class="absolute inset-0">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&&sat=-100" alt="">
<div class="absolute inset-0 bg-gray-800 mix-blend-multiply" aria-hidden="true"></div>
</div>
<div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
<h1 class="text-4xl font-extrabold tracking-tight text-white md:text-5xl lg:text-6xl">Our services</h1>
<p class="mt-6 max-w-3xl text-xl text-gray-300">At Media Market we offer a range of services.</p>
</div>
</div>
<!-- Overlapping cards -->
<section class="-mt-32 max-w-7xl mx-auto relative z-10 pb-32 px-4 sm:px-6 lg:px-8" aria-labelledby="contact-heading">
<h2 class="sr-only" id="contact-heading">Contact us</h2>
<div class="grid grid-cols-1 gap-y-20 lg:grid-cols-3 lg:gap-y-0 lg:gap-x-8">
<div class="flex flex-col bg-white rounded-2xl shadow-xl">
<div class="flex-1 relative pt-16 px-6 pb-8 md:px-8">
<div class="absolute top-0 p-5 inline-block bg-red-500 rounded-xl shadow-lg transform -translate-y-1/2">
<!-- Heroicon name: outline/phone -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<h3 class="text-xl font-medium text-gray-900">Customer Experience</h3>
<p class="mt-4 text-base text-gray-500">Having worked and scaled both B2B and B2C businesses we understand what it takes to deliver a premium customer experience.</p>
</div>
<div class="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
<a href="#contact-us" class="text-base font-medium text-red-500 hover:text-red-500">Contact us<span aria-hidden="true"> →</span></a>
</div>
</div>
<div class="flex flex-col bg-white rounded-2xl shadow-xl">
<div class="flex-1 relative pt-16 px-6 pb-8 md:px-8">
<div class="absolute top-0 p-5 inline-block bg-red-500 rounded-xl shadow-lg transform -translate-y-1/2">
<!-- Heroicon name: outline/newspaper -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<h3 class="text-xl font-medium text-gray-900">PR & Marketing</h3>
<p>Press releases, copy editing, you name it. We've got you covered having worked within the banking, travel, retail and tech sectors.</p>
<path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</div>
<div class="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
<a href="#contact-us" class="text-base font-medium text-red-500 hover:text-red-500">Contact us<span aria-hidden="true"> →</span></a>
</div>
</div>
<div class="flex flex-col bg-white rounded-2xl shadow-xl">
<div class="flex-1 relative pt-16 px-6 pb-8 md:px-8">
<div class="absolute top-0 p-5 inline-block bg-red-500 rounded-xl shadow-lg transform -translate-y-1/2">
<!-- Heroicon name: outline/newspaper -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
</svg>
</div>
<h3 class="text-xl font-medium text-gray-900">Tech Infrastructure</h3>
<p class="mt-4 text-base text-gray-500">Not sure where to start with your tech setup? We can advise on the technical decision needed to make your mark on the internet. All of the experience, none of the jargon.</p>
</div>
<div class="p-6 bg-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
<a href="#contact-us" class="text-base font-medium text-red-500 hover:text-red-50">Contact us<span aria-hidden="true"> →</span></a>
</div>
</div>
</div>
</section>
</div>
<!-- ----------- -->
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="bg-white">
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
<div class="divide-y-2 divide-gray-200">
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
<a name="contact-us"></a>
<div class="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-12 lg:mt-0 lg:col-span-2">
<h2 class="text-2xl font-extrabold text-gray-900 sm:text-3xl">Get in touch</h2>
<div>
<dl class="mt-2 text-base text-gray-500">
<h3 class="text-lg leading-6 font-medium text-gray-900">Say hello</h3>
<div>
<dt class="sr-only">Email</dt>
</div>
<div class="mt-1">
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>