Differences

This shows you the differences between two versions of the page.

--- geography [2026/02/10 19:39] – hjb
+++ geography [2026/02/10 22:41] (current) – hjb
@@ Line 1: / Line 1: @@
+Geography
 <html>
-<div class="flip-grid">
+<div style="height:16px;"></div>
+</html>
-  <div class="flip-card">
+<html>
-    <div class="flip-card-inner">
+<span style="font-size:24px; font-weight:700;">
-      <div class="flip-card-front">
+  <a href="/doku.php?id=ks4_geography" style="color:#16a34a; text-decoration:none;">KS4 Geography</a>
-        <h3>English</h3>
+</span>
-        <p>Click to flip</p>
-      </div>
-      <div class="flip-card-back">
-        <h3>English</h3>
-        <p>Poetry, language analysis, creative writing, revision resources.</p>
-        <a href="/doku.php?id=english">Open page</a>
-      </div>
-    </div>
-  </div>
-  <div class="flip-card">
-    <div class="flip-card-inner">
-      <div class="flip-card-front">
-        <h3>Maths</h3>
-        <p>Click to flip</p>
-      </div>
-      <div class="flip-card-back">
-        <h3>Maths</h3>
-        <p>Arithmetic, algebra, geometry, exam skills, starter tasks.</p>
-        <a href="/doku.php?id=maths">Open page</a>
-      </div>
-    </div>
-  </div>
-  <div class="flip-card">
-    <div class="flip-card-inner">
-      <div class="flip-card-front">
-        <h3>Science</h3>
-        <p>Click to flip</p>
-      </div>
-      <div class="flip-card-back">
-        <h3>Science</h3>
-        <p>Biology, Chemistry, Physics, practicals, key vocabulary.</p>
-        <a href="/doku.php?id=science">Open page</a>
-      </div>
-    </div>
-  </div>
-  <div class="flip-card">
-    <div class="flip-card-inner">
-      <div class="flip-card-front">
-        <h3>History</h3>
-        <p>Click to flip</p>
-      </div>
-      <div class="flip-card-back">
-        <h3>History</h3>
-        <p>Key events, source analysis, timelines, retrieval quizzes.</p>
-        <a href="/doku.php?id=history">Open page</a>
-      </div>
-    </div>
-  </div>
-</div>
-<style>
-/* Grid */
-.flip-grid{
-  display:grid;
-  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
-  gap:16px;
-  margin:14px 0;
-}
-/* Card container gives perspective */
-.flip-card{
-  background:transparent;
-  perspective:1000px;
-  min-height:190px;
-}
-/* Inner wrapper flips */
-.flip-card-inner{
-  position:relative;
-  width:100%;
-  height:190px;
-  text-align:center;
-  transition:transform .6s;
-  transform-style:preserve-3d;
-  cursor:pointer;
-}
-/* flip on hover (desktop) */
-.flip-card:hover .flip-card-inner{
-  transform:rotateY(180deg);
-}
-/* flip on tap/click (mobile + desktop) */
-.flip-card.is-flipped .flip-card-inner{
-  transform:rotateY(180deg);
-}
-/* Front and back */
-.flip-card-front, .flip-card-back{
-  position:absolute;
-  width:100%;
-  height:100%;
-  -webkit-backface-visibility:hidden;
-  backface-visibility:hidden;
-  border:1px solid #e5e7eb;
-  border-radius:14px;
-  box-shadow:0 5px 14px rgba(0,0,0,.08);
-  padding:16px;
-  display:flex;
-  flex-direction:column;
-  justify-content:center;
-  align-items:center;
-}
-.flip-card-front{
-  background:#ffffff;
-  color:#111827;
-}
-.flip-card-back{
-  background:#f9fafb;
-  color:#111827;
-  transform:rotateY(180deg);
-}
-.flip-card h3{
-  margin:0 0 8px;
-  font-size:1.15rem;
-}
-.flip-card p{
-  margin:0 0 10px;
-  line-height:1.4;
-  font-size:.95rem;
-}
-.flip-card a{
-  display:inline-block;
-  margin-top:4px;
-  text-decoration:none;
-  font-weight:700;
-  border:1px solid #d1d5db;
-  border-radius:10px;
-  padding:7px 10px;
-  color:#111827;
-  background:#fff;
-}
-</style>
-<script>
-(function(){
-  // Click/tap to flip each card
-  var cards = document.querySelectorAll('.flip-card');
-  cards.forEach(function(card){
-    card.addEventListener('click', function(e){
-      // allow link click on back without immediately re-flipping first
-      if(e.target.tagName.toLowerCase() === 'a') return;
-      card.classList.toggle('is-flipped');
-    });
-  });
-})();
-</script>
 </html>
-{{url>https://slides.owlwyze.org/sheilaquotes.html width,height noscroll noborder alignment fullscreen|alternate-text}}