-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (232 loc) · 16.2 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
232
233
234
235
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>MarkHub</title>
</head>
<body>
<header class="w-full bg-white border border-gray-400 sticky top-0 z-50">
<nav class="container mx-auto p-4 flex justify-between items-center relative">
<div class="flex-grow">
<span class="text-3xl font-[Poppins] font-extrabold">
MarkHub
</span>
</div>
<ul
class="lg:flex-row lg:items-center lg:z-auto lg:static lg:w-auto lg:border-0 lg:p-0 lg:gap-6
lg:flex bg-white lg:bg-transparent w-full -z-[-1] absolute top-16
hidden border border-t-0 p-4 pt-0 flex-col gap-2
ul-nav
">
<li><a href="/template-markhub#home" class="font-semibold text-lg my-3 lg:my-0 w-full lg:w-auto">Home</a></li>
<li><a href="/template-markhub#services" class="font-semibold text-lg my-3 lg:my-0 w-full lg:w-auto">Services</a></li>
<li><a href="/template-markhub#projects" class="font-semibold text-lg my-3 lg:my-0 w-full lg:w-auto">Project</a></li>
<li><a href="/template-markhub#about" class="font-semibold text-lg my-3 lg:my-0 w-full lg:w-auto">About us</a></li>
<li><a href="/template-markhub#blog" class="font-semibold text-lg my-3 lg:my-0 w-full lg:w-auto">Blog</a></li>
<li><a href="/template-markhub#contact" class="font-semibold text-lg my-3 lg:mr-6 w-full lg:w-auto lg:my-0">Contact Us</a></li>
</ul>
<button class="bg-amber-700 font-[Poppins] p-3 rounded font-bold text-white hidden lg:inline">
<a href="/">Get Started</a>
</button>
<img width="40" height="40"
src="https://img.icons8.com/ios-filled/50/menu--v1.png" alt="menu--v1"
class="p-1 lg:hidden ham-burger active:bg-gray-200 duration-200"
/>
</nav>
</header>
<main class="lg:pt-12">
<section class="services container bg-white mx-auto flex flex-col items-center justify-between lg:flex-row py-10" id="home">
<div class="flex flex-col items-center gap-5 lg:items-start">
<p class="font-[Poppins] font-bold text-xl text-center lg:text-left">MarkHub Marketing Agency</p>
<h1 class="font-[Poppins] max-w-2xl lg:max-w-xl font-bold text-5xl text-center lg:text-left lg:text-6xl">We are available for marketing</h1>
<p class="font-[Poppins] max-w-2xl lg:max-w-xl text-center lg:text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio enim ipsam laboriosam molestias? Ad eaque nostrum odio quaerat quod totam!</p>
<button class="bg-amber-700 font-[Poppins] p-3 rounded font-bold text-white">
<a href="/">Get Started</a>
</button>
</div>
<div class="pb-10">
<img src="/hero-banner.png" alt="Hero Banner" class="w-full">
</div>
</section>
<section class="bg-gray-100 py-20" id="services">
<div class="container mx-auto flex flex-col items-center">
<h2 class="font-[Poppins] font-bold text-2xl md:text-2xl lg:text-4xl text-center">Services We Provide</h2>
<p class="max-w-xl text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem fugiat illum labore magni odio officiis provident repellat.</p>
<div class="grid grid-cols-2 lg:grid-cols-3 mt-10 gap-6">
<div class="flex flex-col gap-2 bg-white p-5 items-center justify-center shadow-md">
<img width="80" height="80" src="https://img.icons8.com/plasticine/100/chat.png" alt="chat"/>
<h3 class="text-xl md:text-2xl lg:text-3xl font-bold">SEO Optimization</h3>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorem, eaque hic illum velit veniam.</p>
</div>
<div class="flex flex-col gap-2 bg-white p-5 items-center justify-center shadow-md">
<img width="80" height="80" src="https://img.icons8.com/bubbles/100/this-pc.png" alt="this-pc"/>
<h3 class="text-xl md:text-2xl lg:text-3xl font-bold">Digital Marketing</h3>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorem, eaque hic illum velit veniam.</p>
</div>
<div class="flex flex-col gap-2 bg-white p-5 items-center justify-center shadow-md">
<img width="80" height="80" src="https://img.icons8.com/color/96/idea.png" alt="idea"/>
<h3 class="text-xl md:text-2xl lg:text-3xl font-bold">Market Research</h3>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorem, eaque hic illum velit veniam.</p>
</div>
<div class="flex flex-col gap-2 bg-white p-5 items-center justify-center shadow-md">
<img width="80" height="80" src="https://img.icons8.com/fluency/96/ipad.png" alt="ipad"/>
<h3 class="text-xl md:text-2xl lg:text-3xl font-bold">Digital Marketing</h3>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorem, eaque hic illum velit veniam.</p>
</div>
<div class="flex flex-col gap-2 bg-white p-5 items-center justify-center shadow-md">
<img width="80" height="80" src="https://img.icons8.com/color/96/email.png" alt="email"/>
<h3 class="text-xl md:text-2xl lg:text-3xl font-bold">Email Marketing</h3>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorem, eaque hic illum velit veniam.</p>
</div>
<div class="flex flex-col gap-2 bg-white p-5 items-center justify-center shadow-md">
<img width="80" height="80" src="https://img.icons8.com/fluency/96/wrench--v2.png" alt="wrench--v2"/>
<h3 class="text-xl md:text-2xl lg:text-3xl font-bold">Marketing & Reporting</h3>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorem, eaque hic illum velit veniam.</p>
</div>
</div>
</div>
</section>
<section class="bg-white py-20" id="projects">
<div class="container mx-auto flex flex-col items-center">
<h2 class="font-[Poppins] font-bold text-2xl md:text-2xl lg:text-4xl text-center">Our Recent Projects</h2>
<p class="max-w-xl text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem fugiat illum labore magni odio officiis provident repellat.</p>
<div class="grid grid-cols-2 lg:grid-cols-3 mt-10 gap-6">
<div class="project-one bg-cover text-white rounded-xl flex flex-col gap-2 bg-white p-5 items-start justify-end shadow-md min-h-[400px]">
<p class="">SEO Optimization</p>
<h3 class="font-bold text-xl">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
</div>
<div class="project-two bg-cover text-white rounded-xl flex flex-col gap-2 bg-white p-5 items-start justify-end shadow-md min-h-[400px]">
<p class="">Keyword Targeting</p>
<h3 class="font-bold text-xl">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
</div>
<div class="project-three bg-cover text-white rounded-xl flex flex-col gap-2 bg-white p-5 items-start justify-end shadow-md min-h-[400px]">
<p class="">Keyword Targeting</p>
<h3 class="font-bold text-xl">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
</div>
<div class="project-four bg-cover text-white rounded-xl flex flex-col gap-2 bg-white p-5 items-start justify-end shadow-md min-h-[400px]">
<p class="">Marketing & Report</p>
<h3 class="font-bold text-xl">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
</div>
</div>
</div>
</section>
<section class="bg-gray-100 py-20" id="about">
<div class="container mx-auto flex flex-col lg:flex-row gap-10">
<div class="">
<img src="/about-banner.jpg" alt="About" class="rounded-xl max-w-full">
</div>
<div class="flex flex-col gap-4 lg:max-w-[500px]">
<div>
<h2 class="text-3xl md:text-3xl lg:text-4xl font-bold mb-2">About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem eius itaque necessitatibus saepe voluptas voluptates. Accusantium ad adipisci amet animi aperiam aspernatur cum debitis, deleniti eaque eius ex facilis fugit harum, hic illum in incidunt ipsum, iste iure labore magni natus necessitatibus nihil non porro quas quasi qui quod ratione sunt temporibus veniam voluptate voluptatum? Ex perferendis quasi quidem!</p>
</div>
<div>
<h2 class="text-xl font-extrabold mb-2">Who We Are</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nisi sequi. Alias, aspernatur consectetur cumque cupiditate dicta eveniet exercitationem expedita in inventore ipsum iure maxime natus nulla officiis sapiente, sint.</p>
</div>
<div>
<h2 class="text-xl font-extrabold mb-2">Our Success</h2>
<div class="flex items-center">
<img width="25" height="18" src="https://img.icons8.com/windows/32/instagram-check-mark.png" alt="instagram-check-mark"/>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="flex items-center">
<img width="25" height="18" src="https://img.icons8.com/windows/32/instagram-check-mark.png" alt="instagram-check-mark"/>
<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, iusto!</p></div>
</div>
<div class="flex items-center">
<img width="25" height="18" src="https://img.icons8.com/windows/32/instagram-check-mark.png" alt="instagram-check-mark"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
</div>
<div>
<h2 class="text-xl font-extrabold mb-2">Our Mission</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, deleniti dignissimos distinctio dolor dolorem, eaque enim error et eum fugit impedit in ipsum magni mollitia natus non odit quidem sapiente.</p>
</div>
</div>
</div>
</section>
<section class="sticky-bg">
<div class="container mx-auto p-16 flex flex-col justify-center items-center min-h-36 text-white">
<h4>So What's Next?</h4>
<h2 class="text-3xl mb-5 mt-3">Are you Ready? Lets get to work!</h2>
<button class="bg-white p-2 rounded font-bold px-4 text-black"><a href="/">Get started</a></button>
</div>
</section>
<section id="blog">
<div class="container mx-auto py-16">
<div class="flex flex-col justify-center items-center text-center">
<h3 class="text-2xl md:text-2xl lg:text-4xl font-extrabold">Latest Articles</h3>
<p class="max-w-xl">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias debitis ducimus fugit inventore labore maxime modi natus nulla perspiciatis.</p>
</div>
<div class="flex flex-col lg:flex-row gap-3 mt-10">
<div class="bg-gray-100">
<img src="/articles/blog-1.jpg" alt="Become a Successful UX developer">
<div class="p-4">
<time datetime="2022-06-16T12:00">June 16, 2022</time>
<h3 class="text-xl md:text-2xl lg:text-3xl font-bold">How to become a successful entry-level UX designer</h3>
</div>
</div>
<div class="flex-grow flex flex-col gap-5 mt-5 lg:mt-0">
<div class="flex gap-3 bg-gray-100 items-center">
<img src="/articles/blog-2.jpg" alt="2023 Local SEO success: The Year of Everywhere" class="w-auto max-w-56">
<div class="px-3">
<time datetime="2022-06-16T12:00">June 16, 2022</time>
<h3 class="text-xl md:text-2xl lg:text-3xl font-bold">2023 Local SEO success: The Year of Everywhere</h3>
</div>
</div>
<div class="flex gap-3 bg-gray-100 items-center">
<img src="/articles/blog-3.jpg" alt="2023 Local SEO success: The Year of Everywhere" class="w-auto max-w-56">
<div class="px-3">
<time datetime="2022-06-16T12:00">June 16, 2022</time>
<h3 class="text-xl md:text-2xl lg:text-3xl font-bold">The guide to running a client discovery process</h3>
</div>
</div>
<div class="flex gap-3 bg-gray-100 items-center">
<img src="/articles/blog-4.jpg" alt="2023 Local SEO success: The Year of Everywhere" class="w-auto max-w-56">
<div class="px-3">
<time datetime="2022-06-16T12:00">June 16, 2022</time>
<h3 class="text-xl md:text-2xl lg:text-3xl font-bold">3 ways to get client approval for scope changes</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gray-100 py-20" id="contact">
<div class="container mx-auto">
<div class="flex flex-col justify-center items-center text-center">
<h3 class="text-2xl md:text-2xl lg:text-4xl font-bold">Let's Get Connected</h3>
<p class="max-w-xl text-[0.7rem] lg:text-[1rem]">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias debitis ducimus fugit inventore labore maxime modi natus nulla perspiciatis.</p>
</div>
<form method="post" class="w-full mt-6 ">
<div class="bg-white flex flex-col gap-2 lg:gap-4 justify-start rounded shadow p-6 mx-auto">
<div class="flex flex-col lg:flex-row items-center gap-2 lg:gap-4">
<input type="text" placeholder="Your name*" class="p-2 bg-gray-100 w-full" required>
<input type="email" placeholder="Email address*" class="p-2 bg-gray-100 w-full" required>
</div>
<div class="flex flex-col lg:flex-row items-center gap-2 lg:gap-4">
<input type="text" placeholder="Subject" class="p-2 bg-gray-100 w-full">
<input type="email" placeholder="Phone Number" class="p-2 bg-gray-100 w-full">
</div>
<textarea name="message" id="message" cols="30" rows="10" placeholder="Your message*" class="p-2 bg-gray-100" required></textarea>
<div class="flex gap-3">
<input type="checkbox" id="agree" name="agree" required>
<label for="agree">Accept Terms of Service and Privacy Policy*</label>
</div>
<button type="submit" class="p-4 bg-gradient-to-b from-red-500 to-red-600 text-white font-bold">Send Message</button>
</div>
</form>
</div>
</section>
</main>
<footer class="bg-gray-100 text-center pb-3">
<p>© 2024 <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>. All Rights Reserved. Made By <a href="https://github.com/seracoder">Md Hamim</a></p>
</footer>
<script src="./script.js" type="module"></script>
</body>
</html>