• DEMTeam

Основной заголовок страницы

Подзаголовок набран гарнитурой Опен санс регуляр, кеглем в 24 пункта и интерльяжем в 30 пунктов. Набирается исключительно в несколько строк, минимум в две и максимум в пять.

<h1>Основной заголовок страницы</h1>
<p>Подзаголовок набран гарнитурой Опен санс регуляр, кеглем в 24 пункта и интерльяжем в 30 пунктов. Набирается исключительно в несколько строк, минимум в две и максимум в пять.</p>

Подпись набирается курсивом в 14 пунктов, точка в конце подписи не ставиться
<figure>
    <p><img src="img/image.png" alt="" /></p>
    <figcaption>Подпись набирается курсивом в 14 пунктов, точка в конце подписи не ставиться </figcaption>
</figure>

Заголовок второго уровня

Основной текст набирается Ариалом для Виндоуса и Гельветикой для Мака. Кегль — 14 пунктов, интерльяж — 24 пункта. Растояние между абзацами равно одной пропущенной строке. Все слова, состоящие менее трёх букв переносятся на следующую строку. Строка не должна начинаться с тире или другого знака.

Мы занимаемся комплексным интернет-маркетингом. Решаем задачи наших клиентов с помощью веб-инструментов: создаем и развиваем сайты, разрабатываем сервисы и приложения, ведем социальную активность и выстраиваем коммуникации продукта и потребителя. Мы делаем это комплексно, учитывая множество факторов, что помогает получать высокое качество.

Ниже приведён пример таблицы с заголовком и поясняющим текстом:

Заголовок таблицы набран как подзаголовок, только в 18 пунктов

Подзаголовок набран обычным начертанием, должен дополнять смысл заголовка

Тариф Кол-во дней Объём, ГБ Скидка, % Стоимость,
Начальный 3 24343 8 234
Средний 42 463500 12 23000
Уникальный 1832 3500 69 1603048
Максимальный 461 75242 6 235675
<div class="h2 table">Заголовок таблицы набран как подзаголовок, только в 18 пунктов</div>
   <p>Подзаголовок набран обычным начертанием, должен дополнять смысл заголовка</p>
   <table>
       <thead>
           <th>Тариф</th>
           <th>Кол-во дней</th>
           <th>Объём, <span class="ed">ГБ</span></th>
           <th>Скидка, <span class="ed">%</span></th>
           <th>Стоимость, <i class="rubl"></i></th>
       </thead>
       <tbody>
           <tr>
               <td>Начальный</td>
               <td>3</td>
               <td>24343</td>
               <td>8</td>
               <td>234</td>
           </tr>
           <tr>
               <td>Средний</td>
               <td>42</td>
               <td>463500</td>
               <td>12</td>
               <td>23000</td>
           </tr>
           <tr>
               <td>Уникальный</td>
               <td>1832</td>
               <td>3500</td>
               <td>69</td>
               <td>1603048</td>
           </tr>
           <tr>
               <td>Максимальный</td>
               <td>461</td>
               <td>75242</td>
               <td>6</td>
               <td>235675</td>
           </tr>
       </tbody>
   </table>
<div class="banner">
  <img src="img/banner.png">
</div>

Списки и их использование

Список, или перечень, — это предложение с однородными членами, разбитыми для удобства чтения на отдельные строки, обозначенными графическими маркерами или наборными символами.

Поэтому любой список предваряется обобщающим текстом (общей, неповторяющейся частью предложения) или заголовком в той же синтаксической роли:

  • Первый элемент перечня ставится ровно на следующую строку за обобщающим текстом без увеличения расстояния между строками, чтобы подчеркнуть, что это то же предложение.
  • Ваши конкуренты не сидят на месте, они также ведут активную борьбу и с вами и другими участниками рынка. Это просто поначалу незаметно. И дав «передышку» вашему проекту, вы можете отдалиться от конкурентов далеко назад, а догонять, как известно, всегда затратнее.
  • Есть такие субъективные факторы, как удобство, возможности и др. Сколько бы мы не работали с любым проектом, всегда можно найти что улучшить — так говорил легендарный Генри Форд. Нужно постоянно работать с вашим проектом, постоянно искать и улучшать слабые места или мелкие недоработки.
<p class="no-margin">Поэтому любой список предваряется обобщающим текстом (общей, неповторяющейся частью предложения) или заголовком в той же синтаксической роли:</p>
<ul class="list">
    <li>Первый элемент перечня ставится ровно на следующую строку за обобщающим текстом без увеличения расстояния между строками, чтобы подчеркнуть, что это то же предложение. </li>
    <li>Ваши конкуренты не сидят на месте, они также ведут активную борьбу и с вами и другими участниками рынка. Это просто поначалу незаметно. И дав «передышку» вашему проекту, вы можете отдалиться от конкурентов далеко назад, а догонять, как известно, всегда затратнее.</li>
    <li>Есть такие субъективные факторы, как удобство, возможности и др. Сколько бы мы не работали с любым проектом, всегда можно найти что улучшить — так говорил легендарный Генри Форд. Нужно постоянно работать с вашим проектом, постоянно искать и улучшать слабые места или мелкие недоработки. </li>
</ul>

