Skip to content

Add frog picture gallery website #12095

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Add frog picture gallery website #12095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Froggy Gallery - Amazing Frog Pictures</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>🐸 Froggy Gallery 🐸</h1>
<p>Discover the most amazing frogs from around the world!</p>
</header>

<main class="gallery-container">
<div class="frog-card">
<img src="https://images.unsplash.com/photo-1564349683136-77e08dba1ef7?w=500" alt="Green Tree Frog">
<div class="card-content">
<h3>Green Tree Frog</h3>
<p>A beautiful green tree frog resting on a leaf</p>
</div>
</div>

<div class="frog-card">
<img src="https://images.unsplash.com/photo-1545147986-a9d6f2ab03b5?w=500" alt="Red-Eyed Tree Frog">
<div class="card-content">
<h3>Red-Eyed Tree Frog</h3>
<p>The iconic red-eyed tree frog from Central America</p>
</div>
</div>

<div class="frog-card">
<img src="https://images.unsplash.com/photo-1551446339-232c8c673748?w=500" alt="Poison Dart Frog">
<div class="card-content">
<h3>Poison Dart Frog</h3>
<p>Vibrant and colorful poison dart frog</p>
</div>
</div>

<div class="frog-card">
<img src="https://images.unsplash.com/photo-1604176010405-82e929605de4?w=500" alt="Amazon Milk Frog">
<div class="card-content">
<h3>Amazon Milk Frog</h3>
<p>Unique patterned frog from the Amazon rainforest</p>
</div>
</div>

<div class="frog-card">
<img src="https://images.unsplash.com/photo-1595992595296-e81c0f3e3e3e?w=500" alt="Common Frog">
<div class="card-content">
<h3>Common Frog</h3>
<p>A classic frog you might find in your backyard</p>
</div>
</div>

<div class="frog-card">
<img src="https://images.unsplash.com/photo-1535338854775-e37c0e6e136c?w=500" alt="Glass Frog">
<div class="card-content">
<h3>Glass Frog</h3>
<p>Transparent belly allows you to see its organs</p>
</div>
</div>
</main>

<footer>
<p>Made with 💚 for frog enthusiasts everywhere</p>
</footer>
</body>
</html>
127 changes: 127 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; }
Loading