форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
01-08-2018 в 23:09 235

Html страница услуг


Html страница услуг
Всем привет на одном форуме пользователь оставил просьбу на о помощи придумать ему дизайн для страницы услуг и как всегда я не смог пройти мимо и предложил свои варианты вариантов было несколько но в этом посте я поделюсь с вами уже готовой вёрсткой одного из вариантов

Страница легко подстраивается под разные размеры экранов и одинаково не плохо смотрится как на пк так и на мобильных устройствах
Стиль страницы светло синий на ней так же есть картинка в шапке и используются шрифтовые иконки от font-awesome а это значит что вы легко их можете поменять на свои просто перейдя на сайт с иконками и выбрать те которые подходят вам

Для начало мы подключим сами иконки если они у вас не подключены для этого просто добавим в вашу таблицу стилей в самый верх такую строчку

Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

если подключены то не нужно их подключать ещё раз

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

#clr{clear:both}
  .head {
  position: relative;
  background: #000 url("../img/12.jpg")no-repeat top center;
  background-size: cover;
  min-height: 300px;
  }
  .headBg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(39,117,222,.6);
  z-index: 2;
  }
  .nameHead {
  position: absolute;
  z-index: 3;
  color: #FFF;
  font-size: 30px;
  text-align: center;
  bottom: 70px;
  width: 100%;
  }
  .nameHead h1 {
  color: #FFF;
  font-size: 32px!important;
  font-style: normal;
  font-weight: 100;
  text-transform: uppercase;
  }
  .nameHead span {
  width: 90px;
  margin: 0 auto;
  height: 5px;
  background: #FFD200;
  display: block;
  }

  .strContBc {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 30px;
  }
  .strContBcList {
  position: relative;
  padding: 40px 20px;
  border-bottom: solid 1px #EFEFEF;
  }

  .strContBcIconBc {
  position: absolute;
  top: 0;
  left: 20px;
  bottom: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #4FB3F4;
  line-height: 60px;
  text-align: center;
  color: #FFF;
  font-size: 30px;
  }

  .strContBcInfBc {
  margin-left: 90px;
  }
  .strContBcInfBc h3 {
  color: #333;
  font-size: 18px;
  font-weight: 100;
  text-transform: uppercase;
  }
  .strContBcInfBc p {
  display: block;
  padding: 7px 0;
  }

  .strContBcH2 {
  padding: 30px 0;
  }

  .strContBcH2 h2 {
  color: #333;
  font-size: 22px;
  font-style: normal;
  font-weight: 100;
  text-transform: uppercase;
  padding-right: 30px;
  border-bottom: 5px solid #4FB3F4;
  display: inline-block;
  line-height: 40px;
  }

  .contactiBc div {padding: 0 0 10px;line-height: 28px;font-size: 16px;color: #333;}
  .contactiBc div i {font-size: 24px;float: left;margin-right: 15px;color: #4FB3F4;}
  .contactiBc div a {display: inline-block;padding: 0 10px;font-size: 16px;color: #999;}
  .contactiBc div a:hover {color: #4FB3F4;}

Отлично! не забываем сохранить.

Ну и код самой страницы выглядит так

Код

<div class="head">
<div class="headBg"></div>
  <div class="nameHead">
  <h1>заказать сайт</h1>
  <span></span>
  </div>
</div>

<div class="strContBc">

<div class="strContBcH2">
  <h2>перед заказом вам нужно учесть следующее!</h2>
  <span></span>
  </div>

  <div class="strContBcList">
  <div class="strContBcIconBc"><i class="fa fa-files-o" aria-hidden="true"></i></div>
  <div class="strContBcInfBc">
  <h3>Количество страниц</h3>
  <p>Решите, какие страницы будут на сайте и примерно сколько всего их будет.</p>
  </div>
  </div>

  <div class="strContBcList">
  <div class="strContBcIconBc"><i class="fa fa-file-text" aria-hidden="true"></i></div>
  <div class="strContBcInfBc">
  <h3>Содержимое</h3>
  <p>Решите, какое содержимое должно быть на сайте. Какой текст и картинки будут на страницах сайта.</p>
  </div>
  </div>

  <div class="strContBcList">
  <div class="strContBcIconBc"><i class="fa fa-clipboard" aria-hidden="true"></i></div>
  <div class="strContBcInfBc">
  <h3>Дизайн</h3>
  <p>Определитесь с дизайном сайта. Решите, как должен выглядеть сайт. Можно взять за основу другие сайты или Вы можете придумать дизайн сами. По Вашему желеланию, я могу самостоятельно выбрать какой-нибудь шаблон, но тогда дизайн будет очень простой.</p>
  </div>
  </div>

  <div class="strContBcList">
  <div class="strContBcIconBc"><i class="fa fa-map-signs" aria-hidden="true"></i></div>
  <div class="strContBcInfBc">
  <h3>Домен и хостинг</h3>
  <p>Если Вам нужна консультация по домену и хостингу, то я могу помочь Вам с их приобретением. Но оплачиваете их Вы сами. Учитывайте, что привязка домена к хостингу занимает до трёх дней.</p>
  </div>
  </div>

  <div class="strContBcList">
  <div class="strContBcIconBc"><i class="fa fa-code" aria-hidden="true"></i></div>
  <div class="strContBcInfBc">
  <h3>Скрипты</h3>
  <p>Вы можете заказать скрипты для расширения возможностей сайта. Сложные скрипты оплачиваются отдельно.</p>
  </div>
  </div>

  <div class="strContBcList">
  <div class="strContBcIconBc"><i class="fa fa-clock-o" aria-hidden="true"></i></div>
  <div class="strContBcInfBc">
  <h3>Работа над сайтом</h3>
  <p>Если у Вас нет возможности быстро выполнить указанные выше действия, то это можно делать постепенно. Я могу работать над сайтом с такой интенсивностью, которая Вам удобна. Мы можем делать любые перерывы в работе.</p>
  </div>
  </div>

  <div class="strContBcH2">
  <h2>Контакты</h2>
  <span></span>
  </div>

  <div class="contactiBc">
  <div><i class="fa fa-envelope" aria-hidden="true"></i> Имэйл: <a href="/">Ваша почта</a></div>
  <div><i class="fa fa-vk" aria-hidden="true"></i> Вконтакте: <a href="/">Ваше имя в контакте</a></div>
  <div><i class="fa fa-skype" aria-hidden="true"></i> Скайп: <a href="/">Ваше скайп</a></div>
  </div>
</div>

Вставляем данный код на нужную страницу или туда куда вам захочется!
Если вы хотите использовать данный код как целую страницу то нет проблем просто скопируйте код ниже и вставьте его в место всего кода страницы а код выше в ставьте в него в место слов ТУТ КОД СТРАНИЦЫ и сохраните

Код
<html>
<head>
<title>Название страницы</title>
<link type="text/css" rel="stylesheet" href="/_st/my.css" />
</head>
<body>
ТУТ КОД СТРАНИЦЫ
</body>
</html>

Теперь скачайте архив и загрузите картинку в папку img к себе на сайт


Текст и иконки как я уже говорил вы меняете на свой и страница готова!


Комментарии

Комментариев пока нет!
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

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

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru