-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
227 lines (213 loc) · 16.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="img/LogoTap.ico">
<title>Larva Steel</title>
</head>
<body class="font-bodyFont">
<!--Header-->
<header class="relative hero bg-cover bg-center h-screen">
<!--Navbar-->
<nav class="fixed top-0 left-0 w-full sm:p-4 bg-black bg-opacity-50 z-50">
<div class="container mx-auto flex justify-between items-center">
<div class="z-10 md:hidden">
<img src="img/Logo.jpg" alt="Larva Steel Logo" class="h-6 sm:h-8">
</div>
<div class="md:hidden ml-auto">
<button id="menu-toggle" class="text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
<div id="menu" class="hidden md:block md:w-full md:relative md:z-20 absolute top-full left-0 w-full bg-black bg-opacity-50 md:bg-transparent">
<ul class="flex flex-col md:flex-row justify-center items-center md:gap-[4vw]">
<li class="relative z-30 w-full md:w-auto"><a href="index.html" class="block px-4 text-white text-sm sm:text-base md:text-xl font-semibold hover:bg-white hover:bg-opacity-20 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-white">Home</a></li>
<li class="relative z-30 w-full md:w-auto"><a href="services.html" class="block px-4 text-white text-sm sm:text-base md:text-xl font-semibold hover:bg-white hover:bg-opacity-20 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-white">Services</a></li>
<li class="relative z-30 w-full md:w-auto"><a href="clients.html" class="block px-4 text-white text-sm sm:text-base md:text-xl font-semibold hover:bg-white hover:bg-opacity-20 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-white">Clients</a></li>
<li class="relative z-30 w-full md:w-auto"><a href="about-us.html" class="block px-4 text-white text-sm sm:text-base md:text-xl font-semibold hover:bg-white hover:bg-opacity-20 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-white">About Us</a></li>
<li class="relative z-30 w-full md:w-auto"><a href="contact-us.html" class="block px-4 text-white text-sm sm:text-base md:text-xl font-semibold hover:bg-white hover:bg-opacity-20 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-white">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<!-- Overlay Content -->
<div class="absolute inset-0 flex flex-col items-start justify-center text-center text-white pb-20 pl-4">
<h1 class="text-4xl lg:text-6xl font-bold mb-4">LARVA STEEL!</h1>
<p class="text-lg lg:text-2xl max-w-xl">A journey to create an <span class="text-white bg-black underline">exceptional</span> website!</p>
<!--Button-->
<div class="pt-4 sm:pt-6">
<a href="services.html" class="relative inline-flex items-center justify-start py-2 sm:py-3 pl-3 sm:pl-4 pr-8 sm:pr-12 overflow-hidden font-semibold text-black transition-all duration-150 ease-in-out rounded hover:pl-8 sm:hover:pl-10 hover:pr-4 sm:hover:pr-6 bg-gray-50 group text-sm sm:text-base">
<span class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-black group-hover:h-full"></span>
<span class="absolute right-0 pr-3 sm:pr-4 duration-200 ease-out group-hover:translate-x-12">
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</span>
<span class="absolute left-0 pl-2 sm:pl-2.5 -translate-x-12 group-hover:translate-x-0 ease-out duration-200">
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</span>
<span class="relative w-full text-left transition-colors duration-200 ease-in-out group-hover:text-white">Learn More</span>
</a>
</div>
<!--Short Border-->
<div class="w-40 sm:w-56 h-2 sm:h-3 bg-white bg-opacity-70 mt-3 sm:mt-4 rounded"></div>
</header>
<!--Main Content-->
<main class="bg-black min-h-screen">
<div class="max-w-3xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white leading-tight mb-2 border-b-2 sm:border-b-4 border-white py-2 sm:py-4">
Your website is your identity. Start building it now with us.
</h1>
<p class="text-base sm:text-lg text-white mb-6 sm:mb-8">
Our method is the optimal approach for digitalization. Anticipate your business's technical issues before they arise.
</p>
</div>
<div class="mx-auto pt-2 sm:pt-4 text-center px-4 sm:px-6 lg:px-8">
<p class="text-2xl sm:text-3xl lg:text-4xl text-white font-bold">
So, your question is WHY US? 😎👇
</p>
</div>
<div class="w-11/12 mx-auto text-xl font-semibold">
<section>
<div class="mx-auto max-w-screen-2xl px-4 py-16 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:h-screen lg:grid-cols-2">
<div class="relative z-10 lg:py-16">
<div class="relative h-64 sm:h-80 lg:h-full">
<img
alt="Bull"
src="img/bull.jpg"
class="absolute inset-0 h-full w-full object-cover"
/>
</div>
</div>
<div class="relative flex items-center bg-gray-100">
<span
class="hidden lg:absolute lg:inset-y-0 lg:-start-16 lg:block lg:w-16 lg:bg-gray-100"
></span>
<div class="p-8 sm:p-16 lg:p-24">
<h2 class="text-2xl font-bold sm:text-3xl">
Best Solution
</h2>
<p class="mt-4 text-gray-600">
Perhaps you are confused about how to deal with your problem, maybe you don't know where to choose the best solution for your current or future. We are here to provide you a certain way to start and continue your digital experiment with the lowest costs and best quality.
</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="mx-auto max-w-screen-2xl px-4 py-16 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:h-screen lg:grid-cols-2">
<div class="relative flex items-center bg-gray-100 order-2 lg:order-1">
<span
class="hidden lg:absolute lg:inset-y-0 lg:-end-16 lg:block lg:w-16 lg:bg-gray-100"
></span>
<div class="p-8 sm:p-16 lg:p-24">
<h2 class="text-2xl font-bold sm:text-3xl">
Satisfaction Guaranteed
</h2>
<p class="mt-4 text-gray-600">
The world of technology can be fast-paced and scary. That's why our goal is to provide an experience that is tailored to your company's needs. No matter the budget, we pride ourselves on providing professional customer service. We guarantee you will be satisfied with our work.
</p>
</div>
</div>
<div class="relative z-10 lg:py-16 order-1 lg:order-2">
<div class="relative h-64 sm:h-80 lg:h-full">
<img
alt="hawk"
src="img/hawk.jpg"
class="absolute inset-0 h-full w-full object-cover"
/>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!--WhatsApp-->
<article class="bg-black flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-md p-4 sm:p-6 max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg w-full">
<p class="text-sm sm:text-base mb-3 sm:mb-4">
Want to meet face to face or online? Text me on WhatsApp, my name is Ali and I'm happy to sit with you.
</p>
<a href="https://wa.me/97338757033" target="_blank" rel="noopener noreferrer">
<img src="img/WhatsApp.png" alt="WhatsApp Icon" class="w-10 h-10 sm:w-12 sm:h-12 mx-auto hover:opacity-80 transition-opacity">
</a>
</div>
</article>
<!--Footer-->
<footer>
<div class="bg-black py-4 text-white">
<div class="container px-4 mx-auto">
<div class="-mx-4 flex flex-wrap justify-between">
<div class="px-4 my-4 w-full xl:w-1/5">
<p class="inline-block text-4xl pb-4 mb-4 text-white font-semibold">Larva Steel</p>
<p class="text-justify">
We specialize in creating a diverse range of websites from e-commerce platforms to travel and real estate portals. Our freelance business model allows for flexibility and customization, ensuring that each client's unique desires and business needs are met with precision and creativity.
</p>
</div>
<div class="px-4 my-4 w-full sm:w-auto">
<div>
<h2 class="inline-block text-2xl pb-4 mb-4 border-b-4 border-red-500">Quick Links</h2>
</div>
<ul class="leading-8">
<li><a href="about-us.html" class="hover:text-red-500">About Us</a></li>
<li><a href="terms&conditions.html" class="hover:text-red-500">Terms & Conditions</a></li>
<li><a href="privacy-policy.html" class="hover:text-red-500">Privacy Policy</a></li>
<li><a href="contact-us.html" class="hover:text-red-500">Contact Us</a></li>
</ul>
</div>
<div class="px-4 my-4 w-full sm:w-auto">
<div>
<h2 class="inline-block text-2xl pb-4 mb-4 border-b-4 border-red-500">Pages You May Like</h2>
</div>
<ul class="leading-8">
<li><a href="need-a-website.html" class="hover:text-red-500">Why I need a website?</a></li>
<li><a href="where.html" class="hover:text-red-500">From where I should start building my new website?</a></li>
<li><a href="to-go.html" class="hover:text-red-500">After building my website, where to go?</a></li>
</ul>
</div>
<div class="px-4 my-4 w-full sm:w-auto xl:w-1/5">
<div>
<h2 class="inline-block text-2xl pb-4 mb-4 border-b-4 border-red-500">Connect With Us</h2>
</div>
<!--X-->
<a href="https://x.com/larvasteel" class="inline-flex items-center justify-center h-6 w-6 ml-12">
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 462.799"><path fill="#fff" fill-rule="nonzero" d="M403.229 0h78.506L310.219 196.04 512 462.799H354.002L230.261 301.007 88.669 462.799h-78.56l183.455-209.683L0 0h161.999l111.856 147.88L403.229 0zm-27.556 415.805h43.505L138.363 44.527h-46.68l283.99 371.278z"/></svg>
</a>
<!--Facebook-->
<a href="https://www.facebook.com/larvasteel" class="inline-flex items-center justify-center h-6 w-6 ml-4">
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 510.125"><path fill="#fff" fill-rule="nonzero" d="M512 256C512 114.615 397.385 0 256 0S0 114.615 0 256c0 120.059 82.652 220.797 194.157 248.461V334.229h-52.79V256h52.79v-33.709c0-87.134 39.432-127.521 124.977-127.521 16.218 0 44.202 3.18 55.651 6.36v70.916c-6.042-.635-16.537-.954-29.575-.954-41.977 0-58.196 15.901-58.196 57.241V256h83.619l-14.365 78.229h-69.254v175.896C413.771 494.815 512 386.885 512 256z"/></svg>
</a>
<!--Instagram-->
<a href="https://www.instagram.com/larvasteel/" class="inline-flex items-center justify-center h-6 w-6 ml-4">
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><path fill="#fff" fill-rule="nonzero" d="M170.663 256.157c-.083-47.121 38.055-85.4 85.167-85.483 47.121-.092 85.407 38.03 85.499 85.16.091 47.129-38.047 85.4-85.176 85.492-47.112.09-85.399-38.039-85.49-85.169zm-46.108.091c.141 72.602 59.106 131.327 131.69 131.186 72.592-.141 131.35-59.09 131.209-131.692-.141-72.577-59.114-131.335-131.715-131.194-72.585.141-131.325 59.115-131.184 131.7zm237.104-137.091c.033 16.953 13.817 30.681 30.772 30.648 16.961-.033 30.689-13.811 30.664-30.764-.033-16.954-13.818-30.69-30.78-30.657-16.962.033-30.689 13.818-30.656 30.773zm-208.696 345.4c-24.958-1.087-38.511-5.234-47.543-8.709-11.961-4.629-20.496-10.178-29.479-19.094-8.966-8.95-14.532-17.46-19.202-29.397-3.508-9.032-7.73-22.569-8.9-47.527-1.269-26.982-1.559-35.077-1.683-103.432-.133-68.339.116-76.434 1.294-103.441 1.069-24.942 5.242-38.512 8.709-47.536 4.628-11.977 10.161-20.496 19.094-29.479 8.949-8.982 17.459-14.532 29.403-19.202 9.025-3.525 22.561-7.714 47.511-8.9 26.998-1.277 35.085-1.551 103.423-1.684 68.353-.132 76.448.108 103.456 1.295 24.94 1.086 38.51 5.217 47.527 8.709 11.968 4.628 20.503 10.144 29.478 19.094 8.974 8.95 14.54 17.443 19.21 29.412 3.524 9 7.714 22.553 8.892 47.494 1.285 26.999 1.576 35.095 1.7 103.433.132 68.355-.117 76.451-1.302 103.441-1.087 24.958-5.226 38.52-8.709 47.561-4.629 11.952-10.161 20.487-19.103 29.471-8.941 8.949-17.451 14.531-29.403 19.201-9.009 3.517-22.561 7.714-47.494 8.9-26.998 1.269-35.086 1.559-103.448 1.684-68.338.132-76.424-.125-103.431-1.294zM149.977 1.773c-27.239 1.285-45.843 5.648-62.101 12.018-16.829 6.561-31.095 15.354-45.286 29.604C28.381 57.653 19.655 71.944 13.144 88.79c-6.303 16.299-10.575 34.912-11.778 62.168C.172 178.264-.102 186.973.031 256.489c.133 69.508.439 78.234 1.741 105.547 1.302 27.231 5.649 45.828 12.019 62.093 6.569 16.83 15.353 31.088 29.611 45.288 14.25 14.201 28.55 22.918 45.404 29.438 16.282 6.295 34.902 10.583 62.15 11.778 27.305 1.203 36.022 1.468 105.521 1.335 69.532-.132 78.25-.439 105.555-1.733 27.239-1.303 45.826-5.665 62.1-12.019 16.829-6.586 31.095-15.353 45.288-29.611 14.191-14.251 22.917-28.55 29.428-45.405 6.304-16.282 10.592-34.903 11.777-62.134 1.195-27.322 1.478-36.048 1.344-105.556-.133-69.516-.447-78.225-1.741-105.523-1.294-27.255-5.657-45.844-12.019-62.118-6.577-16.829-15.352-31.079-29.602-45.287-14.25-14.192-28.55-22.935-45.404-29.429-16.29-6.305-34.903-10.601-62.15-11.779C333.747.164 325.03-.102 255.506.031c-69.507.133-78.224.431-105.529 1.742z"/></svg>
</a>
</div>
</div>
</div>
</div>
<div class="bg-red-500 py-4 text-white">
<div class="container mx-auto px-4">
<div class="-mx-4 flex flex-wrap justify-between">
<div class="px-4 w-full text-center sm:w-auto sm:text-left">
Copyright ©
<script>
document.write(new Date().getFullYear());
</script>
Larva Steel for IT Solutions. All Rights Reserved.
</div>
</div>
</div>
</div>
</footer>
<!--Navbar Responsive-->
<script>
document.getElementById('menu-toggle').addEventListener('click', function() {
document.getElementById('menu').classList.toggle('hidden');
});
</script>
</body>
</html>