Шаг шестой: Сделаем на странице адаптивность в html5 и css3

Здравствуйте, уважаемые друзья и гости блога! Сегодня у нас заключительный урок по созданию адаптивной страницы подписки в html5 и css3.

Шаг шестой и заключительный. Так давайте с вами доделаем нашу страницу подписки до победного конца, чтобы она была красива на всех устройствах, включая мобильные, что сейчас так важно для сео продвижения и раскрутки сайта.

Приступим …

Придаем адаптивность в html5 и css3 странице подписки

Как всегда я вам подготовил уже готовый код:

@media screen end (max-width:1070px){
  .subscribe input[type="text"], .subscribe input[type="email"]{
    width:260px;
  }
}

@media screen end (max-width:1067px){
  .subscribe input[type="text"], .subscribe input[type="email"]{
    width:320px; display:block; float:none; margin-right:0; margin-bottom:10px;
  }
    header{
      padding:30px 20px;
    }
    header>h1{
      font-size:2.75em; margin-bottom: 20px
    }
    header>h3{
      margin-bottom: 25px;
   }

}
@media screen end (max-width:400px){
  .subscribe input[type="text"], .subscribe input[type="email"]{
    width:240px;
  }
}

Он придаст вашей и без того уже красивой странице подписки адаптивность в html5 и css3.

Вам нужно его скопировать и вставить в самый конец нашего файла стилей style.css.

А также вот еще один нюанс. Вот этот вот код:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Вам нужно вставить в файл index.html в начале перед тегом title.

И теперь ваша и без того красивая страница подписки полностью адаптирована для всех мобильных устройств и персональных компьютеров.

В чем Вы можете убедиться попробовав открыть ее на своем мобильном устройстве или просто сжав в своем браузере. Убедились?!

Теперь смотрим заключительный видеоурок:

И на это сегодня все!

Далее мы с вами узнаем:

Все шаги создания адаптивной страницы в html5 и css3:

• Шаг первый: Создание разметки страницы в html5 и css3
• Шаг второй: Назначение общих CSS стилей для создания адаптивной страницы в html5 и css3
• Шаг третий: Назначение стилей для header в создании адаптивной страницы на html5 и css3
• Шаг четвертый: Описание стилей CSS для формы подписки в создании адаптивной страницы на html5 и css3
• Шаг пятый: Описание стилей основного контента в создании адаптивной страницы на html5 и css3
• Шаг шестой: Делаем страницу адаптивной в html5 и css3

Друзья! Вы хотите узнать свое будущее? Если да, тогда узнайте об этом подробнее здесь!

Спасибо вам за внимание!

Всегда Ваш Валерий Бородин