0
0

Завожу данные вслед по уроку, стилики и новый метатег, но при обновлении браузера ничего не меняется, http://joxi.ru/V2VpZooTdzkO3r

в чем может быть проблема? 

стили прописаны

<!DOCTYPE html>
<html lang="ru">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="description" content="Киномонстр - это портал для кино">
  <meta name="keywords" content="фильмы, фильмы онлайн, hd">
  <link rel="stylesheet" href="assets/css/main.css">

  <title>КиноМонстр</title>
</head>

<body>
  <div class="main">
    <div class="header">
      <div class="logo">
        <div class="logo_text">
          <h1><a href="1.html">КиноМонстр</a></h1>
          <h2>Кино - наша страсть!</h2>
        </div>
      </div>
      <div class="menubar">
        <ul class="menu">
          <li class="selected"><a href="1.html">Главная</a></li>
          <li><a href="films.html">Фильмы</a></li>
          <li><a href="serials.html">Сериалы</a></li>
          <li><a href="raiting.html">Рейтинг фильмов</a></li>
          <li><a href="contacts.html">Контакты</a></li>
        </ul>
      </div>
    </div>
    <div class="side_content">
      <div class="sidebar_container">
        <div class="sidebar">
          <h2>Поиск</h2>
          <form method="post" action="#" id="search_form">
            <input type="search" name="search_field" placeholder="ваш запрос" />
            <input type="submit" class="btn" value="найти" />
          </form>
        </div>
        <div class="sidebar">
          <h2>Вход</h2>
          <form method="post" action="#" id="login">
            <input type="text" name="login_field" placeholder="логин">
            <input type="password" name="password_field" placeholder="пароль">
            <input type="submit" class="btn" value="Вход" />
            <div class="lables_passreg_text">
              <span><a href="#">Забыли пароль?</a></span>|<span><a href="#">Регистрация</a></span>
            </div>
          </form>
        </div>
        <div class="sidebar">
          <h2>Новости</h2>
          <span>31.02.2019</span>
          <p>мы запустили расширенный поиск</p>
          <a href="#">читать</a>
        </div>
        <div class="sidebar">
          <h2>Рейтинг фильмов</h2>
          <ul>
            <li> <a href="2.html">Интерстеллар</a><span class="rating_sidebar">8.1</span></li>
            <li> <a href="matrix.html">Матрица</a><span class="rating_sidebar">8.0</span></li>
            <li> <a href="max.html">Безумный Макс</a><span class="rating_sidebar">7.5</span></li>
            <li> <a href="cloud.html">Облачный Атлас</a><span class="rating_sidebar">7.4</span></li>
          </ul>
        </div>
      </div>
      <div class="content">
        <h1>Новые фильмы</h1>
        <div class="films_block">
          <a href="matrix.html"><img src="assets/images/matrix.png" alt="matrix"></a>
          <a href="max.html"><img src="assets/images/max.png" alt="Mad Max"></a>
          <a href="cloud.html"><img src="assets/images/cloud.png" alt="cloud"></a>
          <a href="2.html"><img src="assets/images/inter.png" alt="Interstellar"></a>
        </div>
        <h1>Новые сериалы</h1>
        <div class="films_block">
          <a href="dead.html"><img src="assets/images/dead.png" alt="walkingdead"></a>
          <a href="silicon.html"><img src="assets/images/silicon.png" alt="silicon"></a>
          <a href="brebad.html"><img src="assets/images/breakingbad.png" alt="breakingbad"></a>
          <a href="xfiles.html"><img src="assets/images/xfiles.png" alt="xfiles"></a>
        </div>
        <div class="posts">
          <hr>
          <h2><a href="#">Как снимали Интерстеллар</a></h2>
          <div class="posts_content">
            <p>45 лет исполнилось Кристоферу Нолану — одному из самых успешных режиссеров нашего времени, чьи работы одинаково любимы как взыскательными критиками, так и простыми зрителями. Фильмом изначально занималась студия Paramount.

              Когда Кристофер Нолан занял место режиссера, студия Warner Bros., которая выпускала его последние фильмы, добилась участия в проекте.</p>

          </div>
          <p><a href="#">Читать</a></p>

        </div>
        <div class="posts">
          <hr>
          <h2><a href="#">Актер Том Хенкс поделился впечатлением о фестивале</a></h2>
          <div class="posts_content">
            <p>16 февраля в Лондоне состоялась 67-я церемония вручения наград Британской киноакадемии. Леонардо ДиКаприо, Брэд Питт, Анджелина Джоли, Кейт Бланшетт, Хелен Миррен, Эми Адамс, Кристиан Бэйл, Альфонсо Куарон и другие гости и победители
              премии — в нашем репортаже.</p>

          </div>
          <p><a href="#">Читать</a></p>

        </div>

      </div>
    </div>
  </div>
  <div class="footer">
    <p>
      <a href="1.html">Главная</a>|
      <a href="films.html">Фильмы</a>|
      <a href="serials.html">Сериалы</a>|
      <a href="raiting.html">Рейтинг фильмов</a>|
      <a href="contacts.html">Контакты</a>
    </p>
    <p>wh-db.231321</p>
  </div>
