← Каталог
GitHub Pages — стартовый сайт (HTML/CSS/JS)
Три файла для первого проектного сайта: index.html, style.css, script.js.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Мой сайт на GitHub Pages</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page">
<h1>Привет, GitHub Pages!</h1>
<p id="message">Сайт собран из index.html, style.css и script.js.</p>
<button type="button" id="btn">Нажми меня</button>
</main>
<script src="script.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Мой сайт на GitHub Pages</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page">
<h1>Привет, GitHub Pages!</h1>
<p id="message">Сайт собран из index.html, style.css и script.js.</p>
<button type="button" id="btn">Нажми меня</button>
</main>
<script src="script.js"></script>
</body>
</html>const message = document.getElementById('message');
const button = document.getElementById('btn');
let clicks = 0;
button.addEventListener('click', () => {
clicks += 1;
message.textContent =
clicks === 1
? 'Кнопка сработала — JavaScript на Pages работает.'
: `Нажатий: ${clicks}. Можно менять текст и стили, пушить снова — сайт обновится.`;
});const message = document.getElementById('message');
const button = document.getElementById('btn');
let clicks = 0;
button.addEventListener('click', () => {
clicks += 1;
message.textContent =
clicks === 1
? 'Кнопка сработала — JavaScript на Pages работает.'
: `Нажатий: ${clicks}. Можно менять текст и стили, пушить снова — сайт обновится.`;
});* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: system-ui, Segoe UI, sans-serif;
background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 100%);
color: #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
}
.page {
text-align: center;
padding: 2rem;
max-width: 28rem;
}
h1 {
font-size: 1.75rem;
margin-bottom: 0.75rem;
}
p {
line-height: 1.5;
opacity: 0.9;
}
button {
margin-top: 1.25rem;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 8px;
background: #38bdf8;
color: #0f172a;
font-size: 1rem;
cursor: pointer;
}
button:hover {
background: #7dd3fc;
}* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: system-ui, Segoe UI, sans-serif;
background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 100%);
color: #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
}
.page {
text-align: center;
padding: 2rem;
max-width: 28rem;
}
h1 {
font-size: 1.75rem;
margin-bottom: 0.75rem;
}
p {
line-height: 1.5;
opacity: 0.9;
}
button {
margin-top: 1.25rem;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 8px;
background: #38bdf8;
color: #0f172a;
font-size: 1rem;
cursor: pointer;
}
button:hover {
background: #7dd3fc;
}