Приложение г – about.Html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>О нас</title>
</head>
<header class="header">
<img id="logo" src="images/logo.webp" alt="Лого сайта">
<div id="titlename">Чертоги разума</div>
<div id="aboutus">О нас</div>
</header>
<body>
<div id="header2">
<div class="text1">Тест "Школьный"</div>
</div>
<div class="blockcard">
<div class="card" id="card1">
<img class="body_image" src="images/suai.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>ГУАП</b></h4>
</div>
</div>
<div class="card" id="card2">
<div class="container">
<h2 style="padding: 1%;"><b>Кто мы?</b></h2>
<h4 style="padding: 1%;"><b>Привет</b></h4>
<h2 style="padding: 1%;"><b>Наша идея</b></h2>
<h4 style="padding: 1%;"><b>Привет</b></h4>
<h2 style="padding: 1%;"><b>Что мы умеем?</b></h2>
<h4 style="padding: 1%;"><b>Привет</b></h4>
</div>
</div>
</div>
</body>
<footer class="footer">
<div id="foottext">Чертоги разума © 2023</div>
</footer>
</html>
Приложение д – final.Html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Конец 1-го теста</title>
</head>
<header class="header">
<img id="logo" src="images/logo.webp" alt="Лого сайта">
<div id="titlename">Чертоги разума</div>
<div id="aboutus">О нас</div>
</header>
<body>
<div id="header2">
<div class="text1">Тест "Школьный"</div>
</div>
<div class="blockcard">
<div class="card" id="card1">
<img class="body_image" src="images/school.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Вы прошли тест!</b></h4>
</div>
</div>
<div class="card" id="card2">
<div class="container" style="text-align: center;">
<h2 style="padding: 1%;"><b>Отличный результат!</b></h2>
<progress value="5" max="10">
Текст
</progress>
<div>
50%
</div>
<button class="mbutton"><p>Повторить</p></button>
<button class="mbutton"><p>Главная</p></button>
</div>
</div>
</div>
</body>
<footer class="footer">
<div id="foottext">Чертоги разума © 2023</div>
</footer>
</html>
Приложение е – styles.Css
* {
margin: 0;
padding: 0;
font: inherit;
}
.header{
background-color: #7D49D1;
height: 110px;
}
.footer{
background-color: #7D49D1;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
text-align: center;
}
#header2{
background-color: #E3D4FD;
height: 120px;
width: 100%;
text-align: center;
}
#logo{
width: 110px;
}
#titlename{
font-size: 48px;
display: inline-block;
position: absolute;
margin: 20px;
font-weight: bold;
}
#aboutus{
float:right;
font-size: 48px;
margin: 20px;
margin-right: 50px;
font-weight: bold;
}
#foottext{
font-size: 20px;
margin-top: 20px;
}
.text1{
font-size: 32px;
}
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 20%;
height: 400px;
margin: 6%;
display: inline-block;
position: relative;
text-align: center;
font-size: 24px;
border: 1px solid black;
border-radius: 10px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}
.body_image{
width: 50px;
height: 70%;
border-radius: 10px;
border: 1px solid black;
border-radius: 10px;
}
.blockcard{
margin-left:4%;
}
.mbutton{
font-size: 20px;
width: 100px;
margin-top: 10%;
font-weight: bold;
background-color: #7D49D1;
}
#card2{
width: 40%;
height: 400px;
position: absolute;
text-align: justify;
margin-inline: 5px;
padding: 1%;
}
label, form{
padding: 1%;
}
progress{
border: none;
margin-top: 10px;
background: #eee;
border: 0;
width: 50%;
height: 25px;
border-radius: 9%;
color: #9c3;
}