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! 🌟