-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
181 lines (180 loc) · 9.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coder</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins&display=swap" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#00DFC0',
},
fontFamily: {
'sans': ['Montserrat', 'Poppins', ...tailwind.defaultTheme.fontFamily.sans],
},
},
},
};
</script>
</head>
<body class="font-sans md:mx-20 mx-5 my-2">
<header>
<nav class="bg-white border-gray-200">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4 lg:p-8">
<a href="/" class="flex items-center">
<span class="self-center md:text-5xl text-4xl font-bold whitespace-nowrap">Coder</span>
</a>
<button id="navbar-toggle"type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-menu">
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white">
<li>
<a href="#about" class="text-lg md:text-2xl block py-2 pl-3 pr-4 rounded hover:bg-primary md:hover:bg-transparent md:border-0 md:hover:text-primary md:p-0">About</a>
</li>
<li>
<a href="#service" class="text-lg md:text-2xl block py-2 pl-3 pr-4 rounded hover:bg-primary md:hover:bg-transparent md:border-0 md:hover:text-primary md:p-0">Services</a>
</li>
<li>
<a href="#contact" class="text-lg md:text-2xl block py-2 pl-3 pr-4 rounded hover:bg-primary md:hover:bg-transparent md:border-0 md:hover:text-primary md:p-0">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section id="about" class="text-lg p-4 lg:p-8 mt-20 pt-5 grid md:gap-24 gap-y-10 mx-auto mb-24 grid-cols-1 md:grid-cols-2 max-w-screen-xl place-items-center">
<div class="md:pr-24 pr-2">
<h1 class="text-4xl font-bold mb-3">Loram ipsam dolar sit amat consectetar</h1>
<p class="text-gray-500 mb-3">Loram ipsam dolar sit amat consectetar adispicing elit. Dolares, eam autam.</p>
<div class="flex pb-2 font-semibold">
<button class="flex-auto border py-2 px-1 border-primary hover:bg-primary active:text-white active:border-white mr-3"><a href="#more">More Info</a></button>
<button class="flex-auto border-white px-1 text-white bg-primary hover:text-black active:bg-slate-700 active:text-primary active:border-primary"><a href="#contact">Contact Us</a></button>
</div>
</div>
<div>
<img src="images/landing.png" alt="landing images" />
</div>
<div class="" id="more">
<img src="images/about.png" alt="about image" />
</div>
<div class="">
<h1 class="text-4xl font-bold mb-3">We are the best in our field</h1>
<p class="text-gray-500 mb-10">For the last 100 decades give the best to our client ad we will always be the best</p>
<div class="flex items-center justify-around">
<div class="flex flex-col">
<div class="text-4xl font-bold mb-3">100+</div>
<div class="bg-primary h-2 mx-5 mb-3"></div>
<div class="text-gray-500 m-auto">Experts</div>
</div>
<div class="flex flex-col">
<div class="text-4xl font-bold mb-3">300+</div>
<div class="bg-primary h-2 mx-5 mb-3"></div>
<div class="text-gray-500 m-auto">Clients</div>
</div>
<div class="flex flex-col">
<div class="text-4xl font-bold mb-3">500+</div>
<div class="bg-primary h-2 mx-5 mb-3"></div>
<div class="text-gray-500 m-auto">Projects</div>
</div>
</div>
</div>
</section>
<section id="service" class="max-w-screen-xl mx-auto mb-14">
<div class="mb-10 md:mb-24 px-4 grid grid-cols-1 gap-4 md:flex md:justify-between ">
<div>
<h1 class="text-4xl font-bold">Our Service</h1>
<p class="text-lg text-gray-500">We have the best service solve your problem</p>
</div>
<div class="md:flex md:items-center grid justify-items-end">
<button class="text-xl bg-primary text-white p-3 border border-white hover:text-black active:text-slate-200"><a href="#contact">Contact US</a></button>
</div>
</div>
<div class="grid grid-cols-1 gap-14 px-6 md:grid-cols-3">
<div class="max-w-sm mx-auto shadow-lg">
<img class="w-full" src="images/service-1.png" alt="Web Application" />
<div class="px-2">
<h3 class="font-bold text-2xl my-5">Web Application</h3>
<p class="text-gray-500 p-2">Loram, ipsam dolar sit amat consecterar adipisicing elit. Quisquam, optio quat quosi aperium at rationa.</p>
</div>
</div>
<div class="max-w-sm mx-auto shadow-lg">
<img class="w-full" src="images/service-2.png" alt="Web Application" />
<div class="px-2">
<h3 class="font-bold text-2xl my-5">UI/UX Design</h3>
<p class="text-gray-500 p-2">Loram, ipsam dolar sit amat consecterar adipisicing elit. Quisquam, optio quat quosi aperium at rationa.</p>
</div>
</div>
<div class="max-w-sm mx-auto shadow-lg">
<img class="w-full" src="images/service-3.png" alt="Web Application" />
<div class="px-2">
<h3 class="font-bold text-2xl my-5">Mobile Application</h3>
<p class="text-gray-500 p-2">Loram, ipsam dolar sit amat consecterar adipisicing elit. Quisquam, optio quat quosi aperium at rationa.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="max-w-screen-xl mx-auto mb-6 p-4 lg:p-8">
<h1 class="font-bold text-4xl p-2">Contact Us</h1>
<p class="text-lg p-2 text-gray-500 mb-8">Loram ipsam dolar sit amat consectetar adipicing elit. Repundandae, tempore!</p>
<div class="grid grid-cols-1 gap-10 lg:gap-24 md:grid-cols-2">
<div class="border border-primary my-auto border-2">
<h4 class="text-xl pb-8 mt-14 font-bold text-center">Tell us your problem</h4>
<form>
<div class="grid grid-cols-1 gap-1 lg:grid-cols-2">
<div class="px-3 mb-6">
<label class="text-lg font-bold" for="name">Name</label>
<input class="focus:outline-none w-full border-b border-slate-500 focus:border-primary" type="text" name="name" placeholder="your name" id="name" value="" />
</div>
<div class="px-3 mb-6">
<label class="text-lg font-bold" for="subject">Subject</label>
<input class="focus:outline-none w-full border-b border-slate-500 focus:border-primary" type="text" name="subject" id="subject" value="" />
</div>
<div class="px-3 mb-6">
<label class="text-lg font-bold" for="email">Email</label>
<input class="focus:outline-none w-full border-b border-slate-500 focus:border-primary" type="email" name="email" placeholder="example@gmail.com" id="name" value="" />
</div>
<div class="px-3 mb-6">
<label class="text-lg font-bold" for="phone">Phone Number</label>
<input class="focus:outline-none w-full border-b border-slate-500 focus:border-primary" type="number" name="phone" placeholder="+000000" id="phone" value="" />
</div>
</div>
<div class="px-3 mb-6">
<label class="text-lg mb-2 font-bold" for="message">Message</label>
<textarea class="focus:outline-none border-b border-slate-500 focus:border-primary w-full h-full min-h-[50px] md:min-h-[100px]" id="message"></textarea>
</div>
<div class="p-2 bg-primary mx-5 mb-14 text-center text-white hover:text-black active:text-slate-200"><button type="submit">Submit</button></div>
</form>
</div>
<div class="m-4 my-auto">
<h2 class="text-4xl font-bold text-center md:text-left">Our Location</h2>
<iframe class="w-full aspect-video md:aspect-square" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3963.718507641161!2d107.44440547612311!3d-6.557175364103126!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e690fb318e50ddd%3A0xce1f148ea489788e!2sTaman%20Air%20Mancur%20Sri%20Baduga!5e0!3m2!1sid!2sjp!4v1697016218018!5m2!1sid!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</section>
<footer class="bg-primary -my-2 md:-mx-20 -mx-5">
<div class="max-w-screen-xl mx-auto px-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
<div class="text-white my-5">
<h1 class="font-bold mb-5 text-4xl">Coder</h1>
<p>Loram ipsam dolar sit amat consecterar adipisicing elit. Quam, sent?</p>
</div>
<div class="hidden sm:block"></div>
<div class="hidden md:block"></div>
<div class="flex justify-end items-center">
<a href="https://facebook.com"><img class="w-8 m-2 md:m-4" src="images/facebook.png" alt="Facebook" /></a>
<a href="https://instagram.com"><img class="w-8 m-2 md:m-4" src="images/instagram.png" alt="Instagram" /></a>
<a href="https://x.com"><img class="w-8 m-2 md:m-4" src="images/twitter.png" alt="Twitter" /></a>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>