103 lines
4.5 KiB
HTML
103 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link href="dist/css/output.css" rel="stylesheet" />
|
|
<link />
|
|
<title>Contact Us - Utopia Deals</title>
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
<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=Roboto+Condensed&display=swap" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body>
|
|
<!-- header -->
|
|
<header class="page-header bg-brown-800 py-6">
|
|
<div class="container mx-10 flex justify-start">
|
|
<!-- logo -->
|
|
<a href="#">
|
|
<img src="dist/img/utopia-deals.png" alt="Utopiadeals.com" class="block h-[60px]" />
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="text-black mx-10 text-2xl block mb-4 font-bold">
|
|
CONTACT US
|
|
</section>
|
|
|
|
<section class="mx-10 md:flex mb-10 md:mb-20 ">
|
|
<!-- left section -->
|
|
<div class=" p-2 mb-4 md:mb-0 font-roboto flex-1">
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 font-bold mb-2">Name*</label>
|
|
<input
|
|
class="h-12 shadow border rounded-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-1 focus:shadow-outline"
|
|
type="text" placeholder="Your Name" id="name"/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 font-bold mb-2">Email*</label>
|
|
<input
|
|
class="h-12 shadow border rounded-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-1 focus:shadow-outline"
|
|
type="email" placeholder="e.g someone@website.com" id="email"/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 font-bold mb-2">Phone*</label>
|
|
<input
|
|
class="h-12 shadow border rounded-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-1 focus:shadow-outline"
|
|
type="text" placeholder="e.g 1-123-12345678" id="phone"/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 font-bold mb-2">How did you hear about us?*</label>
|
|
<select id="select"
|
|
class="h-12 shadow border rounded-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-1 focus:shadow-outline">
|
|
<option>Please Select</option>
|
|
<option>Facebook</option>
|
|
<option>Amazon</option>
|
|
<option>Ebay</option>
|
|
<option>Google</option>
|
|
<option>Friends</option>
|
|
<option>Others</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 font-bold mb-2">Message*</label>
|
|
<textarea
|
|
class="shadow appearance-none border rounded-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-1 focus:shadow-outline"
|
|
rows="6" id="message"></textarea>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<button
|
|
class="bg-black text-white font-bold py-2 px-4 rounded-none focus:outline-none focus:shadow-outline" id="button">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- divider -->
|
|
<div class="flex-0 h-100 mx-10 border-l border-dotted border-gray-400"></div>
|
|
|
|
<!-- right section -->
|
|
<div class="flex-1 pl-6">
|
|
<h3 class="mb-4 text-xl font-bold">CALL US</h3>
|
|
<a href="tel:448455280135" title="Call Us" class="underline block mb-4 font-bold hover:text-gray-500">
|
|
UK: +44-845-528-0135 (1:00PM - 10:00PM BST MON-SAT)
|
|
</a>
|
|
<div class="mt-10">
|
|
<h4 class="font-bold">UK Warehouse</h4>
|
|
<p class="mt-2">Unit# 1A,<br/>31 Coningsby Business Park,<br/>Coningsby Rd,</br>Peterborough,</br>PE3 8SB UK</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- footer -->
|
|
<footer class="fixed bottom-0 w-full bg-black text-white font-roboto">
|
|
<div class="container mx-auto py-1 text-center text-sm">
|
|
© Copyrights 2025 - All Rights Reserved - Utopia Deals
|
|
</div>
|
|
</footer>
|
|
<script src="./index.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|