femiAbiodunrin/index.html at main · Emmytechltd/femiAbiodunrin · 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
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Femi Abodunrin Enterprise</title>
  <link rel="icon" type="image/png" href="favicon.png">
  <meta name="description" content="Femi Abodunrin Enterprise - General Merchandise, Trading, Import & Export">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">


  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">

  <!-- Navbar -->
  <!-- Navbar -->
<header class="bg-blue-900 text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-2xl font-bold">FA Enterprise</h1>

    <!-- Hamburger button -->
    <button id="menu-btn" class="md:hidden focus:outline-none">
      <svg class="w-6 h-6 fill-current text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>

    <!-- Nav links -->
    <nav id="menu" class="hidden md:flex md:space-x-6 flex-col md:flex-row absolute md:static top-16 left-0 w-full md:w-auto bg-blue-900 md:bg-transparent z-50 p-4 md:p-0">
      <a href="#about" class="block py-2 md:py-0 hover:text-yellow-400">About</a>
      <a href="#services" class="block py-2 md:py-0 hover:text-yellow-400">Services</a>
      <a href="#portfolio" class="block py-2 md:py-0 hover:text-yellow-400">Gallery</a>
      <a href="#contact" class="block py-2 md:py-0 hover:text-yellow-400">Contact</a>
    </nav>
  </div>
</header>

<!-- JavaScript for toggle -->
<script>
  const menuBtn = document.getElementById('menu-btn');
  const menu = document.getElementById('menu');

  menuBtn.addEventListener('click', () => {
    menu.classList.toggle('hidden');
  });
</script>

  <!-- Hero Section -->
  <section class="bg-blue-900 text-white text-center py-20">
    <h2 class="text-4xl font-bold mb-4">Femi Abodunrin Enterprise</h2>
    <p class="text-lg mb-6">General Merchandise • Trading • Import & Export</p>
    <a href="#contact" class="bg-yellow-400 text-blue-900 px-6 py-3 rounded font-semibold hover:bg-yellow-300">Contact Us</a>
  </section>

  <!-- About Us -->
  <section id="about" class="py-16 px-4 max-w-4xl mx-auto text-center">
    <h3 class="text-3xl font-bold mb-4 text-blue-900">About Us</h3>
    <p class="text-lg">We are a trusted name in general merchandise, import, and export. With years of experience, Femi Abodunrin Enterprise bridges markets across borders, providing quality, reliability, and professionalism in every transaction.</p>
  </section>

  <!-- Services Section -->
  <section id="services" class="py-16 bg-white px-4">
    <div class="max-w-5xl mx-auto text-center">
      <h3 class="text-3xl font-bold mb-10 text-blue-900">Our Services</h3>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-gray-100 p-6 rounded shadow">
          <h4 class="text-xl font-semibold mb-2 text-blue-900">Trading</h4>
          <p>We trade goods across various sectors with global partners and logistics support.</p>
        </div>
        <div class="bg-gray-100 p-6 rounded shadow">
          <h4 class="text-xl font-semibold mb-2 text-blue-900">Import Services</h4>
          <p>We import high-quality products from top international markets with reliability.</p>
        </div>
        <div class="bg-gray-100 p-6 rounded shadow">
          <h4 class="text-xl font-semibold mb-2 text-blue-900">Export Services</h4>
          <p>We export goods to global destinations, ensuring timely delivery and compliance.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Gallery -->
  <section id="portfolio" class="py-16 px-4 bg-gray-100">
    <div class="max-w-5xl mx-auto text-center">
      <h3 class="text-3xl font-bold text-blue-900 mb-10">Gallery</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <img src="/image/1.jpg" class="rounded shadow" alt="Project 1">
        <img src="/image/2.jpg" class="rounded shadow" alt="Project 2">
        <img src="/image/3.jpg" class="rounded shadow" alt="Project 3">
        <img src="/image/4.jpg" class="rounded shadow" alt="Project 4">
      </div>
    </div>
  </section>

  <!-- Contact Section -->

  <section id="contact" class="py-16 px-4 bg-white">
    <div class="max-w-3xl mx-auto text-center">
      <h3 class="text-3xl font-bold text-blue-900 mb-4">Contact Us</h3>
      <p class="mb-6">Reach out to us via phone, email, or WhatsApp. We are ready to serve you.</p>
      <p class="mb-2">📞 +2348162928210</p>
      <p class="mb-2">📧 Femiabodunrinenterprise@gmail.com</p>
      <a href="https://wa.me/2348162928210" target="_blank" class="inline-block mt-4 bg-green-500 text-white px-6 py-3 rounded hover:bg-green-600">
        Message on WhatsApp
      </a>
    </div>

  </section>
  <section id="contact-form" class="py-16 px-4 bg-gray-100">
  <div class="max-w-3xl mx-auto">
    <h3 class="text-3xl font-bold text-blue-900 mb-6 text-center">Send Us a Message</h3>
    <form action="#" method="POST" class="space-y-6 bg-white p-8 rounded shadow">

      <div>
        <label for="name" class="block mb-2 font-semibold text-gray-800">Full Name</label>
        <input type="text" id="name" name="name" required placeholder="Your name"
          class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-900">
      </div>

      <div>
        <label for="email" class="block mb-2 font-semibold text-gray-800">Email</label>
        <input type="email" id="email" name="email" required placeholder="Your email"
          class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-900">
      </div>

      <div>
        <label for="subject" class="block mb-2 font-semibold text-gray-800">Subject</label>
        <input type="text" id="subject" name="subject" placeholder="Message subject"
          class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-900">
      </div>

      <div>
        <label for="message" class="block mb-2 font-semibold text-gray-800">Message</label>
        <textarea id="message" name="message" rows="5" required placeholder="Your message"
          class="w-full px-4 py-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-900"></textarea>
      </div>

      <div class="text-center">
        <button type="submit"
          class="bg-blue-900 text-white font-semibold px-8 py-3 rounded hover:bg-blue-800 transition">
          Send Message
        </button>
      </div>
    </form>
  </div>
</section>

  <!-- Footer -->
  <footer class="bg-blue-900 text-white text-center py-4">
    <p>&copy; 2025 Femi Abodunrin Enterprise. All rights reserved.</p>
  </footer>

</body>
</html>