[html]
<div id="jeopardy-game" class="glossy-news">
<style>
#jeopardy-game.glossy-news {
--dusty-rose: #D2A5A5;
--dusty-yellow: #E5C87B;
--dark-gray: #3C3C3C;
--light-gray: #F5F5F5;
--white: #FFFFFF;
--soft-lavender: #E8E0F0;
--soft-sage: #DCE8D5;
font-family: 'Verdana', 'Century Gothic', Arial, sans-serif;
font-size: 12px;
line-height: 1.6;
color: var(--dark-gray);
background: var(--light-gray);
max-width: 1000px;
margin: 0 auto;
padding: 20px 24px;
box-sizing: border-box;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
border-radius: 4px;
}
#jeopardy-game .content-block {
background: var(--white);
padding: 20px 24px;
border-radius: 6px;
border: 1px solid var(--dusty-rose);
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
#jeopardy-game .block-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 24px;
letter-spacing: 1px;
color: var(--dark-gray);
margin: 0 0 20px;
text-align: center;
text-transform: uppercase;
border-bottom: 2px solid var(--dusty-yellow);
padding-bottom: 8px;
}
/* Таблица */
#jeopardy-game .jeopardy-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin-bottom: 30px;
}
#jeopardy-game .jeopardy-table th {
background: var(--dusty-rose);
color: var(--white);
font-size: 13px;
font-weight: bold;
padding: 10px 5px;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 2px solid var(--white);
}
#jeopardy-game .jeopardy-table td {
padding: 8px;
text-align: center;
vertical-align: middle;
}
#jeopardy-game .jeopardy-cell {
display: block;
width: 100%;
height: 70px;
line-height: 70px;
background: var(--dusty-yellow);
border-radius: 6px;
font-size: 20px;
font-weight: bold;
color: var(--dark-gray);
text-decoration: none;
transition: background 0.3s, transform 0.2s;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: pointer;
}
#jeopardy-game .jeopardy-cell:hover {
background: var(--soft-sage);
transform: scale(1.03);
color: var(--dark-gray);
}
#jeopardy-game .jeopardy-cell.used {
background: var(--light-gray);
color: #aaa;
text-decoration: line-through;
pointer-events: none;
box-shadow: none;
transform: none;
}
/* Блоки вопросов */
#jeopardy-game .questions-area {
border-top: 2px solid var(--dusty-yellow);
padding-top: 20px;
}
#jeopardy-game .question-block {
display: none;
background: var(--soft-lavender);
padding: 16px;
border-radius: 8px;
border: 1px solid var(--dusty-rose);
margin-bottom: 16px;
}
#jeopardy-game .question-block:target {
display: block;
}
#jeopardy-game .question-text {
font-size: 16px;
font-weight: bold;
margin-bottom: 12px;
color: var(--dark-gray);
}
#jeopardy-game .answer-toggle {
display: inline-block;
background: var(--dusty-rose);
color: white;
padding: 6px 16px;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
font-size: 12px;
transition: background 0.3s;
}
#jeopardy-game .answer-toggle:hover {
background: var(--dark-gray);
}
#jeopardy-game .answer-block {
display: none;
margin-top: 12px;
padding: 12px;
background: var(--white);
border-left: 4px solid var(--dusty-yellow);
font-size: 14px;
color: var(--dark-gray);
}
#jeopardy-game .answer-block:target {
display: block;
}
#jeopardy-game .back-to-board {
display: inline-block;
margin-top: 12px;
color: var(--dusty-rose);
text-decoration: underline;
font-size: 11px;
}
</style>
<div class="content-block">
<div class="block-title">🌞 Летняя «Своя игра»</div>
<!-- Таблица -->
<table class="jeopardy-table">
<tr>
<th>Фрукты & Ягоды</th>
<th>Водоёмы</th>
<th>Погода</th>
<th>Растения</th>
<th>Летние забавы</th>
</tr>
<!-- 100 -->
<tr>
<td><a href="#q1" class="jeopardy-cell">100</a></td>
<td><a href="#q2" class="jeopardy-cell">100</a></td>
<td><a href="#q3" class="jeopardy-cell">100</a></td>
<td><a href="#q4" class="jeopardy-cell">100</a></td>
<td><a href="#q5" class="jeopardy-cell">100</a></td>
</tr>
<!-- 200 -->
<tr>
<td><a href="#q6" class="jeopardy-cell">200</a></td>
<td><a href="#q7" class="jeopardy-cell">200</a></td>
<td><a href="#q8" class="jeopardy-cell">200</a></td>
<td><a href="#q9" class="jeopardy-cell">200</a></td>
<td><a href="#q10" class="jeopardy-cell">200</a></td>
</tr>
<!-- 300 -->
<tr>
<td><a href="#q11" class="jeopardy-cell">300</a></td>
<td><a href="#q12" class="jeopardy-cell">300</a></td>
<td><a href="#q13" class="jeopardy-cell">300</a></td>
<td><a href="#q14" class="jeopardy-cell">300</a></td>
<td><a href="#q15" class="jeopardy-cell">300</a></td>
</tr>
<!-- 400 -->
<tr>
<td><a href="#q16" class="jeopardy-cell">400</a></td>
<td><a href="#q17" class="jeopardy-cell">400</a></td>
<td><a href="#q18" class="jeopardy-cell">400</a></td>
<td><a href="#q19" class="jeopardy-cell">400</a></td>
<td><a href="#q20" class="jeopardy-cell">400</a></td>
</tr>
</table>
<!-- Вопросы и ответы -->
<div class="questions-area">
<!-- 1 -->
<div id="q1" class="question-block">
<div class="question-text">🍓 Эта ягода бывает красной, чёрной и белой.</div>
<a href="#a1" class="answer-toggle">Показать ответ</a>
<div id="a1" class="answer-block">✅ Смородина</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 2 -->
<div id="q2" class="question-block">
<div class="question-text">🌊 Самый большой океан на Земле.</div>
<a href="#a2" class="answer-toggle">Показать ответ</a>
<div id="a2" class="answer-block">✅ Тихий океан</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 3 -->
<div id="q3" class="question-block">
<div class="question-text">☀️ Как называют период длительной жаркой и сухой погоды?</div>
<a href="#a3" class="answer-toggle">Показать ответ</a>
<div id="a3" class="answer-block">✅ Засуха</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 4 -->
<div id="q4" class="question-block">
<div class="question-text">🌻 Это растение поворачивает голову вслед за солнцем.</div>
<a href="#a4" class="answer-toggle">Показать ответ</a>
<div id="a4" class="answer-block">✅ Подсолнух</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 5 -->
<div id="q5" class="question-block">
<div class="question-text">🏸 Игра с воланом и ракетками на пляже или во дворе.</div>
<a href="#a5" class="answer-toggle">Показать ответ</a>
<div id="a5" class="answer-block">✅ Бадминтон</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 6 -->
<div id="q6" class="question-block">
<div class="question-text">🍊 Фрукт, название которого переводится как «китайское яблоко».</div>
<a href="#a6" class="answer-toggle">Показать ответ</a>
<div id="a6" class="answer-block">✅ Апельсин</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 7 -->
<div id="q7" class="question-block">
<div class="question-text">🐟 Самое глубокое пресноводное озеро в мире.</div>
<a href="#a7" class="answer-toggle">Показать ответ</a>
<div id="a7" class="answer-block">✅ Байкал</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 8 -->
<div id="q8" class="question-block">
<div class="question-text">🌈 Разноцветная дуга после дождя.</div>
<a href="#a8" class="answer-toggle">Показать ответ</a>
<div id="a8" class="answer-block">✅ Радуга</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 9 -->
<div id="q9" class="question-block">
<div class="question-text">🌿 Растение с «золотыми» цветками, заживляющее раны.</div>
<a href="#a9" class="answer-toggle">Показать ответ</a>
<div id="a9" class="answer-block">✅ Календула</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 10 -->
<div id="q10" class="question-block">
<div class="question-text">🎣 Снасть для ловли рыбы с берега или лодки.</div>
<a href="#a10" class="answer-toggle">Показать ответ</a>
<div id="a10" class="answer-block">✅ Удочка</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 11 -->
<div id="q11" class="question-block">
<div class="question-text">🍋 Фрукт, который добавляют в чай и лимонад.</div>
<a href="#a11" class="answer-toggle">Показать ответ</a>
<div id="a11" class="answer-block">✅ Лимон</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 12 -->
<div id="q12" class="question-block">
<div class="question-text">🚣♂️ Водный вид спорта на одноместной или многоместной лодке.</div>
<a href="#a12" class="answer-toggle">Показать ответ</a>
<div id="a12" class="answer-block">✅ Гребля</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 13 -->
<div id="q13" class="question-block">
<div class="question-text">⛈️ Гроза + сильный ветер = ?</div>
<a href="#a13" class="answer-toggle">Показать ответ</a>
<div id="a13" class="answer-block">✅ Ураган (или шквал)</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 14 -->
<div id="q14" class="question-block">
<div class="question-text">🌱 Дерево, из сока которого делают кленовый сироп.</div>
<a href="#a14" class="answer-toggle">Показать ответ</a>
<div id="a14" class="answer-block">✅ Клён</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 15 -->
<div id="q15" class="question-block">
<div class="question-text">🪁 Бумажная конструкция на верёвке, летающая в ветреную погоду.</div>
<a href="#a15" class="answer-toggle">Показать ответ</a>
<div id="a15" class="answer-block">✅ Воздушный змей</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 16 -->
<div id="q16" class="question-block">
<div class="question-text">🍒 Ягода, которую подарили Белоснежке гномы.</div>
<a href="#a16" class="answer-toggle">Показать ответ</a>
<div id="a16" class="answer-block">✅ Вишня</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 17 -->
<div id="q17" class="question-block">
<div class="question-text">🏖️ Узкая полоса песка между морем и сушей.</div>
<a href="#a17" class="answer-toggle">Показать ответ</a>
<div id="a17" class="answer-block">✅ Пляж</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 18 -->
<div id="q18" class="question-block">
<div class="question-text">🌡️ Прибор для измерения температуры воздуха.</div>
<a href="#a18" class="answer-toggle">Показать ответ</a>
<div id="a18" class="answer-block">✅ Термометр (градусник)</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 19 -->
<div id="q19" class="question-block">
<div class="question-text">🌸 «Слеза» дерева, превращающаяся в драгоценность.</div>
<a href="#a19" class="answer-toggle">Показать ответ</a>
<div id="a19" class="answer-block">✅ Янтарь (окаменевшая смола)</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
<!-- 20 -->
<div id="q20" class="question-block">
<div class="question-text">🎡 Колесо обозрения — традиционное развлечение в этом месте.</div>
<a href="#a20" class="answer-toggle">Показать ответ</a>
<div id="a20" class="answer-block">✅ Парк аттракционов</div>
<a href="#" class="back-to-board">← К табло</a>
</div>
</div>
</div>
</div>
[/html]


































