59 lines
2.8 KiB
HTML
59 lines
2.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Contact{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<section class="text-center py-20 bg-gradient-to-br from-red-800 to-orange-400 text-white">
|
|
<h1 class="text-5xl font-extrabold mb-4">Contact Me</h1>
|
|
<p class="text-xl mb-6">Looking to connect? Here's where you can reach me!</p>
|
|
</section>
|
|
|
|
<section class="bg-black text-white py-16 px-6 md:px-20">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="grid md:grid-cols-2 gap-12">
|
|
|
|
<!-- Contact Info -->
|
|
<div>
|
|
<h2 class="text-3xl font-bold mb-4 text-orange-600">Get in Touch</h2>
|
|
<p class="mb-4">Feel free to drop me a message via the form or through any of the channels below:</p>
|
|
<ul class="space-y-3 text-lg">
|
|
<li><strong>Email:</strong> <a href="mailto:you@example.com" class="text-blue-600 hover:underline">ben@bennyshouse.net</a></li>
|
|
<li><strong>Business Website:</strong> <a href="https://bennyshouse.net" class="text-blue-600 hover:underline">bennyshouse.net</a></li>
|
|
<li><strong>Location:</strong> Canyon, Texas</li>
|
|
</ul>
|
|
<div class="mt-6 flex space-x-4">
|
|
|
|
<a href="https://www.instagram.com/bennyshousefr/" class="text-orange-600 hover:text-orange-800 transition"><i class="fab fa-instagram fa-lg"></i></a>
|
|
<a href="https://www.linkedin.com/in/benjamin-mosley-849643329/" class="text-orange-600 hover:text-orange-800 transition"><i class="fab fa-linkedin fa-lg"></i></a>
|
|
<a href="https://github.com/Benny-ui-ux" class="text-orange-600 hover:text-orange-800 transition"><i class="fab fa-github fa-lg"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<form method="POST" action="/contact" class="space-y-4">
|
|
<div>
|
|
<label for="name" class="block font-semibold mb-1">Name</label>
|
|
<input type="text" id="name" name="name" required class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
|
|
</div>
|
|
<div>
|
|
<label for="email" class="block font-semibold mb-1">Email</label>
|
|
<input type="email" id="email" name="email" required class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
|
|
</div>
|
|
<div>
|
|
<label for="message" class="block font-semibold mb-1">Message</label>
|
|
<textarea id="message" name="message" rows="5" required class="text-black w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none"></textarea>
|
|
</div>
|
|
<div class="text-right">
|
|
<button type="submit" class="bg-orange-600 text-white px-6 py-2 rounded hover:bg-orange-700 transition">Send</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{% endblock %}
|