Code Solution:
<!DOCTYPE html>
<html lang="kk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сенім шамы</title>
<style>
body {
background: radial-gradient(circle, #1a2a6c, #b21f1f, #fdbb2d);
background-size: cover;
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
padding: 20px;
}
h1 {
font-size: 3rem;
text-shadow: 0 0 20px #fff, 0 0 30px #fdbb2d;
margin-bottom: 30px;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
width: 90%;
max-width: 1200px;
}
.student-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.student-card:hover {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.student-photo {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 15px;
border: 3px solid rgba(255, 255, 255, 0.5);
}
.student-name {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
}
.student-wish {
font-size: 0.9em;
line-height: 1.4;
color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 600px) {
h1 {
font-size: 2em;
}
}
</style>
</head>
<body>
<h1>Сенім шамы</h1>
<div class="container">
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Айдана</div>
<div class="student-wish">Білімге деген құштарлықтың жлыны сөнбесін!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="-name">Бағбан</div>
<div class="student-wish">Арманға жету жолында табандылық танытың!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Дидар</div>
<div class="student-wish">Болашаққа сеніммен қадам бас!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Ербол</div>
<div class="student-wish">Білім – жетістіктің кілті!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Жансая</div>
<div class="student-wish">Күнделікті ілім – үлкен жетістіктің басаты!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Қарақат</div>
<div class="student-wish">Оқуға деген құштарлықтың жалыны сөнбесін!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Мади</div>
<div class="student-wish">Арманға жету жолында табандылық танытың!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Назерке</div>
<div class="student-wish">Болашаққа сеніммен қадам бас!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Орынбек</div>
<div class="student-wish">Білім – жетістіктің кілті!</div>
</div>
<div class="student-card">
<img src="https://a.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Перизат</div>
<div class="student-wish">Күнделікті ілім – үлкен жетістіктің басаты!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Рустам</div>
<div class="student-wish">Оқуға деген құштарлықтың жалыны сөнбесін!</div>
</div>
<div class="student-card">
<img.placehold.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Сансиза</div>
<div class="student-wish">Арманға жету жолында табандылық танытың!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Темирлан</div>
<div class="student-wish">Болашаққа сеніммен қадам бас!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Умитай</div>
<div class="student-wish">Білім – жетістіктің кілті!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Фариза</div>
<div class="student-wish">Күнделікті ілім – үлкен жетістіктің басаты!</div>
</div>
<div class="student-card">
<img src="https://via.placeholder.com/120" alt="Оқушы" class="student-photo">
<div class="student-name">Хасан</div>
<div class="student-wish">Оқуға деген құштарлықтың жалыны сөнбесін!</div>
</div>
</div>
</body>
</html>