HTML/Semantic/data.html - master - webtheory/student

HTML/Semantic/data.html
120 строк2 KB
Jenya
Добавлен раздел CSS
10 июн 2026, 15:06
10 июн 2026, 15:061c049a6
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Data</title>

	<style>
		*,
		*::before,
		*::after {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html {
			color-scheme: dark;
			font-size: 24px;
		}

		body {
			min-height: 100vh;
			padding: 50px;
			display: flex;
			align-items: center;
			background-color: #18191C;
			color: #000000;
			font-family: "Roboto", sans-serif;
		}

		p {
			margin: 7px 0;
			font-size: 1rem;
			line-height: 1.4;
		}

		.dialogue {
			display: grid;
			gap: 1em;
			min-width: 40%;
			margin: 1em auto;
		}

		.dialogue__item {
			max-width: 90%;
			padding: 10px;
			border-radius: 15px;
		}

		.dialogue__item--left {
			justify-self: start;
			background-color: #FF8630;
			border-bottom-left-radius: 0;
		}

		.dialogue__item--right {
			justify-self: end;
			background-color: #2E9AFF;
			border-bottom-right-radius: 0;
		}

		@media (max-width: 768px) {
			body {
				padding: 30px;
			}

			.dialogue {
				min-width: 100%;
			}
		}
	</style>
</head>

<body>

	<div class="dialogue">
		<p class="dialogue__item dialogue__item--left">
			Привет, давно не виделись
		</p>
		<p class="dialogue__item dialogue__item--right">
			Хай. Новая куртка? Тёплая?
		</p>
		<p class="dialogue__item dialogue__item--left">
			Да! С <data value="goose">гусиным</data> пухом
		</p>
	</div>

	<!--
	Жили у бабуси <data value="2">два</data> весёлых гуся.


	Один <data value="grey">серый</data>,
	другой <data value="white">белый</data>.


	<ul>
		<li>
			<data value="2020138256">
				MacBook Pro 13 M1 8 Gb 256 Gb mid. 2020
			</data>
		</li>
		<li>
			<data value="2020138512">
				MacBook Pro 13 M1 8 Gb 512 Gb mid. 2020
			</data>
		</li>
		<li>
			<data value="20201316256">
				MacBook Pro 13 M1 16 Gb 256 Gb mid. 2020
			</data>
		</li>
	</ul>
	
	-->

</body>

</html>