Skip to content

Commit 97bf9a8

Browse files
claudeclaude
committed
Add frog picture gallery website
Created a responsive frog picture gallery featuring: - Clean HTML structure with semantic elements - Beautiful gradient background and card-based layout - Hover animations and smooth transitions - Mobile-responsive design - Gallery of 6 different frog species with images from Unsplash
1 parent 060c1e7 commit 97bf9a8

File tree

2 files changed

+196
-0
lines changed

2 files changed

+196
-0
lines changed

‎index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Froggy Gallery - Amazing Frog Pictures</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>🐸 Froggy Gallery 🐸</h1>
12+
<p>Discover the most amazing frogs from around the world!</p>
13+
</header>
14+
15+
<main class="gallery-container">
16+
<div class="frog-card">
17+
<img src="https://images.unsplash.com/photo-1564349683136-77e08dba1ef7?w=500" alt="Green Tree Frog">
18+
<div class="card-content">
19+
<h3>Green Tree Frog</h3>
20+
<p>A beautiful green tree frog resting on a leaf</p>
21+
</div>
22+
</div>
23+
24+
<div class="frog-card">
25+
<img src="https://images.unsplash.com/photo-1545147986-a9d6f2ab03b5?w=500" alt="Red-Eyed Tree Frog">
26+
<div class="card-content">
27+
<h3>Red-Eyed Tree Frog</h3>
28+
<p>The iconic red-eyed tree frog from Central America</p>
29+
</div>
30+
</div>
31+
32+
<div class="frog-card">
33+
<img src="https://images.unsplash.com/photo-1551446339-232c8c673748?w=500" alt="Poison Dart Frog">
34+
<div class="card-content">
35+
<h3>Poison Dart Frog</h3>
36+
<p>Vibrant and colorful poison dart frog</p>
37+
</div>
38+
</div>
39+
40+
<div class="frog-card">
41+
<img src="https://images.unsplash.com/photo-1604176010405-82e929605de4?w=500" alt="Amazon Milk Frog">
42+
<div class="card-content">
43+
<h3>Amazon Milk Frog</h3>
44+
<p>Unique patterned frog from the Amazon rainforest</p>
45+
</div>
46+
</div>
47+
48+
<div class="frog-card">
49+
<img src="https://images.unsplash.com/photo-1595992595296-e81c0f3e3e3e?w=500" alt="Common Frog">
50+
<div class="card-content">
51+
<h3>Common Frog</h3>
52+
<p>A classic frog you might find in your backyard</p>
53+
</div>
54+
</div>
55+
56+
<div class="frog-card">
57+
<img src="https://images.unsplash.com/photo-1535338854775-e37c0e6e136c?w=500" alt="Glass Frog">
58+
<div class="card-content">
59+
<h3>Glass Frog</h3>
60+
<p>Transparent belly allows you to see its organs</p>
61+
</div>
62+
</div>
63+
</main>
64+
65+
<footer>
66+
<p>Made with 💚 for frog enthusiasts everywhere</p>
67+
</footer>
68+
</body>
69+
</html>

‎styles.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
10+
min-height: 100vh;
11+
padding: 20px;
12+
}
13+
14+
header {
15+
text-align: center;
16+
color: white;
17+
padding: 40px 20px;
18+
margin-bottom: 40px;
19+
}
20+
21+
header h1 {
22+
font-size: 3.5rem;
23+
margin-bottom: 10px;
24+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
25+
animation: bounce 2s ease-in-out infinite;
26+
}
27+
28+
@keyframes bounce {
29+
0%, 100% {
30+
transform: translateY(0);
31+
}
32+
50% {
33+
transform: translateY(-10px);
34+
}
35+
}
36+
37+
header p {
38+
font-size: 1.3rem;
39+
opacity: 0.9;
40+
}
41+
42+
.gallery-container {
43+
max-width: 1200px;
44+
margin: 0 auto;
45+
display: grid;
46+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
47+
gap: 30px;
48+
padding: 20px;
49+
}
50+
51+
.frog-card {
52+
background: white;
53+
border-radius: 15px;
54+
overflow: hidden;
55+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
56+
transition: transform 0.3s ease, box-shadow 0.3s ease;
57+
cursor: pointer;
58+
}
59+
60+
.frog-card:hover {
61+
transform: translateY(-10px) scale(1.02);
62+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
63+
}
64+
65+
.frog-card img {
66+
width: 100%;
67+
height: 250px;
68+
object-fit: cover;
69+
display: block;
70+
}
71+
72+
.card-content {
73+
padding: 20px;
74+
}
75+
76+
.card-content h3 {
77+
color: #667eea;
78+
margin-bottom: 10px;
79+
font-size: 1.5rem;
80+
}
81+
82+
.card-content p {
83+
color: #666;
84+
line-height: 1.6;
85+
}
86+
87+
footer {
88+
text-align: center;
89+
color: white;
90+
padding: 40px 20px;
91+
margin-top: 40px;
92+
font-size: 1.2rem;
93+
}
94+
95+
@media (max-width: 768px) {
96+
header h1 {
97+
font-size: 2.5rem;
98+
}
99+
100+
.gallery-container {
101+
grid-template-columns: 1fr;
102+
}
103+
}
104+
105+
/* Add a subtle animation when page loads */
106+
.frog-card {
107+
animation: fadeIn 0.6s ease-in;
108+
}
109+
110+
@keyframes fadeIn {
111+
from {
112+
opacity: 0;
113+
transform: translateY(20px);
114+
}
115+
to {
116+
opacity: 1;
117+
transform: translateY(0);
118+
}
119+
}
120+
121+
/* Stagger the animations */
122+
.frog-card:nth-child(1) { animation-delay: 0.1s; }
123+
.frog-card:nth-child(2) { animation-delay: 0.2s; }
124+
.frog-card:nth-child(3) { animation-delay: 0.3s; }
125+
.frog-card:nth-child(4) { animation-delay: 0.4s; }
126+
.frog-card:nth-child(5) { animation-delay: 0.5s; }
127+
.frog-card:nth-child(6) { animation-delay: 0.6s; }

0 commit comments

Comments
 (0)