Eddquity/index.html at main · CodeRedEdd/Eddquity · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Edwin Vazquez - Real Estate Agent</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #1a1a1a; /* Black background */
      color: #ffffff; /* White text */
    }
    .btn-primary {
      background-color: #d4af37; /* Gold */
      color: #1a1a1a; /* Black text */
      transition: background-color 0.3s ease;
    }
    .btn-primary:hover {
      background-color: #b8972e; /* Darker gold */
    }
    a {
      color: #d4af37; /* Gold links */
    }
    a:hover {
      color: #b8972e; /* Darker gold on hover */
    }
  </style>
</head>
<body>
  <!-- Header -->
  <header class="bg-black text-white py-4 sticky top-0 z-50 shadow-lg">
    <div class="container mx-auto px-4 flex justify-between items-center">
      <div>
        <h1 class="text-2xl font-bold">Edwin Vazquez</h1>
        <p class="text-sm">Real Estate Agent with EXP Realtor</p>
      </div>
      <nav class="space-x-6">
        <a href="#home" class="hover:text-yellow-400">Home</a>
        <a href="#about" class="hover:text-yellow-400">About</a>
        <a href="#services" class="hover:text-yellow-400">Services</a>
        <a href="#contact" class="hover:text-yellow-400">Contact</a>
      </nav>
    </div>
  </header>

  <!-- Hero Section -->
  <section id="home" class="bg-cover bg-center h-screen flex items-center justify-center" style="background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80')">
    <div class="bg-black bg-opacity-50 p-8 rounded-lg text-center">
      <h2 class="text-4xl font-bold mb-4">Welcome to Your Real Estate Journey</h2>
      <p class="text-lg mb-6">As your dedicated real estate agent, I’m here to help you find your dream home or sell your property with confidence.</p>
      <a href="#contact" class="btn-primary px-6 py-3 rounded-full font-semibold">Get in Touch</a>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="py-16">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-8">About Me</h2>
      <div class="flex flex-col md:flex-row items-center">
        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Edwin Vazquez" class="w-64 h-64 rounded-full mb-6 md:mb-0 md:mr-8">
        <div>
          <p class="text-lg mb-4">Hello, I’m Edwin Vazquez, a dedicated real estate agent with EXP Realtor, proudly serving the North and East sides of the Bronx, including the vibrant Country Club neighborhood. With deep knowledge of these communities, I specialize in helping clients find their perfect home or sell their property in these dynamic areas.</p>
          <p class="text-lg">My approach is built on trust, transparency, and personalized service, ensuring a seamless experience whether you’re buying or selling. Let’s work together to achieve your real estate goals in the Bronx!</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Services Section -->
  <section id="services" class="bg-gray-900 py-16">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-8">My Services</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="bg-black p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-semibold mb-4">Home Buying</h3>
          <p>Find your perfect home with expert guidance, market insights, and personalized property recommendations.</p>
        </div>
        <div class="bg-black p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-semibold mb-4">Home Selling</h3>
          <p>Maximize your property’s value with strategic marketing and seamless transaction management.</p>
        </div>
        <div class="bg-black p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-semibold mb-4">Market Analysis</h3>
          <p>Get detailed insights into local market trends to make informed real estate decisions.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact" class="py-16">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-8">Contact Me</h2>
      <div class="max-w-lg mx-auto">
        <form action="https://formspree.io/f/your-form-id" method="POST" class="space-y-4">
          <div>
            <label for="name" class="block text-sm font-medium">Name</label>
            <input type="text" id="name" name="name" class="w-full p-3 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400" required>
          </div>
          <div>
            <label for="email" class="block text-sm font-medium">Email</label>
            <input type="email" id="email" name="email" class="w-full p-3 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400" required>
          </div>
          <div>
            <label for="message" class="block text-sm font-medium">Message</label>
            <textarea id="message" name="message" rows="5" class="w-full p-3 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400" required></textarea>
          </div>
          <button type="submit" class="btn-primary px-6 py-3 rounded-full font-semibold w-full">Send Message</button>
        </form>
        <div class="flex justify-center space-x-6 mt-6">
          <a href="https://www.instagram.com/Eddquity" target="_blank" aria-label="Instagram">
            <i class="fab fa-instagram text-2xl hover:text-yellow-400"></i>
          </a>
          <a href="https://www.tiktok.com/@Eddquity" target="_blank" aria-label="TikTok">
            <i class="fab fa-tiktok text-2xl hover:text-yellow-400"></i>
          </a>
          <a href="https://www.youtube.com/@Eddquity" target="_blank" aria-label="YouTube">
            <i class="fab fa-youtube text-2xl hover:text-yellow-400"></i>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-black text-white py-6">
    <div class="container mx-auto px-4 text-center">
      <p>© 2025 Edwin Vazquez, Real Estate Agent with EXP Realtor. All rights reserved.</p>
    </div>
  </footer>

  <script>
    // Smooth scrolling for navigation links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>
</html>