</body>

</html>

Арётм Загуменнов
4 years ago






* {
  margin: 0;
  padding: 0;
}

selected {
  color: yellow;
}

hr {
  border: 1px solid #f3f3f3;
}

body {
  font-size: 1.2em;
  background-color: #fff;
  color: #555;
}

p {
  padding: 0 0 20px 0;
  line-height: 1.7em;
}

ul {
  margin: 2px 0 22px 17px;
}

ul,
li {
  margin: 0 0 6px 0;
  padding: 0 0 4px 5px;
  line-height: 1.5em;
}

a,
a:hover {
  outline: none;
  text-decoration: underline;
  color: #aeb002;
}

input[type="text"],
input[type="password"],
input[type="search"] {
  color: #5d5d5d;
  width: 60%;
  padding: 8px;
}

input,
textarea {
  outline: none;
  border: none;
  border: solid 1px #f2f2f2;
}

h1,
h2 {
  font: normal 150% 'centure gothic', arial;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;
  color: #000;
}

h2 {
  font-size: 140%;
}

.header {
  width: 100%;
  background-color: darkslateblue;
  height: 177px;
  font-size: 0.8em;
  margin-left: 0px;
  margin-right: 0px;
  min-width: 900px;
}

.main,
.logo,
.menubar,
.side_content .footer {
  margin-left: auto;
  margin-right: auto;
}

.logo {
  width: 860px;
  padding-bottom: 40px;
}

.logo h1 {
  font: normal 300% "centuri gothic", arial, sans-serif;
  margin: 0 0 0 9px;
}

.logo h2 {
  font: normal 300% "centuri gothic", arial, sans-serif;
  margin: 0 0 0 9px;
}

.logo_text h1 {
  padding: 22px 0 0 0;
  color: #fff;
  letter-spacing: 0.2em;
  text-decoration: none;
}

.logo_text h1 a {
  padding: 22px 0 0 0;
  color: #fff;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.logo_text h1 a:hover {
  padding: 22px 0 0 0;
  color: #fff;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.logo_text h2 {
  font-size: 0.9em;
  padding: 4px 0 0 0;
  color: #999;
}

.menubar {
  /* задание размеров блока меню*/
  width: 900px;
  height: 46px;
}

ul.menu {
  float: right;
  /*прижатие элементу к выбранной позиции, тут прижать к правому краю*/
}

ul.menu li {
  float: left;
  /* вытягивание списка влево*/
  padding: 0 0 0 9px;
  list-style: none;
  /* задание стиля списка, без точек*/
  margin: 1px 2px 0 0;
}

ul.menu li a {
  font: normal 100% "trebuchet ms", sans-serif;
  display: block;
  color: #fff;
  height: 20px;
  padding: 6px 35px 5px 28px;
  text-decoration: none;
}

ul.menu li. celected a {
  color: #aeb002;
}

ul.menu li a:hover {
  color: #e4ec04;
}

.side_content {
  width: 880px;
  overflow: hidden;
  margin: 20px auto 0 auto;
  background-color: white;
}

.sidebar_container {
  float: right;
  width: 224px;
}

.sidebar {
  float: right;
  width: 222px;
  padding: 5%;
  margin: 0 0px 16px 0;
  border: 1px solid #f2f2f2;
  border-radius: 15px;
  background-color: #f9f9f9;
}

.sidebar,
h2 {
  color: #136cb2;
}

.btn {
  padding: 8px;
  background-color: white;
  cursor: pointer;
}

.lables_passreg_text {
  font-size: 0.7em;
  margin-top: 3%;
  margin-left: 2%;
  color: #000;
}

