Программирование верстка сайта

Question

Программирование верстка сайта

Екатерина Стерлядьева Ученик (159), открыт 1 неделю назад

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="spayk.css" />
<link rel="stylesheet" href="reset.css" />
<title>Adaptive header for site</title>
<style>
body {
background-image: url(' https://singapaj-r86.gosweb.gosuslugi.ru/netcat_files/36/42/1667884555_9_2.jpg ');
background-size: cover;
background-repeat: no-repeat;
}
</style>

</head>
<body>
<nav class="navbar">
<div class="container">
<div class="navbar__wrap">
<div class="hamb">
<div class="hamb__field" id="hamb">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
</div>

<ul class="menu" id="menu">
<li><a href="#"></a></li>
<li><a href="fv.html">Войти</a></li>
<li><a href="script.html">Зарегистрироваться</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Чаво</a></li>
<li><a href="#">Обратная связь</a></li>
<li><a href="#">Что нового?</a></li>
<li><a href="#">ФГОС</a></li>
</ul>
</div>
</div>
</nav>
<div class="popup" id="popup"></div>
<div class="text-block">
<p>:</p>
<h1>Приходите к нам учиться!Видеть и слышать ,чувствовать и знать!</h1>

</body>
</html>

нужен красивый css код для этого html кода пожалуйста срочно

Answer 1

ответ от нейросети:
.navbar {
background-color: #333;
color: #fff;
text-align: center;
}

.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}

.hamb {
display: none;
}

.menu {
list-style: none;
display: flex;
}

.menu li {
margin: 0 10px;
}

.menu li a {
text-decoration: none;
color: #fff;
}

.text-block {
text-align: center;
padding: 20px;
}

h1 {
font-size: 24px;
color: #333;
}

.popup {
display: none;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
text-align: center;
}

body {
background-image: url(' https://singapaj-r86.gosweb.gosuslugi.ru/netcat_files/36/42/1667884555_9_2.jpg ');
background-size: cover;
background-repeat: no-repeat;
}

@media only screen and (max-width: 768px) {
.hamb {
display: block;
}

.menu {
display: none;
flex-direction: column;
padding: 0;
position: absolute;
top: 50px;
right: 0;
width: 100%;
background-color: #333;
border-top: 1px solid #fff;
}

.menu li {
margin: 10px;
}

.menu li a {
color: #fff;
}
}