diff --git a/index.html b/index.html new file mode 100644 index 00000000000..a1351c7e445 --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + + Froggy Gallery - Amazing Frog Pictures + + + +
+

🐸 Froggy Gallery 🐸

+

Discover the most amazing frogs from around the world!

+
+ +
+
+ Green Tree Frog +
+

Green Tree Frog

+

A beautiful green tree frog resting on a leaf

+
+
+ +
+ Red-Eyed Tree Frog +
+

Red-Eyed Tree Frog

+

The iconic red-eyed tree frog from Central America

+
+
+ +
+ Poison Dart Frog +
+

Poison Dart Frog

+

Vibrant and colorful poison dart frog

+
+
+ +
+ Amazon Milk Frog +
+

Amazon Milk Frog

+

Unique patterned frog from the Amazon rainforest

+
+
+ +
+ Common Frog +
+

Common Frog

+

A classic frog you might find in your backyard

+
+
+ +
+ Glass Frog +
+

Glass Frog

+

Transparent belly allows you to see its organs

+
+
+
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000000..a7a90415790 --- /dev/null +++ b/styles.css @@ -0,0 +1,127 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + padding: 20px; +} + +header { + text-align: center; + color: white; + padding: 40px 20px; + margin-bottom: 40px; +} + +header h1 { + font-size: 3.5rem; + margin-bottom: 10px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); + animation: bounce 2s ease-in-out infinite; +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } +} + +header p { + font-size: 1.3rem; + opacity: 0.9; +} + +.gallery-container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + padding: 20px; +} + +.frog-card { + background: white; + border-radius: 15px; + overflow: hidden; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); + transition: transform 0.3s ease, box-shadow 0.3s ease; + cursor: pointer; +} + +.frog-card:hover { + transform: translateY(-10px) scale(1.02); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); +} + +.frog-card img { + width: 100%; + height: 250px; + object-fit: cover; + display: block; +} + +.card-content { + padding: 20px; +} + +.card-content h3 { + color: #667eea; + margin-bottom: 10px; + font-size: 1.5rem; +} + +.card-content p { + color: #666; + line-height: 1.6; +} + +footer { + text-align: center; + color: white; + padding: 40px 20px; + margin-top: 40px; + font-size: 1.2rem; +} + +@media (max-width: 768px) { + header h1 { + font-size: 2.5rem; + } + + .gallery-container { + grid-template-columns: 1fr; + } +} + +/* Add a subtle animation when page loads */ +.frog-card { + animation: fadeIn 0.6s ease-in; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Stagger the animations */ +.frog-card:nth-child(1) { animation-delay: 0.1s; } +.frog-card:nth-child(2) { animation-delay: 0.2s; } +.frog-card:nth-child(3) { animation-delay: 0.3s; } +.frog-card:nth-child(4) { animation-delay: 0.4s; } +.frog-card:nth-child(5) { animation-delay: 0.5s; } +.frog-card:nth-child(6) { animation-delay: 0.6s; }