Here is a beautiful HTML code for your 📗 Our Environment — Class 10 CBSE flashcards.
It’s clean, colorful, responsive & visually engaging.
You can save this as an .html file and open in browser!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Environment Flashcards</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f2f9ff;
margin: 0;
padding: 20px;
color: #333;
}
h1 {
text-align: center;
color: #0066cc;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.flashcard {
background: #fff;
border-left: 6px solid #4CAF50;
padding: 15px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
border-radius: 8px;
width: 300px;
transition: transform 0.2s;
}
.flashcard:hover {
transform: scale(1.03);
}
.flashcard h3 {
color: #4CAF50;
}
.flashcard p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>✨ Flashcards — Our Environment 🌏</h1>
<p style="text-align:center;">Here is a set of flashcards for quick revision of 📗 Our Environment — Class 10 CBSE.<br>You can even copy these into slides, apps like Quizlet, or print them!</p>
<div class="container">
<div class="flashcard">
<h3>🔷 Flashcard 1</h3>
<p><b>Q:</b> What is an ecosystem?</p>
<p>An ecosystem is the interaction of living (biotic) and non-living (abiotic) components in a specific area.<br>Example: Pond, forest, desert.</p>
</div>
<div class="flashcard">
<h3>🔷 Flashcard 2</h3>
<p><b>Q:</b> What is a food chain?</p>
<p>A sequence of organisms where one is eaten by the next.<br>Example: Grass → Grasshopper → Frog → Snake → Hawk</p>
</div>
<div class="flashcard">
<h3>🔷 Flashcard 3</h3>
<p><b>Q:</b> What is a food web?</p>
<p>A network of interconnected food chains in an ecosystem.</p>
</div>
<div class="flashcard">
<h3>🔷 Flashcard 4</h3>
<p><b>Q:</b> Define trophic level.</p>
<p>The position an organism occupies in a food chain.</p>
</div>
<div class="flashcard">
<h3>🔷 Flashcard 5</h3>
<p><b>Q:</b> What is the 10% Law?</p>
<p>Only 10% of energy is transferred from one trophic level to the next; rest is lost as heat.</p>
</div>
<div class="flashcard">
<h3>🔷 Flashcard 6</h3>
<p><b>Q:</b> Why is energy flow in an ecosystem unidirectional?</p>
<p>Because energy comes from the Sun, flows through organisms, and is lost as heat — it doesn’t return to the Sun.</p>
</div>
<div class="flashcard">
<h3>🔷 Flashcard 7</h3>
<p><b>Q:</b> What is the role of decomposers?</p>
<p>Decomposers break down dead organisms and recycle nutrients back to the environment.</p>
</div>
<div class="flashcard">
<h3>🔷 Flashcard 8</h3>
<p><b>Q:</b> What is ozone and why is it important?</p>
<p>Ozone (O₃) in the stratosphere protects Earth from harmful UV rays.</p>
</div>
<div class="flashcard">
<h3>🔷 Flashcard 9</h3>
<p><b>Q:</b> What are CFCs and why are they harmful?</p>
<p>Chlorofluorocarbons are chemicals that destroy the ozone layer.</p>
</div>
<div class="flashcard">
<h3>🔷 Flashcard 10</h3>
<p><b>Q:</b> What is the difference between biodegradable and non-biodegradable waste?</p>
<p>Biodegradable: Decomposed by microbes (e.g., food, paper).<br>Non-biodegradable: Cannot decompose easily (e.g., plastics, metals).</p>
</div>
</div>
</body>
</html>
📋 Features:
✅ Clean, colorful, responsive.
✅ Hover effect for cards.
✅ Easy to edit or add more flashcards.
✅ Suitable for web or print.
If you’d like, I can also:
🎨 Add animations.
🌈 Use different colors for each card.
📄 Convert this to PDF.
Just say:
“Add animations” or
“Make PDF” or
“Different colors per card”
Let me know! 🌟