Differences

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

--- menu [2026/02/10 18:30] – created 86.155.40.183
+++ menu [2026/02/10 19:26] (current) – hjb
@@ Line 1: / Line 1: @@
-This is the menu
+<div class="profile-grid">
+  <article class="profile-card">
+    <img src="https://via.placeholder.com/300x300.png?text=Profile+1" alt="Profile photo of Alex Carter">
+    <div class="profile-content">
+      <h3>Alex Carter</h3>
+      <p class="role">Head of English</p>
+      <p>Passionate about literature, creative writing, and helping students build confidence in analysis.</p>
+      <a href="#" class="btn">View Profile</a>
+    </div>
+  </article>
+  <article class="profile-card">
+    <img src="https://via.placeholder.com/300x300.png?text=Profile+2" alt="Profile photo of Priya Shah">
+    <div class="profile-content">
+      <h3>Priya Shah</h3>
+      <p class="role">Maths Teacher</p>
+      <p>Focused on making maths visual, engaging, and accessible for all learners across KS3 and KS4.</p>
+      <a href="#" class="btn">View Profile</a>
+    </div>
+  </article>
+  <article class="profile-card">
+    <img src="https://via.placeholder.com/300x300.png?text=Profile+3" alt="Profile photo of Jordan Lee">
+    <div class="profile-content">
+      <h3>Jordan Lee</h3>
+      <p class="role">Science Teacher</p>
+      <p>Specialist in practical science with a love for experiments, inquiry, and real-world connections.</p>
+      <a href="#" class="btn">View Profile</a>
+    </div>
+  </article>
+  <article class="profile-card">
+    <img src="https://via.placeholder.com/300x300.png?text=Profile+4" alt="Profile photo of Samira Khan">
+    <div class="profile-content">
+      <h3>Samira Khan</h3>
+      <p class="role">SEN Coordinator</p>
+      <p>Dedicated to inclusive practice, adaptive teaching, and personalised support for every learner.</p>
+      <a href="#" class="btn">View Profile</a>
+    </div>
+  </article>
+</div>
+<style>
+  .profile-grid{
+    display:grid;
+    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
+    gap:18px;
+    margin:18px 0;
+  }
+  .profile-card{
+    background:#fff;
+    border:1px solid #e5e7eb;
+    border-radius:16px;
+    overflow:hidden;
+    box-shadow:0 6px 18px rgba(0,0,0,.08);
+    transition:transform .18s ease, box-shadow .18s ease;
+  }
+  .profile-card:hover{
+    transform:translateY(-4px);
+    box-shadow:0 12px 24px rgba(0,0,0,.12);
+  }
+  .profile-card img{
+    width:100%;
+    aspect-ratio:1/1;
+    object-fit:cover;
+    display:block;
+  }
+  .profile-content{
+    padding:14px;
+  }
+  .profile-content h3{
+    margin:0 0 6px;
+    font-size:1.1rem;
+    line-height:1.2;
+    color:#111827;
+  }
+  .role{
+    margin:0 0 10px;
+    font-weight:600;
+    color:#4b5563;
+    font-size:.95rem;
+  }
+  .profile-content p{
+    margin:0 0 14px;
+    color:#374151;
+    line-height:1.5;
+    font-size:.95rem;
+  }
+  .btn{
+    display:inline-block;
+    text-decoration:none;
+    background:#111827;
+    color:#fff;
+    padding:8px 12px;
+    border-radius:10px;
+    font-size:.9rem;
+    font-weight:600;
+  }
+  .btn:hover{
+    opacity:.9;
+  }
+</style>