<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="upgrade-insecure-requests" http-equiv="Content-Security-Policy">
<title>Exploring South Berlin</title>
<style>
body{background-color:#fff;font-family:Arial,sans-serif;color:#000;margin:0;padding:0}.step{width:600px;border-radius:10px;padding:40px;background-color:#f0f0f0;color:#333;text-align:center;opacity:0;transition:opacity 1s}.step img{opacity:0;transition:opacity 1s}.active{opacity:1;transition:opacity 1s}.active img{opacity:1;transition:opacity 1s}h1{font-size:2.5em;color:#007BFF;text-shadow:2px 2px 4px rgba(0,0,0,.3)}p{font-size:1.2em;line-height:1.4;margin:20px 0}
</style>
</head>
<body>
<div id="impress">
<div id="welcome-to-south-berlin" class="step" data-x="0" data-y="0" data-scale="4">
<h1>Welcome to South Berlin π</h1>
<p><strong>Introduction to South Berlin</strong><br>Overview of South Berlin's historical and cultural significance<br>Map highlighting South Berlin areas</p>
</div>
<div id="historical-background" class="step" data-x="1000" data-y="-1500" data-scale="2" data-rotate="90">
<h1>Historical Background π°οΈ</h1>
<p><strong>The Story of Berlin's Division</strong><br>Key events leading to the division of Berlin after World War II<br>The impact of the Berlin Wall on South Berlin</p>
</div>
<div id="cultural-highlights" class="step" data-x="2000" data-y="0" data-scale="6">
<h1>Cultural Highlights of South Berlin π¨π΅</h1>
<p><strong>Art and Music Scene</strong><br>Famous galleries and street art in Kreuzberg and NeukΓΆlln<br>Overview of music venues and cultural festivals</p>
</div>
<div id="architectural-landmarks" class="step" data-x="3000" data-y="1000" data-scale="2" data-rotate="180">
<h1>Architectural Landmarks ποΈ</h1>
<p><strong>Iconic Structures and Buildings</strong><br>Tempelhof Airport: A symbol of freedom and innovation<br>The Landwehr Canal: History and modern-day significance</p>
</div>
<div id="green-spaces" class="step" data-x="4000" data-y="2000" data-scale="3">
<h1>Green Spaces and Recreation π³</h1>
<p><strong>Parks and Nature in South Berlin</strong><br>Tempelhofer Feld: A massive park on an historic airfield<br>Viktoriapark: Panoramic views and a national monument</p>
</div>
<div id="culinary-journey" class="step" data-x="5000" data-y="-1000" data-scale="2" data-rotate="270">
<h1>Culinary Journey Through South Berlin π½οΈ</h1>
<p><strong>Diverse Culinary Scene</strong><br>Highlights of international cuisine available<br>Recommended restaurants and street food spots</p>
</div>
<div id="tech-hub" class="step" data-x="6000" data-y="0" data-scale="4">
<h1>Tech Hub and Innovation π‘</h1>
<p><strong>South Berlin's Role in Tech and Startups</strong><br>Overview of technology startups and coworking spaces<br>Impact on local economy and global tech scene</p>
</div>
<div id="nightlife" class="step" data-x="7000" data-y="1500" data-scale="2" data-rotate="360">
<h1>Nightlife and Entertainment π</h1>
<p><strong>Vibrant Nightlife</strong><br>Best clubs and bars in South Berlin<br>Tips on experiencing the nightlife like a local</p>
</div>
<div id="living-in-south-berlin" class="step" data-x="8000" data-y="-500" data-scale="6">
<h1>Living in South Berlin π‘</h1>
<p><strong>Residential Life</strong><br>Overview of residential areas and community life<br>Cost of living and quality of life in South Berlin</p>
</div>
<div id="summary-conclusion" class="step" data-x="9000" data-y="2500" data-scale="10">
<h1>Summary & Conclusion π</h1>
<p><strong>Why South Berlin is Unique</strong><br>Recap of South Berlin's highlights and why it's a must-visit/must-live area<br>Encouragement to explore further and discover its hidden gems</p>
</div>
</div>
<script src="https://impress.github.io/impress.js/js/impress.js"></script>
<script>impress().init()</script>
</body>
</html>