Почему мы:

  • обучаем SEO с нуля
  • подробные лекции с записяси
  • практика на реальных проектах
  • 12 полезных занятий
  • практические домашние задания

  • Зарегистрироваться на курс!

    Когда:

  • старт - 15 июня 2017 года;
  • понедельник, четверг
  • 19.00 - 21.30
  • Где:

  • Львов, ул. Антоновича, 132а
  • F3 Space
  • 050-900-14-80
  • 063-072-10-56
  • 098-23-20-265
  • Лекторы

    Катерина Золотарева интернет-маркетолог, 
    SEO-специалист в 6-летним стажем.
    Финансово успешный фрилансер. 
    За это время вывела в ТОП 
    более 350 сайтов, работала с проектами на

                 Украину, Россию, Европу и США. Совладелец студии Site24.


     

    Олег Галица - SEO специалист

    с 4-летним опытом работы. Более 150 успешных

    проектов в портфолио. Специализация - крупные

    интернет-магазины и сайты услуг.

    Выводил проекты под Украину, Россию и Беларусь.                             

    Владелец студии SEO-Fix.

     


    Typography

    Категория: Template Settings Опубликовано 29 Январь 2011
    Автор: Super User Просмотров: 765

    Headings

    All HTML headings, <h1> through <h6> are available.

    h1. Heading 1

    h2. Heading 2

    h3. Heading 3

    h4. Heading 4

    h5. Heading 5
    h6. Heading 6

    Drop Caps

    Add magazine style drop caps for your first letter in paragraph to emphasize the article.

    You quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious.nterruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious.nterruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious.



    Joomla quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious.



    Simple quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious.Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious.Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious.



    Grid quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious.Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious.Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious.


    <span class="dropcap">Y</span>lypian...
    <span class="dropcap2">J</span>lypian...
    <span class="dropcap3">S</span>lypian...
    <span class="dropcap4">G</span>lypian...
    

    Code examples

    Wrap inline snippets of code with <code>.

    For example, <section> should be wrapped as inline.
    For example, <code><section></code> should be wrapped as inline.
    

    Basic block

    Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

    <p>Sample text here...</p>
    
    <pre>
      &lt;p&gt;Sample text here...&lt;/p&gt;
    </pre>
    

    Prettyprint block

    Use <pre class="prettyprint linenums"> for multiple lines of code including line numbers. Be sure to escape any angle brackets in the code for proper rendering.

    <p>Sample text here...</p>
    
    <pre class="prettyprint linenums">
      &lt;p&gt;Sample text here...&lt;/p&gt;
    </pre>
    

    Example block including prettyprint block

    To display your code with example block use code below.

    <p>Sample code here...</p>
    
    <div class="yjsg-example">
    	<pre class="prettyprint linenums">&lt;p&gt;Sample code here...&lt;/p&gt;</pre>
    </div>
    

    Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

    You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

    Lead body copy

    Make a paragraph stand out by adding .lead.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

    <p class="lead">...</p>
    

    Abbreviations

    Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

    <abbr>

    For expanded text on long hover of an abbreviation, include the title attribute.

    An abbreviation of the word attribute is attr.

    <abbr title="attribute">attr</abbr>
    

    <abbr class="initialism">

    Add .initialism to an abbreviation for a slightly smaller font-size.

    HTML is the best thing since sliced bread.

    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
    

    Emphasis

    Make use of HTML's default emphasis tags with lightweight styles.

    <small>

    For de-emphasizing inline or blocks of text, use the small tag.

    This line of text is meant to be treated as fine print.

    <p>
      <small>This line of text is meant to be treated as fine print.</small>
    </p>
    

    Emphasis classes

    Convey meaning through color with a handful of emphasis utility classes.

    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

    Etiam porta sem malesuada magna mollis euismod.

    Donec ullamcorper nulla non metus auctor fringilla.

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

    <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    

    Addresses

    Present contact information for the nearest ancestor or the entire body of work.

    <address>

    Preserve formatting by ending all lines with <br>.

    <address>
      <strong>Twitter, Inc.</strong><br>
      795 Folsom Ave, Suite 600<br>
      San Francisco, CA 94107<br>
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>
    <address>
      <strong>Full Name</strong><br>
      <a href="mailto:#">first.lastATyourmailDOTcom</a>
    </address>
    

    Blockquotes

    For quoting blocks of content from another source within your document.

    Default blockquote

    Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>
    

    Blockquote options

    Style and content changes for simple variations on a standard blockquote.

    Naming a source

    Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Someone famous in Source Title
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <small>Someone famous <cite title="Source Title">Source Title</cite></small>
    </blockquote>
    

    Alternate displays

    Use .pull-right for a floated, right-aligned blockquote. You can combine it with .pull-right class.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Someone famous in Source Title
    <blockquote class="pull-right">
      ...
    </blockquote>
    

    Blockquotes quoted

    Use .quoted for a quoted style blockquote. You can combine it with .pull-right class.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat

    Someone famous in Source Title
    <blockquote class="quoted">
      ...
    </blockquote>
    

    Blockquotes brackets

    Use .brackets for a curly brackets style blockquote.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Integer posuere erat

    Someone famous in Source Title
    <blockquote class="brackets">
      ...
    </blockquote>
    

    Big numbers

    Use <p class="blocknumber"><span class="bignumber">01.</span>Content goes here!</p> to emphasize your text blocks with big numbers.

    Default:

    01Sample of Big Numbers List<p class="blocknumber"><span class="bignumber">01.</span>Content goes here!</p>Need some more text here to display demo content.Need some more text here to display demo content.Need some more text here to display demo content.

    02Sample of Big Numbers List <p class="blocknumber"><span class="bignumber">02.</span>Content goes here!</p> Need some more text here to display demo content.Need some more text here to display demo content.Need some more text here to display demo content.

    03Sample of Big Numbers List<p class="blocknumber"><span class="bignumber">03.</span>Content goes here!</p> Need some more text here to display demo content.Need some more text here to display demo content.Need some more text here to display demo content.

    Rounded:

    01Sample of Big Numbers List<p class="blocknumber"><span class="bignumber">01.</span>Content goes here!</p>Need some more text here to display demo content.Need some more text here to display demo content.Need some more text here to display demo content.

    02Sample of Big Numbers List <p class="blocknumber"><span class="bignumber">02.</span>Content goes here!</p> Need some more text here to display demo content.Need some more text here to display demo content.Need some more text here to display demo content.

    03Sample of Big Numbers List<p class="blocknumber"><span class="bignumber">03.</span>Content goes here!</p> Need some more text here to display demo content.Need some more text here to display demo content.Need some more text here to display demo content.

    <p class="blocknumber">
    <span class="bignumber">02</span><strong>
    	Sample...
    </p>
    <p class="blocknumber bnround">
    <span class="bignumber">02</span><strong>
    	Sample...
    </p>
    

    Lists

    Unordered

    A list of items in which the order does not explicitly matter.

    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
      • Phasellus iaculis neque
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
    • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    <ul>
      <li>...</li>
    </ul>
    

    Ordered

    A list of items in which the order does explicitly matter.

    1. Lorem ipsum dolor sit amet
    2. Consectetur adipiscing elit
    3. Integer molestie lorem at massa
    4. Facilisis in pretium nisl aliquet
    5. Nulla volutpat aliquam velit
    6. Faucibus porta lacus fringilla vel
    7. Aenean sit amet erat nunc
    8. Eget porttitor lorem
    <ol>
      <li>...</li>
    </ol>
    
     

    Unstyled

    A list of items with no list-style or additional left padding.

    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
      • Phasellus iaculis neque
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
    • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    <ul class="unstyled">
      <li>...</li>
    </ul>
    

    Video

    A list of items with video icon.

    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
    • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    <ul class="video">
      <li>...</li>
    </ul>
    
     

    Check

    A list of items with check icon.

    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
    • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    <ul class="check">
      <li>...</li>
    </ul>
    

    Star

    A list of items with star icon.

    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
    • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    <ul class="star">
      <li>...</li>
    </ul>
    
     

    Disc

    A list of items with disc list type.

    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
    • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    <ul class="disc">
      <li>...</li>
    </ul>
    

    Icon mix

    A list of items using FontAwesome class names. You can choose from 220 icons that come with your template.
    Icons respond to list font size.

    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
    • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    <ul class="yjt_iconlist">
      <li class="icon-share">...</li>
    </ul>
    




















    Sample of template read more button use

    <a class="tempalte_readmore" href="#">Your text</a>
    

    Sample of template read more button 2 use

    <a class="tempalte_readmore2" href="#">Your text</a>
    

    Sample of template read more button 3 use

    <a class="tempalte_readmore3" href="#">Your text</a>
    
    Read more

    Sample of template paragraph center use

    <p class="paragraph_center">Your text</p>
    

    Curabitur a magna eros. Integer diam est, condimentum vitae dolor ut, faucibus consequat elit. Pellentesque commodo ligula orci, vitae sagittis dui aliquet sed.


    Sample of template list use

    <ul class="memento_list"><li><a href="#"><span class="icon-check-sign"></span>Your text</a></li></ul>
    
    Поисковое эффективное продвижение сайтов в Волгограде.

    Скидка!

    5400 грн 4500 грн

    Следите за нами в социальных сетях

    Как нас найти

    Львов, ул. Антоновича, 132а - F3 Space

    Как с нами связаться

    Если у вас возникли вопросы - мы с радостью ответим на них в кратчайшие сроки

    050-900-14-80, 098-232-02-65, 073-442-90-60 katerina.zolotaryova@gmail.com