From 4b6065c7a04cf1cd9d6f77039cbd07269ff0aab8 Mon Sep 17 00:00:00 2001 From: Ather Johear Noor <158666033+atherjnoor@users.noreply.github.com> Date: Sat, 21 Dec 2024 21:18:47 -0600 Subject: [PATCH] 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. --- cat photo app | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 cat photo app diff --git a/cat photo app b/cat photo app new file mode 100644 index 00000000..7d4ddbbc --- /dev/null +++ b/cat photo app @@ -0,0 +1,104 @@ + + + + + + Cat Photo App + + + +
+

🐾 Cat Photo Gallery 🐾

+
+
+
+ +
+ Cute Cat 1 +

Cute Cat 1

+
+ +
+ Cute Cat 2 +

Cute Cat 2

+
+ +
+ Placeholder Cat 3 +

Placeholder Cat 3

+
+
+ Placeholder Cat 4 +

Placeholder Cat 4

+
+
+
+ + + + + + #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%; +}