sunmeat · December 30, 2024 08:11
diff --git a/catcafe.html b/catcafe.html
 <!DOCTYPE html>
 <html lang="uk">

 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Котокафе</title>
 	<style>
 		* {
 			box-sizing: border-box;
 			margin: 0;
 			padding: 0;
 		}

 		body {
 			font-family: Arial, sans-serif;
 			background-color: #fafafa;
 		}

 		header,
 		footer {
 			background-color: #333;
 			color: white;
 			text-align: center;
 			padding: 1rem;
 		}

 		.container {
 			display: flex;
 			flex-direction: column;
 			min-height: 100vh;
 		}

 		header {
 			width: 100%;
 		}

 		footer {
 			width: 100%;
 			position: relative;
 			bottom: 0;
 		}

 		.main-content {
 			display: flex;
 			flex: 1;
 			flex-wrap: wrap;
 			padding: 1rem;
 		}

 		.sidebar {
 			width: 250px;
 			background-color: #4caf50;
 			color: white;
 			padding: 1rem;
 			flex-shrink: 0;
 		}

 		.content {
 			flex: 1;
 			padding: 1rem;
 			background-color: #fff;
 			display: flex;
 			flex-direction: column;
 		}

 		.content h2 {
 			margin-bottom: 1rem;
 		}

 		.cat-gallery {
 			display: grid;
 			grid-template-columns: repeat(3, 1fr);
 			/* 3 зображення в ряд для ПК */
 			gap: 1rem;
 			margin-top: 2rem;
 		}

 		.cat-gallery div {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 		}

 		.cat-gallery img {
 			width: 200px;
 			height: 200px;
 			object-fit: cover;
 			border-radius: 8px;
 		}

 		@media (max-width: 1200px) {
 			.main-content {
 				flex-direction: row;
 			}
 		}

 		@media (max-width: 768px) {
 			.main-content {
 				flex-direction: column;
 			}

 			.sidebar {
 				width: 100%;
 				margin-bottom: 1rem;
 			}

 			.content {
 				padding: 1rem;
 			}
 		}

 		@media (max-width: 480px) {

 			header,
 			footer {
 				padding: 0.5rem;
 			}

 			.content {
 				font-size: 14px;
 			}

 			.sidebar {
 				display: none;
 				/* приховуємо бічну панель на маленьких екранах */
 			}

 			.cat-gallery {
 				grid-template-columns: repeat(2, 1fr);
 				/* 2 зображення в ряд для смартфонів */
 			}

 			.cat-gallery img {
 				width: 150px;
 				height: 150px;
 			}
 		}
 	</style>
 </head>

 <body>

 	<div class="container">
 		<header>
 			<h1>Ласкаво просимо в наше котокафе!</h1>
 		</header>

 		<div class="main-content">
 			<aside class="sidebar">
 				<h3>Про нас</h3>
 				<p>Ми — котокафе, де ви можете насолодитися чашкою кави, поки милуєтеся нашими пухнастими друзями! Тут
 					ви знайдете комфорт і спокій в компанії котів.</p>
 				<br>
 				<h3>Меню</h3>
 				<p>Ми пропонуємо широкий асортимент напоїв і закусок, від свіжозвареної кави до смачних десертів.
 					Завітайте до нас на унікальний досвід!</p>
 			</aside>

 			<section class="content">
 				<h2>Наші коти</h2>
 				<p>Наше кафе — це місце, де ви можете попити кави та поспілкуватися з різними котиками. Погладити їх,
 					поспостерігати за ними, а можливо, і підгодувати ласощами.</p>

 				<div class="cat-gallery">
 					<div><img src="file:///C:/!Files/SPR411/catcafe/1.png" alt="Кіт 1">
 						<p>Кіт Мурчик</p>
 					</div>
 					<div><img src="file:///C:/!Files/SPR411/catcafe/2.png" alt="Кіт 2">
 						<p>Кіт Барсик</p>
 					</div>
 					<div><img src="file:///C:/!Files/SPR411/catcafe/3.png" alt="Кіт 3">
 						<p>Кіт Том</p>
 					</div>
 					<div><img src="file:///C:/!Files/SPR411/catcafe/4.png" alt="Кіт 4">
 						<p>Кіт Бегемот</p>
 					</div>
 					<div><img src="file:///C:/!Files/SPR411/catcafe/5.png" alt="Кіт 5">
 						<p>Кіт Сімба</p>
 					</div>
 					<div><img src="file:///C:/!Files/SPR411/catcafe/6.png" alt="Кіт 6">
 						<p>Кіт Міша</p>
 					</div>
 				</div>


 			</section>
 		</div>

 		<footer>
 			<p>© 2025 Котокафе. Всі права захищено.</p>
 		</footer>
 	</div>

 </body>

 </html>
	<!DOCTYPE html>
	<html lang="uk">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Котокафе</title>
	<style>
	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	body {
	font-family: Arial, sans-serif;
	background-color: #fafafa;
	}

	header,
	footer {
	background-color: #333;
	color: white;
	text-align: center;
	padding: 1rem;
	}

	.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	}

	header {
	width: 100%;
	}

	footer {
	width: 100%;
	position: relative;
	bottom: 0;
	}

	.main-content {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	padding: 1rem;
	}

	.sidebar {
	width: 250px;
	background-color: #4caf50;
	color: white;
	padding: 1rem;
	flex-shrink: 0;
	}

	.content {
	flex: 1;
	padding: 1rem;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	}

	.content h2 {
	margin-bottom: 1rem;
	}

	.cat-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 3 зображення в ряд для ПК */
	gap: 1rem;
	margin-top: 2rem;
	}

	.cat-gallery div {
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	.cat-gallery img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 8px;
	}

	@media (max-width: 1200px) {
	.main-content {
	flex-direction: row;
	}
	}

	@media (max-width: 768px) {
	.main-content {
	flex-direction: column;
	}

	.sidebar {
	width: 100%;
	margin-bottom: 1rem;
	}

	.content {
	padding: 1rem;
	}
	}

	@media (max-width: 480px) {

	header,
	footer {
	padding: 0.5rem;
	}

	.content {
	font-size: 14px;
	}

	.sidebar {
	display: none;
	/* приховуємо бічну панель на маленьких екранах */
	}

	.cat-gallery {
	grid-template-columns: repeat(2, 1fr);
	/* 2 зображення в ряд для смартфонів */
	}

	.cat-gallery img {
	width: 150px;
	height: 150px;
	}
	}
	</style>
	</head>

	<body>

	<div class="container">
	<header>
	<h1>Ласкаво просимо в наше котокафе!</h1>
	</header>

	<div class="main-content">
	<aside class="sidebar">
	<h3>Про нас</h3>
	<p>Ми — котокафе, де ви можете насолодитися чашкою кави, поки милуєтеся нашими пухнастими друзями! Тут
	ви знайдете комфорт і спокій в компанії котів.</p>
	<br>
	<h3>Меню</h3>
	<p>Ми пропонуємо широкий асортимент напоїв і закусок, від свіжозвареної кави до смачних десертів.
	Завітайте до нас на унікальний досвід!</p>
	</aside>

	<section class="content">
	<h2>Наші коти</h2>
	<p>Наше кафе — це місце, де ви можете попити кави та поспілкуватися з різними котиками. Погладити їх,
	поспостерігати за ними, а можливо, і підгодувати ласощами.</p>

	<div class="cat-gallery">
	<div><img src="file:///C:/!Files/SPR411/catcafe/1.png" alt="Кіт 1">
	<p>Кіт Мурчик</p>
	</div>
	<div><img src="file:///C:/!Files/SPR411/catcafe/2.png" alt="Кіт 2">
	<p>Кіт Барсик</p>
	</div>
	<div><img src="file:///C:/!Files/SPR411/catcafe/3.png" alt="Кіт 3">
	<p>Кіт Том</p>
	</div>
	<div><img src="file:///C:/!Files/SPR411/catcafe/4.png" alt="Кіт 4">
	<p>Кіт Бегемот</p>
	</div>
	<div><img src="file:///C:/!Files/SPR411/catcafe/5.png" alt="Кіт 5">
	<p>Кіт Сімба</p>
	</div>
	<div><img src="file:///C:/!Files/SPR411/catcafe/6.png" alt="Кіт 6">
	<p>Кіт Міша</p>
	</div>
	</div>


	</section>
	</div>

	<footer>
	<p>© 2025 Котокафе. Всі права захищено.</p>
	</footer>
	</div>

	</body>

	</html>