Create cat photo app

Cat Photo App Description The Cat Photo App is a delightful web application designed to showcase a collection of adorable cat images. Built using HTML and CSS, this app features a responsive gallery layout that allows users to easily browse through various cat photos. Key Features: Responsive Design: The app adjusts seamlessly to different screen sizes, ensuring an optimal viewing experience on both desktop and mobile devices. Interactive Gallery: Users can enjoy a visually appealing grid layout of cat images, complete with hover effects that enhance the user experience. User-Friendly Interface: The clean and simple design makes it easy for users to navigate through the gallery. Customizable Content: Users can easily add or replace images in the gallery by updating the images folder. Technical Details: HTML Structure: The app includes a header with the title, a main section containing the image gallery, and a footer with credits. CSS Styling: The styles are designed to create a modern and inviting look, utilizing flexbox for layout and box shadows for depth. Usage: To use the Cat Photo App, simply open the index.html file in a web browser. The gallery will display a selection of cat images, which can be customized by adding new images to the images folder. Contribution: This project is part of the WebMasterLog repository, which encourages contributions from developers. Feel free to fork the repository, create your own branch, and submit pull requests with improvements or additional features! This description provides an overview of your Cat Photo App, highlighting its features and technical details while inviting others to contribute.
Avdhesh-Varshney · Dec 22, 2024 · 4b6065c · 4b6065c
1 parent e134e6f
commit 4b6065c
Showing 1 changed file with 104 additions and 0 deletions.
diff --git a/cat photo app b/cat photo app
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cat Photo App</title>
+    <link rel="stylesheet" href="catphoto.css"> <!-- Linking the CSS file -->
+</head>
+<body>
+    <header>
+        <h1>🐾 Cat Photo Gallery 🐾</h1>
+    </header>
+    <main>
+        <section class="gallery">
+            <!-- Image 1 -->
+            <div class="image-container">
+                <img src="images/cat1.png" alt="Cute Cat 1">
+                <p>Cute Cat 1</p>
+            </div>
+            <!-- Image 2 -->
+            <div class="image-container">
+                <img src="images/cat2.png" alt="Cute Cat 2">
+                <p>Cute Cat 2</p>
+            </div>
+            <!-- Placeholder Images -->
+            <div class="image-container">
+                <img src="images/cat3.jpg" alt="Placeholder Cat 3">
+                <p>Placeholder Cat 3</p>
+            </div>
+            <div class="image-container">
+                <img src="images/cat4.jpg" alt="Placeholder Cat 4">
+                <p>Placeholder Cat 4</p>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>Made with ❤️ by Ather</p>
+    </footer>
+</body>
+</html>
+
+
+  #CSS code 
+/* General Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+header {
+    background-color: #4CAF50;
+    color: white;
+    padding: 20px;
+    text-align: center;
+    width: 100%;
+}
+
+main {
+    padding: 20px;
+    width: 100%;
+    max-width: 1200px;
+}
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.image-container {
+    overflow: hidden;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.image-container img {
+    width: 100%;
+    height: auto;
+    transition: transform 0.3s ease-in-out;
+}
+
+.image-container img:hover {
+    transform: scale(1.1);
+}
+
+footer {
+    margin-top: 20px;
+    text-align: center;
+    background-color: #333;
+    color: white;
+    padding: 10px 0;
+    width: 100%;
+}