dinarname/pony.html

## pony.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Базовые возможности HTML</title>
    <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
    <style type="text/css">
      *{
            margin: 0 auto;
            padding: 0 auto;
        }
      .container {
        display: flex;
      }
      .header {
        display: flex;
        flex-direction: row;
        height: 200px;
        width: 100%;
        background-color: coral;
        font-size: 120%;
        font-family: 'PT Serif', serif;
        font-weight: bold;
      }
      .footer{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
    </style>
  </head>
  <body>
    <section class = "header">
      <div>
        <img src = "http://bit.ly/2Udd71b" alt = "Логотип" height="100" width="">
      </div>
      <div>
        <h1>Учебная веб-страница</h1>
      </div>
    </section>

    <section class = "main">
      <div class="">
        <h2>Абзацы с текстом</h2>
        <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
          Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
          В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов,
          используя Lorem Ipsum для распечатки образцов.</p>

        <p>Lorem Ipsum не только успешно пережил без заметных изменений пять
        веков, но и перешагнул в электронный дизайн.
        Его популяризации в новое время послужили публикация листов Letraset
        с образцами Lorem Ipsum в 60-х годах и, в более недавнее время,
        программы электронной вёрстки типа Aldus PageMaker,
        в шаблонах которых используется Lorem Ipsum.</p>

        <h2> Нумерованный список</h2>
        <p>Для того, чтобы разобоаться с кодом HTML этой странцы:</p>
        <ol>
          <li>Откройте код страницы</li>
          <li>Посмотрите код, найдите эти строки</li>
          <li>Разберитесь с помощью каких тегов создаётся нумерованный список</li>
        </ol>
    </section>

    <section class = "footer">
      <div class="tel">
        <p>+7 499 200 00 00</p>
      </div>
      <div class="adress">
        <p>Москва, ул. Королёва, д. 12</p>
      </div>
      <div class="map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2241.345270424053!2d37.60368791577251!3d55.821966180571906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b5361368955d5f%3A0x1b52bef3081630c6!2sAkademika+Koroleva+St%2C+12%2C+Moskva%2C+127427!5e0!3m2!1sen!2sru!4v1548327925317"
        width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>
    </section>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Базовые возможности HTML</title>
	<link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
	<style type="text/css">
	*{
	margin: 0 auto;
	padding: 0 auto;
	}
	.container {
	display: flex;
	}
	.header {
	display: flex;
	flex-direction: row;
	height: 200px;
	width: 100%;
	background-color: coral;
	font-size: 120%;
	font-family: 'PT Serif', serif;
	font-weight: bold;
	}
	.footer{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	}
	</style>
	</head>
	<body>
	<section class = "header">
	<div>
	<img src = "http://bit.ly/2Udd71b" alt = "Логотип" height="100" width="">
	</div>
	<div>
	<h1>Учебная веб-страница</h1>
	</div>
	</section>

	<section class = "main">
	<div class="">
	<h2>Абзацы с текстом</h2>
	<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
	Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
	В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов,
	используя Lorem Ipsum для распечатки образцов.</p>

	<p>Lorem Ipsum не только успешно пережил без заметных изменений пять
	веков, но и перешагнул в электронный дизайн.
	Его популяризации в новое время послужили публикация листов Letraset
	с образцами Lorem Ipsum в 60-х годах и, в более недавнее время,
	программы электронной вёрстки типа Aldus PageMaker,
	в шаблонах которых используется Lorem Ipsum.</p>

	<h2> Нумерованный список</h2>
	<p>Для того, чтобы разобоаться с кодом HTML этой странцы:</p>
	<ol>
	<li>Откройте код страницы</li>
	<li>Посмотрите код, найдите эти строки</li>
	<li>Разберитесь с помощью каких тегов создаётся нумерованный список</li>
	</ol>
	</section>

	<section class = "footer">
	<div class="tel">
	<p>+7 499 200 00 00</p>
	</div>
	<div class="adress">
	<p>Москва, ул. Королёва, д. 12</p>
	</div>
	<div class="map">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2241.345270424053!2d37.60368791577251!3d55.821966180571906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b5361368955d5f%3A0x1b52bef3081630c6!2sAkademika+Koroleva+St%2C+12%2C+Moskva%2C+127427!5e0!3m2!1sen!2sru!4v1548327925317"
	width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
	</div>
	</section>
	</body>
	</html>