kianurivzzz · August 28, 2024 09:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="ru">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Матч за звание чемпиона мира по шахматам 2016</title>
 </head>
 <body>
  <article class="article">
    <!-- Ниже можно написать решение -->
    
    <!-- Выше можно написать решение -->
    <section class="applicants">
      <h2 class="applicants-header">Участники</h2>

      <div class="member">
        <h3>Действующий чемпион</h3>
        <img src="https://i.postimg.cc/tgMG2smg/magnus.jpg" alt="Магнус Карлсен">
        <p class="member-name">Магнус Карлсен</p>
        <p>26 лет</p>
        <p>Рейтинг на момент начала матча: 2853</p>
      </div>

      <div class="member">
        <h3>Претендент</h3>
        <img src="https://i.postimg.cc/G26rh4kf/karyakin.jpg" alt="Сергей Карякин">
        <p class="member-name">Сергей Карякин</p>
        <p>26 лет</p>
        <p>Рейтинг на момент начала матча: 2772</p>
      </div>
    </section>
    <!-- Ниже можно написать решение -->
    
    <!-- Выше можно написать решение -->
  </article>
 </body>
 </html>
diff --git a/style.css b/style.css
 html {
  color: #463f3a;
  font: 18px/1.5 sans-serif;
 }

 body {
  width: 980px;
  margin: 0 auto;
  padding: 70px;
 }

 h1,
 h2,
 h3,
 p {
  margin-top: 0;
 }

 h1 {
  color: #e07a5f;
  letter-spacing: 0.075em;
  text-transform: uppercase;
 }

 img {
  max-width: 100%;
  height: auto;

  vertical-align: middle;
 }

 .article {
  /* Ниже можно написать решение */
  
  /* Выше можно написать решение */
 }

 .applicants {
  margin: 50px 0;
  padding: 20px;

  color: #f4f1de;

  /* Ниже можно написать решение */
  
  /* Выше можно написать решение */

  background: #3d405b;
 }

 .applicants-header {
  /* Ниже можно написать решение */
  
  /* Выше можно написать решение */
 }

 .member-name {
  margin: 20px 0 0;

  font-weight: bold;
 }
diff --git a/TASK.md b/TASK.md
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Матч за звание чемпиона мира по шахматам 2016</title>
	</head>
	<body>
	<article class="article">
	<!-- Ниже можно написать решение -->

	<!-- Выше можно написать решение -->
	<section class="applicants">
	<h2 class="applicants-header">Участники</h2>

	<div class="member">
	<h3>Действующий чемпион</h3>
	<img src="https://i.postimg.cc/tgMG2smg/magnus.jpg" alt="Магнус Карлсен">
	<p class="member-name">Магнус Карлсен</p>
	<p>26 лет</p>
	<p>Рейтинг на момент начала матча: 2853</p>
	</div>

	<div class="member">
	<h3>Претендент</h3>
	<img src="https://i.postimg.cc/G26rh4kf/karyakin.jpg" alt="Сергей Карякин">
	<p class="member-name">Сергей Карякин</p>
	<p>26 лет</p>
	<p>Рейтинг на момент начала матча: 2772</p>
	</div>
	</section>
	<!-- Ниже можно написать решение -->

	<!-- Выше можно написать решение -->
	</article>
	</body>
	</html>
	html {
	color: #463f3a;
	font: 18px/1.5 sans-serif;
	}

	body {
	width: 980px;
	margin: 0 auto;
	padding: 70px;
	}

	h1,
	h2,
	h3,
	p {
	margin-top: 0;
	}

	h1 {
	color: #e07a5f;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	}

	img {
	max-width: 100%;
	height: auto;

	vertical-align: middle;
	}

	.article {
	/* Ниже можно написать решение */

	/* Выше можно написать решение */
	}

	.applicants {
	margin: 50px 0;
	padding: 20px;

	color: #f4f1de;

	/* Ниже можно написать решение */

	/* Выше можно написать решение */

	background: #3d405b;
	}

	.applicants-header {
	/* Ниже можно написать решение */

	/* Выше можно написать решение */
	}

	.member-name {
	margin: 20px 0 0;

	font-weight: bold;
	}