0

html {
  line-height: 1.5;
}


/* Grid */

.container {
  width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.row {}

.row:after {
  clear: both;
  /* Очистить обтекание */
  content: "";
  display: table;
}

.col-4 {
  width: 360px;
  margin-right: 30px;
  float: left;
}

.col-4:last-child {
  margin-right: 0px;
}


/* header */

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a {
  text-decoration: none;
  /* Цвет ссылки */
  color: white;
  text-align: center;
}

li {
  list-style-type: none;
}

.logo {
  margin-left: 2%;
  width: 80px;
  height: 80px;
}

.header {
  background: black;
  background-position: center;
  color: white;
  /*Цвет и размер текста в Шапке */
  font-size: 25px;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
}

.menu {
  display: flex;
  align-items: center;
  margin-left: 50px;
}

.menu li {
  margin-left: 50px;
  font-size: 100%;
  margin-right: 50px;
}

.menu li a {
  color: #fff;
  padding: 12px 0;
}

.menu li a:hover {
  color: #f1f0f5;
  border-top: 0.05em solid #f1f0f5;
  /* При наведении */
  border-bottom: 0.05em solid #f1f0f5;
}


/* Контент */

.content {
  padding-top: 30px;
  padding-bottom: 100px;
  overflow: hidden;
}

.itemcont {
  margin-bottom: 20px;
}

.title {
  font-size: 46px;
  margin-bottom: 60px;
  text-align: center;
}

.itemimage {
  margin-bottom: 17px;
}

.itemtitle {
  font-size: 24px;
  line-height: normal;
  /* Высота строчки */
  margin-bottom: 5px;
}

.itemabus {
  font-size: 16px;
  line-height: 1.5;
}

.itemtitle a {
  color: black;
}

.itemtitle a:hover {
  color: #4a98ff;
  border-bottom: 0.05em solid #4a98ff;
}

.buttons {
  font-size: 16px;
  margin-left: 5px;
  padding-left: 5px;
  color: #443200;
  display: flex;
  background: #f6c20c;
  width: 90px;
  height: 23px;
  border-radius: 20px;
}

.buttons:hover {
  font-size: 16px;
  margin-left: 5px;
  padding-left: 5px;
  color: #443200;
  display: flex;
  background: #f3d05f;
  width: 90px;
  border-radius: 5px;
}


/* Подвал */

.footer {
  background-color: green;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>Достопримечательности NY</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">

  <link rel="stylesheet" href="diz.css">

  <link rel="shortcut icon" type="images/png" href="images/faviconec.jpg">

  <!-- Шрифты -->

  <link href="https://fonts.googleapis.com/css?family=Montserrat:200,500,900&amp;subset=cyrillic" rel="stylesheet">


  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

  <!-- ШАПКА -->

  <div class="header">

    <img src="images/Logotip.png" width="80" height="80" alt="Project" class="logo">

    <nav class="nav">
      <ul class="menu">
        <li class="glav">
          <a href="index.html">Главная</a>
        </li>
        <li class="about">
          <a href="aboutus.html">О Нас</a>
        </li>
        <li class="donat">
          <a href="donate.html">Поддержать</a>
        </li>
        <li class="calln">
          <a href="#">+8 (800) 555-35-35</a>
        </li>
        <li class="enter">
          <a href="#">Войти</a>
        </li>
      </ul>
    </nav>

  </div>

  <!-- Контент блок -->

  <div class="content">
    <div class="container">

      <div class="title">
        Достопримечательности Нью-Йорка
      </div>

      <div class="row">

        <!-- Парк -->

        <div class="col-4">
          <div class="itemcont">
            <div class="itemimage">
              <img src="images/CPark1.jpg" alt="Centralp">
            </div>
            <div class="itemtitle">
              <a class="maket" href="#">Central Park</a>
            </div>
            <div class="itemabus">
              <p>Один из крупнейших парков в США<br> и в мире. Длина парка составляет 4 километра, ширина 800 метров,а<br> общая площадь 3,41 километра².</p>
            </div>
          </div>
          <div class="button">
            <a class="buttons" href="https://www.google.com/maps/place/%D0%A6%D0%B5%D0%BD%D1%82%D1%80%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BF%D0%B0%D1%80%D0%BA/@40.782567,-73.9657698,3a,75y,204.14h,93.2t/data=!3m7!1e1!3m5!1se6KmzTJa4SkIs6T6JxwWBA!2e0!6s%2F%2Fgeo0.ggpht.com%2Fcbk%3Fpanoid%3De6KmzTJa4SkIs6T6JxwWBA%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D211%26h%3D120%26yaw%3D46.528496%26pitch%3D0%26thumbfov%3D100!7i13312!8i6656!4m5!3m4!1s0x89c2589a018531e3:0xb9df1f7387a94119!8m2!3d40.7828647!4d-73.9653551"
              target="_blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
          </div>
        </div>

        <!-- Таймс Сквер -->

        <div class="col-4">

          <div class="itemimage">
            <img src="images/TimeS1.jpg" alt="Time">
          </div>
          <div class="itemtitle">
            <a class="maket" href="#">Times Square</a>
          </div>
          <div class="itemabus">
            <p>Таймс-Сквер одно из самых знаменитых <br>посещаемых достопримечательностей мира, привлекающей около 50 миллионов посетителей ежегодно.</p>
            <div class="button">
              <a class="buttons" href="https://www.google.com/maps/place/%D0%A2%D0%B5%D0%B0%D1%82%D1%80%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BA%D0%B2-%D0%BB,+%D0%9D%D1%8C%D1%8E-%D0%99%D0%BE%D1%80%D0%BA,+%D0%A1%D0%A8%D0%90/@40.758555,-73.9855,3a,75y,357.7h,115.09t/data=!3m8!1e1!3m6!1sAF1QipO7rdINgK9pUqLk8cihRtXQdeZNKR3kF2b3jWeI!2e10!3e11!6shttps:%2F%2Flh5.googleusercontent.com%2Fp%2FAF1QipO7rdINgK9pUqLk8cihRtXQdeZNKR3kF2b3jWeI%3Dw203-h100-k-no-pi0-ya279.71542-ro-0-fo100!7i5376!8i2688!4m5!3m4!1s0x89c25855b8fb3083:0xa0f9aef176042a5c!8m2!3d40.759011!4d-73.9844722?hl=ru-RU"
                target="_blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
            </div>
          </div>
        </div>


        <!-- Бруклинский Мост -->

        <div class="col-4">
          <div class="itemcont">
            <div class="itemimage">
              <img src="images/Bridge1.jpg" alt="Brbridge">
            </div>
            <div class="itemtitle">
              <a class="maket" href="#">Brooklyn Bridge</a>
            </div>
            <div class="itemabus">
              <p>Это старейший висячий мост в США,<br> его длина достигает 1825 метров, а<br> ширина моста равна 26 метрам,<br>количество полос на мосту 6.</p>
              <div class="button">
                <a class="buttons" href="https://www.google.com/maps/@40.7062836,-73.9969898,3a,75y,46.05h,88.11t/data=!3m7!1e1!3m5!1swDee2NIIP2JFj_KGZABeOw!2e0!6s%2F%2Fgeo3.ggpht.com%2Fcbk%3Fpanoid%3DwDee2NIIP2JFj_KGZABeOw%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D96%26h%3D64%26yaw%3D318.29254%26pitch%3D0%26thumbfov%3D100!7i16384!8i8192"
                  target="-blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Подвал -->

  <div class="<footer>">
    <div class="container">
      <div class="row">
        <div class="col-4">
          <p class="footername">
            Владислав<br> ©2019 Cайт
          </p>

        </div>
        <div class="col-4">
          <p class="social">Социальные Сети:</p>
          <p class="socialicons">
            <a class="ceti" href="#" target="_blank">
              <i class="fab fa-vk"></i>
            </a>
            <a class="ceti" href="#" target="_blank">
              <i class="fab fa-twitter"></i>
            </a>
            <a class="ceti" href="#" target="_blank">
              <i class="fab fa-steam"></i>
            </a>
            <a class="ceti" href="#" target="_blank">
              <i class="fab fa-facebook-f"></i>
            </a>

          </p>
        </div>
        <div class="col-4">

          <div>
            <a class="contact" href="#" target="_blank">СВЯЗАТЬСЯ СО МНОЙ</a>

          </div>
          <!— КНОПКА СВСМН —>

        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/main.js"></script>
</body>

</html>

3
  • 2
    Что такое: <div class="<footer>"></div>?
    – meine
    Commented 9 мар. 2019 в 13:40
  • 1
    @meine, видать скопировал где-то и не обратил внимание...
    – Air
    Commented 9 мар. 2019 в 13:49
  • Вопрос следует закрыть из-за опечатки.
    – meine
    Commented 9 мар. 2019 в 13:53

1 ответ 1

0

html {
  line-height: 1.5;
}


/* Grid */

.container {
  width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.row {}

.row:after {
  clear: both;
  /* Очистить обтекание */
  content: "";
  display: table;
}

.col-4 {
  width: 360px;
  margin-right: 30px;
  float: left;
}

.col-4:last-child {
  margin-right: 0px;
}


/* header */

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a {
  text-decoration: none;
  /* Цвет ссылки */
  color: white;
  text-align: center;
}

li {
  list-style-type: none;
}

.logo {
  margin-left: 2%;
  width: 80px;
  height: 80px;
}

.header {
  background: black;
  background-position: center;
  color: white;
  /*Цвет и размер текста в Шапке */
  font-size: 25px;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
}

.menu {
  display: flex;
  align-items: center;
  margin-left: 50px;
}

.menu li {
  margin-left: 50px;
  font-size: 100%;
  margin-right: 50px;
}

.menu li a {
  color: #fff;
  padding: 12px 0;
}

.menu li a:hover {
  color: #f1f0f5;
  border-top: 0.05em solid #f1f0f5;
  /* При наведении */
  border-bottom: 0.05em solid #f1f0f5;
}


/* Контент */

.content {
  padding-top: 30px;
  padding-bottom: 100px;
  overflow: hidden;
}

.itemcont {
  margin-bottom: 20px;
}

.title {
  font-size: 46px;
  margin-bottom: 60px;
  text-align: center;
}

.itemimage {
  margin-bottom: 17px;
}

.itemtitle {
  font-size: 24px;
  line-height: normal;
  /* Высота строчки */
  margin-bottom: 5px;
}

.itemabus {
  font-size: 16px;
  line-height: 1.5;
}

.itemtitle a {
  color: black;
}

.itemtitle a:hover {
  color: #4a98ff;
  border-bottom: 0.05em solid #4a98ff;
}

.buttons {
  font-size: 16px;
  margin-left: 5px;
  padding-left: 5px;
  color: #443200;
  display: flex;
  background: #f6c20c;
  width: 90px;
  height: 23px;
  border-radius: 20px;
}

.buttons:hover {
  font-size: 16px;
  margin-left: 5px;
  padding-left: 5px;
  color: #443200;
  display: flex;
  background: #f3d05f;
  width: 90px;
  border-radius: 5px;
}


/* Подвал */

.footer {
  background-color: green;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>Достопримечательности NY</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">

  <link rel="stylesheet" href="diz.css">

  <link rel="shortcut icon" type="images/png" href="images/faviconec.jpg">

  <!-- Шрифты -->

  <link href="https://fonts.googleapis.com/css?family=Montserrat:200,500,900&amp;subset=cyrillic" rel="stylesheet">


  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

  <!-- ШАПКА -->

  <div class="header">

    <img src="images/Logotip.png" width="80" height="80" alt="Project" class="logo">

    <nav class="nav">
      <ul class="menu">
        <li class="glav">
          <a href="index.html">Главная</a>
        </li>
        <li class="about">
          <a href="aboutus.html">О Нас</a>
        </li>
        <li class="donat">
          <a href="donate.html">Поддержать</a>
        </li>
        <li class="calln">
          <a href="#">+8 (800) 555-35-35</a>
        </li>
        <li class="enter">
          <a href="#">Войти</a>
        </li>
      </ul>
    </nav>

  </div>

  <!-- Контент блок -->

  <div class="content">
    <div class="container">

      <div class="title">
        Достопримечательности Нью-Йорка
      </div>

      <div class="row">

        <!-- Парк -->

        <div class="col-4">
          <div class="itemcont">
            <div class="itemimage">
              <img src="images/CPark1.jpg" alt="Centralp">
            </div>
            <div class="itemtitle">
              <a class="maket" href="#">Central Park</a>
            </div>
            <div class="itemabus">
              <p>Один из крупнейших парков в США<br> и в мире. Длина парка составляет 4 километра, ширина 800 метров,а<br> общая площадь 3,41 километра².</p>
            </div>
          </div>
          <div class="button">
            <a class="buttons" href="https://www.google.com/maps/place/%D0%A6%D0%B5%D0%BD%D1%82%D1%80%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BF%D0%B0%D1%80%D0%BA/@40.782567,-73.9657698,3a,75y,204.14h,93.2t/data=!3m7!1e1!3m5!1se6KmzTJa4SkIs6T6JxwWBA!2e0!6s%2F%2Fgeo0.ggpht.com%2Fcbk%3Fpanoid%3De6KmzTJa4SkIs6T6JxwWBA%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D211%26h%3D120%26yaw%3D46.528496%26pitch%3D0%26thumbfov%3D100!7i13312!8i6656!4m5!3m4!1s0x89c2589a018531e3:0xb9df1f7387a94119!8m2!3d40.7828647!4d-73.9653551"
              target="_blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
          </div>
        </div>

        <!-- Таймс Сквер -->

        <div class="col-4">

          <div class="itemimage">
            <img src="images/TimeS1.jpg" alt="Time">
          </div>
          <div class="itemtitle">
            <a class="maket" href="#">Times Square</a>
          </div>
          <div class="itemabus">
            <p>Таймс-Сквер одно из самых знаменитых <br>посещаемых достопримечательностей мира, привлекающей около 50 миллионов посетителей ежегодно.</p>
            <div class="button">
              <a class="buttons" href="https://www.google.com/maps/place/%D0%A2%D0%B5%D0%B0%D1%82%D1%80%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9+%D0%BA%D0%B2-%D0%BB,+%D0%9D%D1%8C%D1%8E-%D0%99%D0%BE%D1%80%D0%BA,+%D0%A1%D0%A8%D0%90/@40.758555,-73.9855,3a,75y,357.7h,115.09t/data=!3m8!1e1!3m6!1sAF1QipO7rdINgK9pUqLk8cihRtXQdeZNKR3kF2b3jWeI!2e10!3e11!6shttps:%2F%2Flh5.googleusercontent.com%2Fp%2FAF1QipO7rdINgK9pUqLk8cihRtXQdeZNKR3kF2b3jWeI%3Dw203-h100-k-no-pi0-ya279.71542-ro-0-fo100!7i5376!8i2688!4m5!3m4!1s0x89c25855b8fb3083:0xa0f9aef176042a5c!8m2!3d40.759011!4d-73.9844722?hl=ru-RU"
                target="_blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
            </div>
          </div>
        </div>


        <!-- Бруклинский Мост -->

        <div class="col-4">
          <div class="itemcont">
            <div class="itemimage">
              <img src="images/Bridge1.jpg" alt="Brbridge">
            </div>
            <div class="itemtitle">
              <a class="maket" href="#">Brooklyn Bridge</a>
            </div>
            <div class="itemabus">
              <p>Это старейший висячий мост в США,<br> его длина достигает 1825 метров, а<br> ширина моста равна 26 метрам,<br>количество полос на мосту 6.</p>
              <div class="button">
                <a class="buttons" href="https://www.google.com/maps/@40.7062836,-73.9969898,3a,75y,46.05h,88.11t/data=!3m7!1e1!3m5!1swDee2NIIP2JFj_KGZABeOw!2e0!6s%2F%2Fgeo3.ggpht.com%2Fcbk%3Fpanoid%3DwDee2NIIP2JFj_KGZABeOw%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D96%26h%3D64%26yaw%3D318.29254%26pitch%3D0%26thumbfov%3D100!7i16384!8i8192"
                  target="-blank" title="Нажмите, для виртуальной прогулки">НА КАРТЕ</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Подвал -->

  <div class="footer"> <!-- Здесь у вас была опечатка -->
    <div class="container">
      <div class="row">
        <div class="col-4">
          <p class="footername">
            Владислав<br> ©2019 Cайт
          </p>

        </div>
        <div class="col-4">
          <p class="social">Социальные Сети:</p>
          <p class="socialicons">
            <a class="ceti" href="#" target="_blank">
              <i class="fab fa-vk"></i>
            </a>
            <a class="ceti" href="#" target="_blank">
              <i class="fab fa-twitter"></i>
            </a>
            <a class="ceti" href="#" target="_blank">
              <i class="fab fa-steam"></i>
            </a>
            <a class="ceti" href="#" target="_blank">
              <i class="fab fa-facebook-f"></i>
            </a>

          </p>
        </div>
        <div class="col-4">

          <div>
            <a class="contact" href="#" target="_blank">СВЯЗАТЬСЯ СО МНОЙ</a>

          </div>
          <!— КНОПКА СВСМН —>

        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/main.js"></script>
</body>

</html>
У вас вышла опечатка когда вы задавали блоку класс footer

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.