Bootstrap-Project-cats-blog/About.html at main · 7890dani/Bootstrap-Project-cats-blog · 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
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT"
  crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
  rel="stylesheet" />
</head>
<body class="bg-white text-gray-700 font-Poppins">

    <nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.html"><img class="w-10 h-10 object-contain" src="image/logo.jpg" alt=""></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="About.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Services.html">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Contact.html">Contact</a>
        </li>

      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-primary" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>


 <header class="sticky top-0 bg-white border-b border-gray-200 shadow">
    <div class="container mx-auto flex justify-between items-center p-4">
      <div class="flex items-center space-x-3">

      </div>

      <nav class="space-x-4">
        <a href="#maine-coon" class="text-gray-600 hover:text-indigo-600 focus:ring-2 focus:ring-indigo-500 rounded"></a>
        <a href="#sphynx" class="text-gray-600 hover:text-indigo-600 focus:ring-2 focus:ring-indigo-500 rounded"></a>
        <a href="#caracal" class="text-gray-600 hover:text-indigo-600 focus:ring-2 focus:ring-indigo-500 rounded"></a>
        <a href="#kurilian-bobtail" class="text-gray-600 hover:text-indigo-600 focus:ring-2 focus:ring-indigo-500 rounded"></a>
        <a href="#munchkin" class="text-gray-600 hover:text-indigo-600 focus:ring-2 focus:ring-indigo-500 rounded"></a>
      </nav>
    </div>

  </header>

  <main class="container mx-auto max-w-5xl pt-16 pb-20 px-6">
    <section class="text-center max-w-3xl mx-auto">
      <h1 class="text-5xl font-extrabold text-gray-900 mb-6 leading-tight">About Rare Cats Blog</h1>
      <p class="text-lg text-gray-600 mb-12 leading-relaxed">
        Welcome to Rare Cats Blog, your premier source for discovering and learning about the world's most extraordinary and lesser-known feline breeds.
        Our passion is to celebrate the unique beauty, fascinating histories, and captivating personalities of rare cats from around the globe.
      </p>
    </section>
    <section aria-label="Our Mission" class="mb-20">
      <div class="bg-gray-50 rounded-2xl p-10 shadow-md">
        <h2 class="text-3xl font-semibold text-gray-900 mb-4">Our Mission</h2>
        <p class="text-gray-600 leading-relaxed text-lg">
          At Rare Cats Blog, we strive to provide accurate, respectful, and comprehensive information about uncommon cat breeds.
          Whether your a cat enthusiast, breeder, or curious reader, our goal is to connect you with reliable resources, insightful articles, and stunning visuals that bring these exceptional cats to life.
        </p>
      </div>
    </section>


    <section aria-label="What We Offer" class="mb-20">
      <h2 class="text-3xl font-semibold text-gray-900 mb-10 text-center">What We Offer</h2>
      <div class="grid gap-10 md:grid-cols-3">
        <article class="bg-white rounded-2xl shadow-md p-8 flex flex-col items-center text-center transition-transform transform hover:scale-[1.03]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h2a1 1 0 001-1V7a4 4 0 014-4h4a4 4 0 014 4v2a1 1 0 001 1h2m-13 9h8a4 4 0 004-4v-1a4 4 0 00-4-4H8a4 4 0 00-4 4v1a4 4 0 004 4z" />
          </svg>
          <h3 class="text-xl font-semibold mb-2 text-gray-900">In-Depth Articles</h3>
          <p class="text-gray-600">Expertly researched and curated content that dives deep into each rare cat breed's origins, traits, and care tips.</p>
        </article>
        <article class="bg-white rounded-2xl shadow-md p-8 flex flex-col items-center text-center transition-transform transform hover:scale-[1.03]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
          </svg>
          <h3 class="text-xl font-semibold mb-2 text-gray-900">Stunning Photography</h3>
          <p class="text-gray-600">Curated galleries showcasing the elegance and uniqueness of rare cat breeds through beautiful imagery.</p>
        </article>

        <article class="bg-white rounded-2xl shadow-md p-8 flex flex-col items-center text-center transition-transform transform hover:scale-[1.03]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.24 7.76a6 6 0 11-8.48 8.48M12 12v.01" />
          </svg>
          <h3 class="text-xl font-semibold mb-2 text-gray-900">Community & Support</h3>
          <p class="text-gray-600">Connect with fellow cat lovers, share stories, advice, and resources about caring for these exceptional breeds.</p>
        </article>
      </div>
    </section>
    <section aria-label="Our Story">
      <h2 class="text-3xl font-semibold text-gray-900 mb-8 text-center">Our Story</h2>
      <p class="max-w-4xl mx-auto text-gray-600 text-lg leading-relaxed">
        Rare Cats Blog was founded by passionate feline enthusiasts who recognized the need for a dedicated resource celebrating unusual and rare cat breeds.
        We believe every cat tells a story and deserves recognition beyond common spotlight breeds.
        Our team includes breeders, veterinarians, photographers, and writers committed to creating a nurturing platform for education, admiration, and responsible pet ownership.
      </p>
    </section>
  </main>

  <footer class="bg-white border-t border-gray-200 mt-24">
    <div class="container mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-4 gap-8 text-gray-600">
      <div>
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Rare Cats Blog</h3>
        <p class="text-sm leading-relaxed">
          Bringing you closer to the most extraordinary cats worldwide. Learn, share, and celebrate our furry companions.
        </p>
      </div>
      <nav aria-label="Footer Navigation">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Explore</h3>
        <ul class="space-y-2 text-sm">
          <li><a href="index.html" class="hover:text-indigo-600 transition-colors">Home</a></li>
          <li><a href="About.html" class="hover:text-indigo-600 transition-colors">About</a></li>
          <li><a href="Services.html" class="hover:text-indigo-600 transition-colors">Services</a></li>
          <li><a href="Contact.html" class="hover:text-indigo-600 transition-colors">Contact</a></li>
        </ul>
      </nav>
      <div>
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Resources</h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-indigo-600 transition-colors">Care Tips</a></li>
          <li><a href="#" class="hover:text-indigo-600 transition-colors">Breed History</a></li>
          <li><a href="#" class="hover:text-indigo-600 transition-colors">Adoption Info</a></li>
          <li><a href="#" class="hover:text-indigo-600 transition-colors">FAQs</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Contact Us</h3>
        <address class="not-italic text-sm space-y-2">
          <p>123 Cat Lane</p>
          <p>Felineland, CA 90210</p>
          <p>Email: <a href="mailto:info@rarecatsblog.com" class="hover:text-indigo-600 transition-colors">info@rarecatsblog.com</a></p>
          <p>Phone: <a href="tel:+1234567890" class="hover:text-indigo-600 transition-colors">+1 (234) 567-890</a></p>
        </address>
      </div>
    </div>
    <div class="border-t border-gray-200 mt-8 py-6 text-center text-sm text-gray-400 select-none">
      &copy; 2025 Rare Cats Blog. All rights reserved.
    </div>
  </footer>


     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
   crossorigin="anonymous"></script>

</body>
</html>