Это баг или фича? Испытание

Курсы §20. Возможности HTML и CSS
1

image
image.png210×738 40.7 KB

2

ни то, ни другое. скорее всего ваш корявый код
код в студию пожалста

3

Как его вставить так чтобы он здесь правильно отобразился?
UPD: как-то вставил

html,
body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif;
  color: white;
  background-color: #2c3e50;
}

body {
  width: 553px;
}

a:link,
a:visited,
a:hover,
a:active {
  color: #c0392b;
}

/* Header */
header.page-header {
  position: relative;
  z-index: 5;
  min-height: 20px;
  padding: 20px;
  color: white;
  background-image:
    linear-gradient(45deg, #34495e 25%, transparent 25%),
    linear-gradient(-45deg, #34495e 25%, transparent 25%),
    linear-gradient(135deg, #34495e 25%, transparent 25%),
    linear-gradient(-135deg, #34495e 25%, transparent 25%);
  background-position: 10px 0, 10px 0, 0 0, 0 0;
  background-size: 20px 20px;
  box-shadow: 0 0 5px 0 #333333;
}

div.logo {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 90px;
  height: 90px;
  margin: 0;
}

nav.main-menu ul {
  margin: 0;
  margin-left: 130px;
  padding: 0;
  list-style: none;
}

.main-menu li {
  display: inline-block;
  margin-right: 1em;
}

.main-menu a {
  color: white;
}

/* Main */
main {
  min-height: 200px;
  padding-top: 50px;
  color: black;
  background-color: white;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg==");
}

main::after,
.slides::after {
  content: "";
  display: table;
  clear: both;
}

article.blog-entry {
  min-height: 100px;
  margin: 0 20px;
  padding: 10px;
  background-color: rgba(241, 196, 15, 0.1);
  border-radius: 5px;
  box-shadow: 0 0 3px #cccccc;
}

.blog-entry::after {
  content: "";
  display: table;
  clear: both;
}

section.idea {
  float: left;
  width: 46%;
  min-height: 100px;
  padding: 2%;
  background-color: rgba(243, 156, 18, 0.1);
  border-radius: 5px;
}

.idea > p {
  margin: 1em 0;
  font-size: 0.8em;
}

.idea > p:last-child {
  margin: 0;
}

.idea > h1 {
  margin: 0;
  font-size: 0.9em;
}

aside.video-preview {
  float: right;
  width: 46%;
  margin: 0 0 1em 0.5em;
  padding: 0.3em 0.3em 0.65em;
  background-color: #ffffff;
  box-shadow: 0 0 5px 3px rgba(243, 156, 18, 0.2);
}

.video-preview > img {
  width: 100%;
}

section.photos {
  min-height: 50px;
  margin: 20px 0;
  background-color: #f5f5f5;
  box-shadow: 0 0 5px #cccccc;
}

figure.slides {
  margin: 0 20px;
  padding: 10px;
}

.slides > img {
  float: left;
  margin-right: 16px;
}

.slides > img:last-child {
  margin-right: 0;
}

/* Footer */
footer.page-footer {
  min-height: 50px;
  padding: 20px;
  font-size: 14px;
  color: black;
  background-color: #f1c40f;
  background-image:
    linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(-45deg, transparent 50%, white 50%),
    linear-gradient(135deg, transparent 50%, #2c3e50 50%),
    linear-gradient(-135deg, transparent 50%, #2c3e50 50%);
  background-repeat: repeat-x;
  background-position: 0 0, 0 0, 0 100%, 0 100%;
  background-size: 12px 12px;
}

.page-footer::after {
  content: "";
  display: table;
  clear: both;
}

.page-footer .info {
  float: left;
}

.page-footer .info img {
  margin-right: 0.5em;
  vertical-align: middle;
  border: 2px solid white;
  box-shadow: 0 0 4px #c0392b;
  transform: rotate(-5deg);
}

.page-footer .copyright {
  float: right;
  padding-top: 20px;
  font-size: 12px;
}

    <title>Испытание: другой вариант главной</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header class="page-header">
      <nav class="main-menu">
        <ul>
          <li><a href="#home">Главная</a></li>
          <li><a href="#blog">Посты</a></li>
          <li><a href="#me">Обо мне</a></li>
        </ul>
      </nav>
    </header>
    <div class="logo">
      <img src="logo.svg" width="90" height="90" alt="Cat Energy">
    </div>
   
    <main>
      <article class="blog-entry">
      <section class="idea">
        <h1 class="idea">Размышления о жизни</h1>
        <p class="idea">Существует много вещей, которые безразличны собакам, но кошки от них без ума.</p>
        <p class="idea">К примеру, любимое место кота — это клавиатура компьютера. Собака не будет постоянно спать на клавиатуре.</p>
      </section>
      <aside class="video-preview">
        <img src="preview.jpg" alt="Видео превью">
      </aside>
      </article>
      <section class="photos">
        <figure class="slides">
          <img src="keks-1.jpg" alt="Фото Кекса 1">
          <img src="keks-2.jpg" alt="Фото Кекса 2">
          <img src="keks-3.jpg" alt="Фото Кекса 3">
          <img src="keks-4.jpg" alt="Фото Кекса 4">
          <img src="keks-5.jpg" alt="Фото Кекса 5">
        </figure>
      </section>
    </main>
    <footer class="page-footer">
      <div class="info">
          <img src="keks.jpg" width="50" alt="Портрет Кекса">
      Кекс, keks@htmlacademy.ru 
      </div>
        <div class="copyright">© 2008—2014 Cat Energy</div>
    </footer> 
  </body>
</html>
4

logo внутрь header запихайте

5

Спасибо