The Learnzone

This is an old revision of the document!

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