.rating_sidebar {
  float: right;
}

.sidebar ul {
  text-decoration: none;
  margin: 0;
  margin: 0 0 0 0;
}

.sidebar li {
  list-style-type: none;
  text-decoration: none;
}

.rating {
  font-width: bold;
}

.content {
  text-align: left;
  width: 620px;
  padding: 0 0 0 5px;
  float: left;
}

table {
  width: 580px;
  height: 150px;
}

.content a {
  text-decoration: none;
}

.films_block {
  margin-bottom: 5%;
}

.films_block img {
  border-radius: 5px;
  border: solid 5px #dad7d5;
  width: 22%;
}

.posts_content {
  font-size: 0.8em;
}

.info_film_page {
  margin-top: 2%;
  margin-bottom: 4%;
}

.info_film_page .label {
  font-size: 1.2em;
}

.info_film_page .value {
  font-size: 1em;
  color: #49945a;
  margin-right: 3%;
}

.description_film {
  margin-bottom: 15%;
}

.description_film img {
  float: left;
  /* для прижатия картинки влево и обтекания текста от неё*/
  margin-rig: 2%;
  border-radius: 5px;
  border: 5px solid #dad7d5;
}

.text_film {
  margin: 5px;
  text-align: left;
  width: 450px;
  display: flex;
}

.info_film {
  margin-bottom: 5%;
  background-color: #f9f9f9;
  padding: 5%;
  height: 270px;
}

.info_film img {
  float: left;
  border-radius: 5px;
  margin-right: 2%;
  width: 25%;
  border: 1px solid #dad7d5;
}

.button {
  background-color: #7286ad;
  padding: 2%;
  color: white;
  border-radius: 5px;
  float: right;
  margin-top: 5%;
  clear: both;
  font-size: 0.8em;
}

.bottom a {
  color: white;
}

.reviews {
  margin-bottom: 4%;
  font-size: 0.9em;
}

.reviews .reviews_name {
  background-color: #7268ad;
  color: white;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 1%;
}

.reviews .reviews_text {
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
}

.send {
  margin-bottom: 4%;
}

.send input[type='text'],
textarea {
  border: 1px solid #c3c3c3;
  margin-bottom: 2%;
}

.send input [type='text'] {
  width: 98%;
}

.send textarea {
  width: 864px;
  height: 200px;
}

.send input[type='submit'] {
  background-color: #7286ad;
  padding: 3%;
  color: white;
  border-radius: 5px;
}

.contacts {
  margin-bottom: 4%;
}

.contacts input[type='text'],
textarea {
  border: 1px solid #c3c3c3;
  margin-top: 2%;
}

.contacts input [type='text'] {
  width: 98%;
}

.contacts textarea {
  width: 600px;
  height: 200px;
}

.contacts input[type='submit'] {
  background-color: #7286ad;
  padding: 3%;
  color: white;
  border-radius: 5px;
}

.table {
  width: 100%;
  border: 1px solid #f4f4f4;
}

td {
  padding: 2%;
  border: solid 1px #f4f4f4;
}

td img {
  width: 60px;
  vertical-align: middle;
}

.center {
  text-align: left;
}

.footer {
  width: 100%;
  height: 100px;
  padding: 28px 0 5px 0;
  background-color: darkslateblue;
  text-align: center;
  color: #a8aa94;
  margin-left: 0px;
  margin-right: 0px;
  min-width: 900px;
}

.footer a {
  color: #a8aa94;
  text-decoration: none;
}

.footer a:hover {
  color: #fff;
  text-decoration: none;
}

.footer p {
  padding: 0 0 10px 0;
}

/*
css mobile
*/
@media only screen (min-width:320px) and (max-width:480px) {
  /* стили */
  background: #white;
  width: 100%;

  .header {
    width: 100%;
    height: 20%;
  }

  .logo {
    width: 100%;
  }

  .menubar {
    width: 100%;
    height: 100%;
  }

  .side_content {
    width: 100%;
    text-align: center;
  }

  .sidebar_container {
    display: none;
  }

  .footer {
    display: none;
  }
}
Арётм Загуменнов
4 years ago

проверьте еще раз ваш код по уроку

в этой части нужно внести правки

@media only screen (min-width:320px) and (max-width:480px) {
  /* стили */
  background: #white;
  width: 100%;

  .header {
    width: 100%;
    height: 20%;
  }
Pavel Lazarev
4 years ago

2 ответов