Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biology Project - Fatima Ali</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Lora:ital,wght@0,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
--primary-dark: #00332c;
--primary-teal: #006064;
--accent-gold: #ffb300;
--bg-light: #f8faf9;
--text-main: #333333;
}
* { box-sizing: border-box; }
body {
background-color: #121212;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
padding: 80px 0;
font-family: 'Montserrat', sans-serif;
}
/* Slide Core Style - Fixed Aspect Ratio 16:9 */
.slide {
width: 1100px;
height: 620px;
background: var(--bg-light);
box-shadow: 0 40px 80px rgba(0,0,0,0.6);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 8px;
padding: 50px;
}
/* Decorative Borders */
.slide::after {
content: "";
position: absolute;
bottom: 0; right: 0;
width: 150px; height: 150px;
background: linear-gradient(135deg, transparent 80%, var(--primary-teal) 80%);
opacity: 0.2;
}
/* Intro Slide */
.intro-slide {
background: linear-gradient(rgba(0,51,44,0.9), rgba(0,51,44,0.9)), url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80&w=1200');
background-size: cover;
color: white;
justify-content: center;
align-items: center;
text-align: center;
}
.intro-slide h1 {
font-size: 56px;
margin: 15px 0;
line-height: 1.2;
text-transform: uppercase;
}
.sdg-badge {
background: #00aed9;
padding: 8px 20px;
font-weight: bold;
font-size: 14px;
border-radius: 4px;
margin-bottom: 20px;
}
.profile-info {
margin-top: 40px;
padding: 20px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 10px;
display: inline-block;
}
.profile-info p { font-size: 22px; margin: 8px 0; font-weight: 300; }
.profile-info b { color: var(--accent-gold); }
/* General Slide Typography */
h2.title {
color: var(--primary-dark);
font-size: 40px;
margin-top: 0;
margin-bottom: 30px;
border-left: 10px solid var(--accent-gold);
padding-left: 20px;
line-height: 1;
}
.content-wrap {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: start;
}
.text-part h3 { color: var(--primary-teal); font-size: 24px; margin-bottom: 15px; }
.text-part p, .text-part li {
font-size: 17px;
line-height: 1.6;
color: var(--text-main);
margin-bottom: 12px;
}
.text-part ul { padding-left: 20px; }
.img-part {
height: 380px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.img-part img { width: 100%; height: 100%; object-fit: cover; }
/* Stakeholder Table */
.table-wrap { overflow-x: auto; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; }
th { background: var(--primary-dark); color: white; padding: 15px; text-align: left; font-size: 18px; }
td { padding: 15px; border-bottom: 1px solid #ddd; font-size: 16px; }
/* Conclusion Slide Special */
.conclusion-slide {
background-color: var(--primary-dark);
color: white;
justify-content: center;
align-items: center;
text-align: center;
padding: 80px;
}
.conclusion-text {
font-family: 'Lora', serif;
font-size: 28px;
line-height: 1.8;
max-width: 900px;
position: relative;
}
.conclusion-text i {
color: var(--accent-gold);
font-size: 40px;
display: block;
margin-bottom: 20px;
}
/* Thank You Section */
.thanks-section { text-align: center; margin-top: auto; }
.thanks-section h2 { font-size: 60px; color: var(--primary-dark); margin: 0; }
</style>
</head>
<body>
<!-- Slide 1: Professional Header -->
<section class="slide intro-slide">
<div class="sdg-badge">Global Partnership | SDG 17</div>
<h1>Biological Disruption &<br>The Power of Partnership</h1>
<p style="font-size: 18px; opacity: 0.9;">Focus: Restoration of Mangrove Ecosystems (Blue Carbon)</p>
<div class="profile-info">
<p>Prepared by: <b>Fatima Ali Almatrooshi</b></p>
<p>Class: <b>12B</b></p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Sustainable_Development_Goal_17.png/1200px-Sustainable_Development_Goal_17.png" alt="SDG 17" style="height: 80px; margin-top: 30px;">
</section>
<!-- Slide 2: Driving Questions -->
<section class="slide">
<h2 class="title">Strategic Overview</h2>
<div class="content-wrap">
<div class="text-part">
<h3>Big Idea</h3>
<p>Ecosystems are delicate biological networks. When human activity disrupts a "Keystone Species" or habitat, the entire system collapses. However, through SDG 17, we can unite global resources to reverse this damage.</p>
<h3>Driving Question</h3>
<p><i>How can a multi-stakeholder partnership synchronize science and policy to restore the biological integrity of coastal ecosystems?</i></p>
</div>
<div class="img-part">
<img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&q=80&w=1000" alt="Nature and science">
</div>
</div>
</section>
<!-- Slide 3: Ecosystem & Disruption (Mangroves) -->
<section class="slide">
<h2 class="title">Task 1: The Coastal Sentinel</h2>
<div class="content-wrap">
<div class="text-part">
<h3>The Chosen Ecosystem: Mangroves</h3>
<p>Mangroves are salt-tolerant forests that act as the Earth's "Blue Carbon" lungs. They are biologically unique because:</p>
<ul>
<li>They store 4x more carbon than tropical rainforests.</li>
<li>They provide a habitat for 75% of tropical marine life.</li>
</ul>
<h3 style="color: #c62828;">The Disruption: Habitat Clearing</h3>
<p>Urbanization and shrimp farming have destroyed 35% of mangroves globally, causing massive carbon release and biodiversity loss.</p>
</div>
<div class="img-part">
<img src="https://images.unsplash.com/photo-1621460245192-22879685a363?auto=format&fit=crop&q=80&w=1000" alt="Mangrove Roots">
</div>
</div>
</section>
<!-- Slide 4: Scientific Impact -->
<section class="slide">
<h2 class="title">Scientific Consequences</h2>
<div class="content-wrap">
<div class="img-part">
<img src="https://images.unsplash.com/photo-1597344154604-006f654f5934?auto=format&fit=crop&q=80&w=1000" alt="Environmental damage">
</div>
<div class="text-part">
<h3>The Biological Domino Effect</h3>
<p>When mangroves are removed, three critical failures occur:</p>
<ol>
<li><b>Trophic Cascade:</b> Without root nurseries, fish populations collapse, leading to a food chain failure.</li>
<li><b>Eutrophication:</b> Land pollutants are no longer filtered, creating marine "dead zones."</li>
<li><b>Carbon Oxidation:</b> Disturbed peat soils release centuries of stored CO2 back into the atmosphere.</li>
</ol>
</div>
</div>
</section>
<!-- Slide 5: Stakeholders (Task 2) -->
<section class="slide">
<h2 class="title">Task 2: Stakeholder Matrix</h2>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Partner</th>
<th>Specific Role</th>
<th>Biological Impact</th>
</tr>
</thead>
<tbody>
<tr>
<td><b>Governments</b></td>
<td>Create Protection Laws</td>
<td>Designating Marine Protected Areas (MPAs).</td>
</tr>
<tr>
<td><b>Scientists</b></td>
<td>Genetics & Research</td>
<td>Developing salt-resistant sapling varieties.</td>
</tr>
<tr>
<td><b>NGOs</b></td>
<td>Funding & Awareness</td>
<td>Mobilizing "Blue Carbon" investments.</td>
</tr>
<tr>
<td><b>Tech Firms</b></td>
<td>AI & Drones</td>
<td>Precision planting in difficult tidal zones.</td>
</tr>
<tr>
<td><b>Communities</b></td>
<td>Nursery Maintenance</td>
<td>Ensuring long-term survival of new trees.</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Slide 6: Partnership Solution (Task 3) -->
<section class="slide">
<h2 class="title">Task 3: "The Blue Shield" Plan</h2>
<div class="content-wrap">
<div class="text-part">
<h3>A Global Restoration Strategy</h3>
<p>Our solution integrates three key actions:</p>
<ul>
<li><b>Smart Planting:</b> Using satellite data to find optimal growth zones.</li>
<li><b>Eco-Economy:</b> Creating sustainable "Silvofisheries" where shrimp and trees grow together.</li>
<li><b>Continuous Monitoring:</b> Using underwater sensors to track water quality and biodiversity return.</li>
</ul>
</div>
<div class="img-part">
<img src="https://images.unsplash.com/photo-1545562125-33f7c166d498?auto=format&fit=crop&q=80&w=1000" alt="Reforestation">
</div>
</div>
</section>
<!-- Slide 7: UAE Evidence (Task 4) -->
<section class="slide">
<h2 class="title">Task 4: UAE Case Study</h2>
<div class="content-wrap">
<div class="img-part">
<img src="https://images.unsplash.com/photo-1583212292454-1fe6229603b7?auto=format&fit=crop&q=80&w=1000" alt="UAE Mangroves">
</div>
<div class="text-part">
<h3>A Model for Global Partnership</h3>
<p>The UAE is a pioneer in mangrove restoration through the <b>Abu Dhabi Mangrove Initiative</b>:</p>
<ul>
<li><b>Goal:</b> 100 Million Mangroves by 2030.</li>
<li><b>SDG 17 in Action:</b> Partnership between EAD, local universities, and tech startups.</li>
<li><b>Technology:</b> UAE leads the world in drone-dispersed planting in desert coastlines.</li>
</ul>
</div>
</div>
</section>
<!-- Slide 8: THE CONCLUSION (Dedicated Slide) -->
<section class="slide conclusion-slide">
<div class="conclusion-text">
<i class="fa-solid fa-quote-left"></i>
In conclusion, the restoration of our coastal ecosystems is not a choice, but a biological necessity for survival. Through the framework of **SDG 17**, we have learned that global challenges require global unity. <br><br>
When we align science, policy, and community heart, we create a resilient future where nature and progress thrive together.
<br><br>
<b>"Together, we are the guardians of the Blue Carbon."</b>
</div>
</section>
<!-- Slide 9: Q&A -->
<section class="slide" style="justify-content: center; align-items: center;">
<div class="thanks-section">
<h2>THANK YOU</h2>
<p style="font-size: 22px; color: var(--primary-teal); margin-top: 10px;">Any Questions?</p>
<div style="margin-top: 60px; opacity: 0.7;">
<p><b>Fatima Ali Almatrooshi</b></p>
<p>Grade 12B | Biology Project</p>
</div>
</div>
</section>
</body>
</html>
```
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
13
Requests
6
Domains
741KB
Transfer Size
834KB
Content Size
670.0ms
Dom Content Loaded
116.0ms
First Paint
914.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...