Вот подготовленная страница справочника для школьного информационного сайта. Материал структурирован в соответствии с вашими требованиями, с использованием правильного HTML.

«`html

body {
font-family: system-ui, -apple-system, ‘Segoe UI’, Roboto, Arial, sans-serif;
line-height: 1.6;
color:

1a1a2e;

background-color:

f8f9fa;

margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
h1 {
font-size: 2em;
border-bottom: 4px solid

4361ee;

padding-bottom: 10px;
color:

1a1a2e;

}
h2 {
font-size: 1.5em;
color:

2b2d42;

margin-top: 1.5em;
border-left: 6px solid

f72585;

padding-left: 15px;
}
h3 {
font-size: 1.2em;
color:

3a0ca3;

}
.simple-box {
background:

eef0ff;

border-radius: 20px;
padding: 20px;
margin: 20px 0;
border: 1px solid

c5caff;

}
.simple-box p {
margin: 8px 0;
}
.step-list {
background:

fafafa;

padding: 20px 20px 20px 40px;
border-radius: 16px;
border: 1px solid

e0e0e0;

}
.step-list li {
margin-bottom: 10px;
}
.cheat-sheet {
background:

2b2d42;

color:

edf2f4;

padding: 20px;
border-radius: 16px;
overflow-x: auto;
font-size: 1.1em;
}
.cheat-sheet table {
width: 100%;
border-collapse: collapse;
}
.cheat-sheet th, .cheat-sheet td {
border: 1px solid

8d99ae;

padding: 12px;
text-align: center;
}
.cheat-sheet th {
background:

4361ee;

color: white;
}
.example-box {
background:

fef9ef;

border: 1px solid

f9c74f;

border-radius: 16px;
padding: 20px;
margin: 15px 0;
}
.example-box strong {
color:

d90429;

}
.parents-box {
background:

d8f3dc;

border-radius: 16px;
padding: 20px;
border: 1px solid

52b788;

}
.error-box {
background:

ffe5d9;

border-radius: 16px;
padding: 20px;
border: 1px solid

f28482;

}
.error-box li {
margin-bottom: 12px;
}
.math-symbol {
font-size: 1.3em;
font-weight: bold;
}
hr {
margin: 30px 0;
border: 1px solid

eee;

}
.footer-note {
text-align: center;
margin-top: 40px;
color:

6c757d;

font-size: 0.9em;
}

«`