Расстояние от последнего элемента списка до следующего элемента страницы равно двум пустым строкам. Если список не нумерованный, то вместо маркеров используется тире:

  1. Первый элемент перечня
  2. Второй элемент
    набранный в две строки
  3. Третий элемент немаркированного списка.
<p class="no-margin">Расстояние от последнего элемента списка до следующего элемента страницы равно двум пустым строкам. Если список не нумерованный, то вместо маркеров используется тире:</p>
<ol>
    <li>Первый элемент перечня </li>
    <li>Второй элемент<br>набранный в две строки</li>
    <li>Третий элемент немаркированного списка.</li>
</ol>

Сноска добавляется при необходимости дополнить текст, но если убрать сноску, то важная информация не потеряется.

Набирается сноска меньшим кеглем, интерльяж уменьшается.

<div class="site">
    <p>Сноска добавляется при необходимости дополнить текст, но если убрать сноску, то важная информация не потеряется.</p>
    <p>Набирается сноска меньшим кеглем, интерльяж уменьшается.</p>
</div>

Цитаты и нестандартные элементы

Цитаты используются, чтобы дополнить текст. Внутри «ёлочек» текст цитаты набирается курсивом. Обязательно указывается автор цитаты. В дополнение можно указать место и время использования, например, цитата из журнала, фильма, книги или аудиозаписи. При использовании цитаты из книги — обязательно указывать издателя.

Если человек одел форму СС, то есть, четкое, он окрасил себя в те цвета, в которые он окрасил себя. И те люди, которые… Есть очень много по этому поводу точек зрения. Я четко придерживаюсь и четко понимаю, что те проявления, если вы уже так ребром ставите вопрос, что якобы мы. Виталий Кличко, интервью Владимиру Познеру
<blockquote>
   <q>Если человек одел форму СС, то есть, четкое, он окрасил себя в те цвета,
в которые он окрасил себя. И те люди, которые… Есть очень много по этому поводу точек зрения. Я четко придерживаюсь и четко понимаю, что те проявления, если
вы уже так ребром ставите вопрос, что якобы мы.</q>
 <site>Виталий Кличко, интервью Владимиру Познеру</site>
  </blockquote>

На сайте можно воспользоваться и цитатой кода, в том месте, где это уместно. Например, в статье для программистов и технологов. Цвет текста кода набран одним цветом, без синтаксиса.

# indent your Python code to put into an email
import glob
# glob supports Unix style pathname extensions
python_files = glob.glob('*.py')
for file_name in sorted(python_files):
    print '    ------' + file_name

    with open(file_name) as f:
        for line in f:
            print '    ' + line.rstrip()
<pre></pre>
<div class="file">
    <div class="file__img">
        <a href="">
            <img src="img/text.png">
        </a>
    </div>
    <div class="file__text">
        <a href="">Ссылка на документ или текстовый файл</a>
        <p>ПДФ, 23 МБ</p>
    </div>
</div>

Заказать
<div class="tarif__button">
        <span>Заказать</span>
        <div class="tarif__button-t"></div>
    </div>

И ещё

Деление на две колонки:
65%
25%
<div class="line">
    <div class="left"></div>
    <div class="right"></div>
</div>
Такой раздел с надписью
<div class="drow">
    <div class="drow__title">Такой раздел с надписью</div>
</div>

Большая цифра:
22

<span class="big">22</span>

Красный текст

<span class="red">Красный текст</span>

Тайтл
Тайтл
Тайтл

<span class="h1">Тайтл</span><br>
<span class="title">Тайтл</span><br>
<span class="h2">Тайтл</span>

Обычная ссылка
Ссылка без подчеркивания
Ссылка с точками
Наклонный
Полужирный
Наклонный полужирный

<a href="#">Обычная ссылка</a><br>
<a href="#" class="nostyle">Ссылка без подчеркивания</a><br>
<a href="#" class="dotted">Ссылка с точками</a><br>
<span class="italic">Наклонный</span><br>
<span class="bold">Полужирный</span><br>
<span class="bold italic">Наклонный полужирный</span>

Текст в рамке

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi deleniti deserunt dignissimos ex fugiat laborum neque omnis quis tempore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque delectus dolorum earum eos ipsam perferendis qui quibusdam repellendus ut! Adipisci architecto consequuntur exercitationem ipsam libero odio quibusdam quidem voluptate! Adipisci consectetur corporis dicta dolorem exercitationem fugit id impedit incidunt ipsam, itaque libero nemo nisi numquam optio, quae reprehenderit sed vitae.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi deleniti deserunt dignissimos ex fugiat laborum neque omnis quis tempore.


<div class="border">
<h2>Текст в рамке</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi deleniti deserunt dignissimos ex fugiat laborum neque omnis quis tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque delectus dolorum earum eos ipsam perferendis qui quibusdam repellendus ut! Adipisci architecto consequuntur exercitationem ipsam libero odio quibusdam quidem voluptate! Adipisci consectetur corporis dicta dolorem exercitationem fugit id impedit incidunt ipsam, itaque libero nemo nisi numquam optio, quae reprehenderit sed vitae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi deleniti deserunt dignissimos ex fugiat laborum neque omnis quis tempore.</p>
</div>
Посмотреть сайт Посмотреть сайт

<div>
<a class="red-square" href="http://viatshiy.com/">Посмотреть сайт</a> <span class="green">Посмотреть сайт</span>
</div>