Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <style>
	.frow {
		display: flex;
		margin-right: -20px;
	}

	.col {
		flex: 1 1 100%;
		padding-right: 20px;
	}

	.pt-25 {
		padding-top: 2.5rem;
	}

	.pt-18 {
		padding-top: 1.8rem;
	}
</style>

<div class="page-main">
	<div class="inner">
		<div class="frow">
			<div class="col">
				<h2 class="h0">H0. Заголовок для обложки лендинга</h2>
				<p class="s0">S0. Это первый в России образовательный проект,</p>
				<h2 class="h0">H0. Заголовок для обложки лендинга</h2>
				<p class="s1">S1. Это первый в России образовательный проект,</p>
				<h2 class="h0">H0. Заголовок для обложки лендинга</h2>
				<p class="s2">S2. Это первый в России образовательный проект,</p>
				<h2 class="h0">H0. Заголовок для обложки лендинга</h2>
				<p class="s3">S3. Это первый в России образовательный проект,</p>
				<h2 class="h0">H0. Заголовок для обложки лендинга</h2>
				<p>P. Это первый в России образовательный проект,</p>
				<p>P. Это первый в России образовательный проект,</p>
			</div>
			<div class="col">
				<h2 class="h1">H1. Заголовок для обложки лендинга</h2>
				<p class="s0">S0. Это первый в России образовательный проект,</p>
				<h2 class="h1">H1. Заголовок для обложки лендинга</h2>
				<p class="s1">S1. Это первый в России образовательный проект,</p>
				<h2 class="h1">H1. Заголовок для обложки лендинга</h2>
				<p class="s2">S2. Это первый в России образовательный проект,</p>
				<h2 class="h1">H1. Заголовок для обложки лендинга</h2>
				<p class="s3">S3. Это первый в России образовательный проект,</p>
				<h2 class="h1">H1. Заголовок для обложки лендинга</h2>
				<p>P. Это первый в России образовательный проект,</p>
			</div>
			<div class="col">
				<h2 class="h2">H2. Заголовок для обложки лендинга</h2>
				<p class="s0">S0. Это первый в России образовательный проект,</p>
				<h2 class="h2">H2. Заголовок для обложки лендинга</h2>
				<p class="s1">S1. Это первый в России образовательный проект,</p>
				<h2 class="h2">H2. Заголовок для обложки лендинга</h2>
				<p class="s2">S2. Это первый в России образовательный проект,</p>
				<h2 class="h2">H2. Заголовок для обложки лендинга</h2>
				<p class="s3">S3. Это первый в России образовательный проект,</p>
				<h2 class="h2">H2. Заголовок для обложки лендинга</h2>
				<p>P. Это первый в России образовательный проект,</p>
			</div>
		</div>
		<div class="frow">
			<div class="col">
				<h2 class="h3">H3. Заголовок для обложки лендинга</h2>
				<p class="s0">S0. Это первый в России образовательный проект,</p>
				<h2 class="h3">H3. Заголовок для обложки лендинга</h2>
				<p class="s1">S1. Это первый в России образовательный проект,</p>
				<h2 class="h3">H3. Заголовок для обложки лендинга</h2>
				<p class="s2">S2. Это первый в России образовательный проект,</p>
				<h2 class="h3">H3. Заголовок для обложки лендинга</h2>
				<p class="s3">S3. Это первый в России образовательный проект,</p>
				<h2 class="h3">H3. Заголовок для обложки лендинга</h2>
				<p>P. Это первый в России образовательный проект,</p>
			</div>
			<div class="col">
				<h2 class="h4">H4. Заголовок для обложки лендинга</h2>
				<p class="s0">S0. Это первый в России образовательный проект,</p>
				<h2 class="h4">H4. Заголовок для обложки лендинга</h2>
				<p class="s1">S1. Это первый в России образовательный проект,</p>
				<h2 class="h4">H4. Заголовок для обложки лендинга</h2>
				<p class="s2">S2. Это первый в России образовательный проект,</p>
				<h2 class="h4">H4. Заголовок для обложки лендинга</h2>
				<p class="s3">S3. Это первый в России образовательный проект,</p>
				<h2 class="h4">H4. Заголовок для обложки лендинга</h2>
				<p>P. Это первый в России образовательный проект,</p>
			</div>
			<div class="col">
				<h3 class="h5">H5. Заголовок для обложки лендинга</h3>
				<p class="s0">S0. Это первый в России образовательный проект,</p>
				<h3 class="h5">H5. Заголовок для обложки лендинга</h3>
				<p class="s1">S1. Это первый в России образовательный проект,</p>
				<h3 class="h5">H5. Заголовок для обложки лендинга</h3>
				<p class="s2">S2. Это первый в России образовательный проект,</p>
				<h3 class="h5">H5. Заголовок для обложки лендинга</h3>
				<p class="s3">S3. Это первый в России образовательный проект,</p>
				<h3 class="h5">H5. Заголовок для обложки лендинга</h3>
				<p>P. Это первый в России образовательный проект,</p>
			</div>
			<div class="col">
				<h6 class="h6">H6. Заголовок для обложки лендинга</h6>
				<p class="s0">S0. Это первый в России образовательный проект,</p>
				<h6 class="h6">H6. Заголовок для обложки лендинга</h6>
				<p class="s1">S1. Это первый в России образовательный проект,</p>
				<h6 class="h6">H6. Заголовок для обложки лендинга</h6>
				<p class="s2">S2. Это первый в России образовательный проект,</p>
				<h6 class="h6">H6. Заголовок для обложки лендинга</h6>
				<p class="s3">S3. Это первый в России образовательный проект,</p>
				<h6 class="h6">H6. Заголовок для обложки лендинга</h6>
				<p>P. Это первый в России образовательный проект,</p>
			</div>
		</div>
		<div class="frow">
			<div class="col">
				<p class="s0">S0. Заголовок для обложки лендинга</p>
				<h2 class="h0">H0. Это первый в России образовательный проект,</h2>
				<p class="s0">S0. Заголовок для обложки лендинга</p>
				<h2 class="h1">H1. Это первый в России образовательный проект,</h2>
				<p class="s0">S0. Заголовок для обложки лендинга</p>
				<h2 class="h2">H2. Это первый в России образовательный проект,</h2>
				<p class="s0">S0. Заголовок для обложки лендинга</p>
				<h2 class="h3">H3. Это первый в России образовательный проект,</h2>
				<p class="s0">S0. Заголовок для обложки лендинга</p>
				<h2 class="h4">H4. Это первый в России образовательный проект,</h2>
				<p class="s0">S0. Заголовок для обложки лендинга</p>
				<h2 class="h5">H5. Это первый в России образовательный проект,</h2>
				<p class="s0">S0. Заголовок для обложки лендинга</p>
				<h2 class="h6">H6. Это первый в России образовательный проект,</h2>
				<p class="s0">S0. Заголовок для обложки лендинга</p>
				<p>P. Это первый в России образовательный проект,</p>
			</div>
			<div class="col">
				<div class="s1">S1. Заголовок для обложки лендинга</div>
				<div class="h0">H0. Это первый в России образовательный проект,</div>
				<div class="s1">S1. Заголовок для обложки лендинга</div>
				<div class="h1">H1. Это первый в России образовательный проект,</div>
				<div class="s1">S1. Заголовок для обложки лендинга</div>
				<div class="h2">H2. Это первый в России образовательный проект,</div>
				<div class="s1">S1. Заголовок для обложки лендинга</div>
				<div class="h3">H3. Это первый в России образовательный проект,</div>
				<div class="s1">S1. Заголовок для обложки лендинга</div>
				<div class="h4">H4. Это первый в России образовательный проект,</div>
				<div class="s1">S1. Заголовок для обложки лендинга</div>
				<div class="h5">H5. Это первый в России образовательный проект,</div>
				<div class="s1">S1. Заголовок для обложки лендинга</div>
				<div class="h6">H6. Это первый в России образовательный проект,</div>
				<div class="s1">S1. Заголовок для обложки лендинга</div>
				<div>P. Это первый в России образовательный проект,</div>
			</div>
		</div>
		<div class="frow">
			<div class="col">
				<div class="s2">S2. Заголовок для обложки лендинга</div>
				<div class="h0">H0. Это первый в России образовательный проект,</div>
				<div class="s2">S2. Заголовок для обложки лендинга</div>
				<div class="h1">H1. Это первый в России образовательный проект,</div>
				<div class="s2">S2. Заголовок для обложки лендинга</div>
				<div class="h2">H2. Это первый в России образовательный проект,</div>
				<div class="s2">S2. Заголовок для обложки лендинга</div>
				<div class="h3">H3. Это первый в России образовательный проект,</div>
				<div class="s2">S2. Заголовок для обложки лендинга</div>
				<div class="h4">H4. Это первый в России образовательный проект,</div>
				<div class="s2">S2. Заголовок для обложки лендинга</div>
				<div class="h5">H5. Это первый в России образовательный проект,</div>
				<div class="s2">S2. Заголовок для обложки лендинга</div>
				<div class="h6">H6. Это первый в России образовательный проект,</div>
				<div class="s2">S2. Заголовок для обложки лендинга</div>
				<div>P. Это первый в России образовательный проект,</div>
			</div>
			<div class="col">
				<div class="s3">S3. Заголовок для обложки лендинга</div>
				<div class="h0">H0. Это первый в России образовательный проект,</div>
				<div class="s3">S3. Заголовок для обложки лендинга</div>
				<div class="h1">H1. Это первый в России образовательный проект,</div>
				<div class="s3">S3. Заголовок для обложки лендинга</div>
				<div class="h2">H2. Это первый в России образовательный проект,</div>
				<div class="s3">S3. Заголовок для обложки лендинга</div>
				<div class="h3">H3. Это первый в России образовательный проект,</div>
				<div class="s3">S3. Заголовок для обложки лендинга</div>
				<div class="h4">H4. Это первый в России образовательный проект,</div>
				<div class="s3">S3. Заголовок для обложки лендинга</div>
				<div class="h5">H5. Это первый в России образовательный проект,</div>
				<div class="s3">S3. Заголовок для обложки лендинга</div>
				<div class="h6">H6. Это первый в России образовательный проект,</div>
				<div class="s3">S3. Заголовок для обложки лендинга</div>
				<div>P. Это первый в России образовательный проект,</div>
			</div>
		</div>
		<section class="frow">
			<div class="col">
				<div class="h0">Заголовок для обложки лендинга</div>
				<div class="h0">Заголовок для обложки лендинга</div>
				<div class="h1">Заголовок для обложки лендинга</div>
				<div class="h0">Заголовок для обложки лендинга</div>
				<div class="h2">Заголовок для обложки лендинга</div>
				<div class="h0">Заголовок для обложки лендинга</div>
				<div class="h3">Заголовок для обложки лендинга</div>
				<div class="h0">Заголовок для обложки лендинга</div>
				<div class="h4">Заголовок для обложки лендинга</div>
				<div class="h0">Заголовок для обложки лендинга</div>
				<div class="h5">Заголовок для обложки лендинга</div>
				<div class="h0">Заголовок для обложки лендинга</div>
				<div class="h6">Заголовок для обложки лендинга</div>
			</div>
		</section>
		<section class="frow">
			<div class="col">
				<h1 class="h0">H0. Заголовок для обложки лендинга. В&nbsp;интерфейсах не использовать никогда.</h1>
				<p class="s0">S0. Это первый в России образовательный проект, который дает всесторонние знания о закупочной деятельности для коммерческих организаций, государственных и муниципальных учреждений. Занятия ведут профессора МГУ и специалисты B2B-Center. Слушатели получают теоретическую подготовку и подкрепляют полученные знания на практике, проводя процедуры на электронной торговой</p>
				<h2 class="h1">H1. Заголовок первого уровня для лендингов и статей. В интерфейсах не&nbsp;использовать никогда. Совсем никогда и нигде никогда.</h2>
				<p class="s1">S1. Это первый в России образовательный проект, который дает всесторонние знания о закупочной деятельности для коммерческих организаций, государственных и муниципальных учреждений. Занятия ведут профессора МГУ и специалисты B2B-Center. Слушатели получают теоретическую подготовку и подкрепляют полученные знания на практике, проводя процедуры на электронной торговой</p>
			</div>
		</section>
		<section class="frow pt-25">
			<div class="col">
				<h2 class="h2">H2. Совместная образовательная программа B2B-Center и МГУ для&nbsp;закупщиков и поставщиков</h2>
				<p class="s2">S2. Это первый в России образовательный проект, который дает всесторонние знания о закупочной деятельности для коммерческих организаций, государственных и муниципальных учреждений. Занятия ведут профессора МГУ и специалисты<br>B2B-Center. Слушатели получают теоретическую подготовку и подкрепляют полученные знания на практике, проводя процедуры на электронной торговой
				</p>
			</div>
			<div class="col">
				<h2 class="h2">H2. Совместная образовательная программа B2B-Center и МГУ для&nbsp;закупщиков и поставщиков</h2>
				<p class="s2">S2. Это первый в России образовательный проект, который дает всесторонние знания о закупочной деятельности для коммерческих организаций, государственных и муниципальных учреждений. Занятия ведут профессора МГУ и специалисты<br>B2B-Center. Слушатели получают теоретическую подготовку и подкрепляют полученные знания на практике, проводя процедуры на электронной торговой
				</p>
			</div>
		</section>
		<section class="frow pt-18">
			<div class="col">
				<h3 class="h3">H3. Это максимальный размер заголовка для интерфейса площадки. Максимальный размер заголовка однозначно</h3>
				<p class="s3">
					S3. Это первый в России образовательный проект, который дает всесторонние знания о закупочной деятельности для коммерческих организаций, государственных и муниципальных учреждений.<br>Занятия ведут профессора МГУ и специалисты B2B-Center. Слушатели получают теоретическую подготовку и подкрепляют полученные знания на практике, проводя процедуры на электронной 
торговой Площадке. Занятия ведут профессора МГУ и специалисты B2B-Center.
				</p>
			</div>
			<div class="col">
				<h3 class="h3">H3. Это максимальный размер заголовка для интерфейса площадки. Максимальный размер заголовка однозначно</h3>
				<p class="s3">
					S3. Это первый в России образовательный проект, который дает всесторонние знания о закупочной деятельности для коммерческих организаций, государственных и муниципальных учреждений. 
Занятия ведут профессора МГУ и специалисты B2B-Center. Слушатели получают теоретическую подготовку и подкрепляют полученные знания на практике, проводя процедуры на электронной<br>
торговой Площадке. Занятия ведут профессора МГУ и специалисты B2B-Center.
				</p>
			</div>
			<div class="col">
				<h3 class="h3">H3. Это максимальный размер заголовка для интерфейса площадки. Максимальный размер заголовка однозначно</h3>
				<p class="s3">
					Это первый в России образовательный проект, который дает всесторонние знания о закупочной деятельности для коммерческих организаций, государственных и муниципальных учреждений. 
Занятия ведут профессора МГУ и специалисты B2B-Center. Слушатели получают теоретическую подготовку и подкрепляют полученные знания на практике, проводя процедуры на электронной 
торговой Площадке. Занятия ведут профессора МГУ и специалисты B2B-Center.
				</p>
			</div>
		</section>
		<section class="frow pt1">
			<div class="col">
				<h4 class="h4">H4. Ольга Юрьевна Миронюк Преподаватели новых дисциплин нового тысячилетия новых дисциплин нового тысячилетия</h4>
				<p>
					Body. Заместитель проректора МГУ имени М. В. Ломоносова, начальник отдела планирования и организации закупок товаров, выполнения работ и оказания услуг для МГУ, директор Центра государственного заказа и корпоративного обучения ИППК МГУ Член рабочей группы экспертного совета по науке при Минобрнауки России, член рабочей группы Государственной Думы ФС РФ по закону о КС, член Партнерства профессионалов госзаказа, эксперт Минэкономразвития по вопросам образования в сфере закупок
				</p>
			</div>
			<div class="col">
				<h4 class="h4">H4. Ольга Юрьевна Миронюк Преподаватели новых дисциплин нового тысячилетия новых дисциплин нового тысячилетия</h4>
				<p>
					Body. Заместитель проректора МГУ имени М. В. Ломоносова, начальник отдела планирования и организации закупок товаров, выполнения работ и оказания услуг для МГУ, директор Центра государственного заказа и корпоративного обучения ИППК МГУ Член рабочей группы экспертного совета по науке при Минобрнауки России, член рабочей группы Государственной Думы ФС РФ по закону о КС, член Партнерства профессионалов госзаказа, эксперт Минэкономразвития по вопросам образования в сфере закупок
				</p>
			</div>
			<div class="col">
				<h4 class="h4">H4. Ольга Юрьевна Миронюк Преподаватели новых дисциплин нового тысячилетия новых дисциплин нового тысячилетия</h4>
				<p>
					Заместитель проректора МГУ имени М. В. Ломоносова, начальник отдела планирования и организации закупок товаров, выполнения работ и оказания услуг для МГУ, директор Центра государственного заказа и корпоративного обучения ИППК МГУ Член рабочей группы экспертного совета по науке при Минобрнауки России, член рабочей группы Государственной Думы ФС РФ по закону о КС, член Партнерства профессионалов госзаказа, эксперт Минэкономразвития по вопросам образования в сфере закупок
				</p>
			</div>
			<div class="col">
				<h4 class="h4">H4. Ольга Юрьевна Миронюк Преподаватели новых дисциплин нового тысячилетия новых дисциплин нового тысячилетия</h4>
				<p>
					Заместитель проректора МГУ имени М. В. Ломоносова, начальник отдела планирования и организации закупок товаров, выполнения работ и оказания услуг для МГУ, директор Центра государственного заказа и корпоративного обучения ИППК МГУ Член рабочей группы экспертного совета по науке при Минобрнауки России, член рабочей группы Государственной Думы ФС РФ по закону о КС, член Партнерства профессионалов госзаказа, эксперт Минэкономразвития по вопросам образования в сфере закупок
				</p>
			</div>
		</section>
		<section class="frow pt5">
			<div class="col">
				<h5 class="h5">H5. Организация доставки негабаритных п/прицепов по маршруту Челябинск — Санкт-Петербург</h5>
				<p class="small">
					Small. Заместитель проректора МГУ имени М. В. Ломоносова, начальник отдела планирования и организации закупок товаров, выполнения работ и оказания услуг для МГУ, директор Центра государственного заказа и корпоративного обучения
				</p>
				<p class="small">
					Член рабочей группы экспертного совета по науке при Минобрнауки России, член рабочей группы Государственной Думы ФС РФ по закону о КС, член Партнерства профессионалов госзаказа, эксперт Минэкономразвития по вопросам образования в сфере закупок
				</p>
			</div>
			<div class="col">
				<h5 class="h5">H5. Организация доставки негабаритных п/прицепов по маршруту Челябинск — Санкт-Петербург</h5>
				<p class="small">
					Small. Заместитель проректора МГУ имени М. В. Ломоносова, начальник отдела планирования и организации закупок товаров, выполнения работ и оказания услуг для МГУ, директор Центра государственного заказа и корпоративного обучения
				</p>
				<p class="small">
					Член рабочей группы экспертного совета по науке при Минобрнауки России, член рабочей группы Государственной Думы ФС РФ по закону о КС, член Партнерства профессионалов госзаказа, эксперт Минэкономразвития по вопросам образования в сфере закупок
				</p>
			</div>
			<div class="col">
				<h5 class="h5">H5. Организация доставки негабаритных п/прицепов по маршруту Челябинск — Санкт-Петербург</h5>
				<p class="small">
					Заместитель проректора МГУ имени М. В. Ломоносова, начальник отдела планирования и организации закупок товаров, выполнения работ и оказания услуг для МГУ, директор Центра государственного заказа и корпоративного обучения
				</p>
				<p class="small">
					Член рабочей группы экспертного совета по науке при Минобрнауки России, член рабочей группы Государственной Думы ФС РФ по закону о КС, член Партнерства профессионалов госзаказа, эксперт Минэкономразвития по вопросам образования в сфере закупок
				</p>
			</div>
			<div class="col">
				<h5 class="h5">H5. Организация доставки негабаритных п/прицепов по маршруту Челябинск — Санкт-Петербург</h5>
				<p class="small">
					Заместитель проректора МГУ имени М. В. Ломоносова, начальник отдела планирования и организации закупок товаров, выполнения работ и оказания услуг для МГУ, директор Центра государственного заказа и корпоративного обучения
				</p>
				<p class="small">
					Член рабочей группы экспертного совета по науке при Минобрнауки России, член рабочей группы Государственной Думы ФС РФ по закону о КС, член Партнерства профессионалов госзаказа, эксперт Минэкономразвития по вопросам образования в сфере закупок
				</p>
			</div>
			<div class="col">
				<h5 class="h5">H5. Организация доставки негабаритных п/прицепов по маршруту Челябинск — Санкт-Петербург</h5>
				<p class="small">
					Заместитель проректора МГУ имени М. В. Ломоносова, начальник отдела планирования и организации закупок товаров, выполнения работ и оказания услуг для МГУ, директор Центра государственного заказа и корпоративного обучения
				</p>
				<p class="small">
					Член рабочей группы экспертного совета по науке при Минобрнауки России, член рабочей группы Государственной Думы ФС РФ по закону о КС, член Партнерства профессионалов госзаказа, эксперт Минэкономразвития по вопросам образования в сфере закупок
				</p>
			</div>
			<div class="col">
				<h5 class="h5">H5. Организация доставки негабаритных п/прицепов по маршруту Челябинск — Санкт-Петербург</h5>
				<p class="small">
					Заместитель проректора МГУ имени М. В. Ломоносова, начальник отдела планирования и организации закупок товаров, выполнения работ и оказания услуг для МГУ, директор Центра государственного заказа и корпоративного обучения
				</p>
				<p class="small">
					Член рабочей группы экспертного совета по науке при Минобрнауки России, член рабочей группы Государственной Думы ФС РФ по закону о КС, член Партнерства профессионалов госзаказа, эксперт Минэкономразвития по вопросам образования в сфере закупок
				</p>
			</div>
		</section>
		<section class="frow">
			<div class="col6">
				<p>
					В этом случае вполне возможно что стоит подойти к решению разработав гибридное мобильное приложение. Гибридными называются приложения, которые разрабатываются при помощи HTML, CS и JavaScript – то есть теми же технологиями, что и интернет сайты, а для того чтобы они могли быть установлены на смартфоне код “оборачивается” в нативную оболочку. Для этой процедуры существует несколько как платных, так и бесплатных решений, пожалуй самые распространенные это PhoneGap и Cordova.
				</p>
				<h1 class="h0">
					Заголовок для обложки лендинга
				</h1>
				<p class="s0">
					Таким образом, постоянное информационно-техническое обеспечение нашей деятельности требует определения и уточнения новых предложений.
				</p>
				<p>
					Соображения высшего порядка, а также начало повседневной работы по формированию позиции требует определения и уточнения форм воздействия? Практический опыт показывает, что начало повседневной работы по формированию позиции требует от нас системного анализа системы обучения кадров, соответствующей насущным потребностям. Соображения высшего порядка, а также реализация намеченного плана развития играет важную роль в формировании модели развития! Повседневная практика показывает, что постоянное информационно-техническое обеспечение нашей деятельности позволяет выполнить важнейшие задания по разработке соответствующих условий активизации.
				</p>
				<h2 class="h1">
					Начало повседневной работы
				</h2>
				<p>
					Задача организации, в особенности же реализация намеченного плана развития создаёт предпосылки качественно новых шагов для форм воздействия. Не следует, однако, забывать о том, что рамки и место обучения кадров играет важную роль в формировании экономической целесообразности принимаемых решений. Разнообразный и богатый опыт новая модель организационной деятельности играет важную роль в формировании ключевых компонентов планируемого обновления. Дорогие друзья, рамки и место обучения кадров позволяет выполнить важнейшие задания по разработке ключевых компонентов планируемого обновления.
				</p>
				<p>
					Практический опыт показывает, что повышение уровня гражданского сознания позволяет оценить значение направлений прогрессивного развития. Повседневная практика показывает, что реализация намеченного плана развития способствует повышению актуальности ключевых компонентов планируемого обновления!
				</p>
				<h3 class="h2">
					Развитие различных форм деятельности
				</h3>
				<p>
					Задача организации, в особенности же социально-экономическое развитие позволяет оценить значение новых предложений. Равным образом рамки и место обучения кадров позволяет выполнить важнейшие задания по разработке системы масштабного изменения ряда параметров? Равным образом постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу специалистов участие в формировании всесторонне сбалансированных нововведений.
				</p>
				<h4 class="h4">
					Инструменты для создания приложения
				</h4>
				<p>
					Таким образом входной порог на рынок мобильных приложений значительно снизился. Можно использовать широко известные инструменты для создания приложения, при этом не погружаясь в изучения новых языков. Помимо этого гибридная разработка позволяет создавать приложение сразу под обе платформы: Android и iOS. Можно и под Windows, но я не изучал этот вопрос. Стоит отметить, что сам процесс компиляции включает все те же подводные камни. Так например, для создания приложения для iOS все так же требуется компьютер с этой операционкой.
				</p>
				<p>
					От себя хочу отметить, что я вижу будущее за гибридными приложениями. Мобильные браузеры развиваются и уже сейчас показывают прекрасную работоспособность. Со временем это будет только улучшаться, в конце концов смартфоны и планшеты становятся основным устройством для доступа к интернет ресурсам. ВостребованнЗачастую, при разработке веб приложений возникает необходимость заблокировать выделение текста на экране. Дело в том, что браузер в любом случае пытается относиться к полученному html как к обычной странице а это значит, что любой текст может быть выделен. Это идет в разрез с задачами приложения и тем, как оно должно вести себя.
				</p>
				<h5 class="h5">
					Использование картинок в мобильных веб приложениях
				</h5>
				<p>
					Практика показала, что использование картинок в мобильных веб приложениях чревато неожиданными проблемами. Дело прежде всего в том, что мобильные смартфоны имеют настолько разные экраны, что просто хоть стой хоть падай. Разрешение варьируется от 320 до 1300 пикселей по горизонтали и это порой не предел. Из этого вытекают сложности с подбором картинок. Слишком маленькие картинки на больших экранах будут ужасно смотреться, а слишком большие будут “кушать” лишний траффик.
				</p>
				<h6 class="h6">
					Векторные фигуры
				</h6>
				<p>
					Однако, насколько, показала практика простые векторные фигуры рендеряться без проблем. То есть если не экспериментировать с анимацией, а просто работать с графикой для интерфейсов, то это может быть прекрасной заменой для картинок.
				</p>
				<p>
					В одном из своих последних проектов была задача разработать новый интерфейс для кассы одной из сетей быстрого питания. Поскольку сеть работала с ресторанными бизнесами разного уровня, то требовался именно веб интерфейс. Клиенты должны были иметь возможность как заходить в него с компьютера, так и с планшета.
				</p>
			</div>
		</section>
	</div>
</div>
              
            
!

CSS

              
                // Основные переменные проекта
  @path-img: '/images/v2014';
  @base-space-x: 16px;

// Типографика
  @base-font-family: Arial, Helvetica, sans-serif;
  @base-font-size: 14px;
  @base-line-height: 1.429em;
  @base-letter-spacing: 0;
  @small-font-size: 0.857em;
  @small-line-height: 1.6rem;

// Цвета
  @clr-txt: #000;                  // Основной текст, текст контролов, кнопок
  @clr-muted: #bebebe;             // Подсказки в полях (placeholder)
  @clr-muted-light: #e5e5e5;       // Формы, неактивные кнопки
  @clr-primary: #48a6e4;           // Главные-активные кнопки
  @clr-primary-light: #7acaff;     // Главные кнопки
  @clr-primary-dark: #2283c3;      // Кликабельные элементы: ссылки, иконки
  @clr-accent: #e4002b;            // Кликабельные элементы при наведении, важные элементы
  @clr-accent-light: #ec9191;      // Кликабельные элементы при наведении на черном фоне
  @clr-accent-dark: #ba0016;       // Кликабельные важные элементы
  @clr-default: #a3c0c0;           // Дефолтные кнопки при наведении: граница
  @clr-default-light: #e4f2fb;     // Дефолтные кнопки при нажатии

// Цвета состояний
  @clr-success-state: #59b122;
  @clr-warning-state: #fdc419;
  @clr-error-state: #fd7272;
  @clr-waiting-state: #94a5a5;

// Система отступов
@spacer-base: 4px;
@spacers:
  @spacer-base,
  @spacer-base * 2,
  @spacer-base * 3,
  @spacer-base * 4,
  @spacer-base * 5,
  @spacer-base * 6,
  @spacer-base * 8,
  @spacer-base * 10;

// Глобальные z-index
  @zindex-page: 0;
  @zindex-footer: 1000;
  @zindex-main: 2000;
  @zindex-header: 3000;
  @zindex-tips: 4000;
  @zindex-notice: 5000;
  @zindex-overlay: 9000;
  @zindex-modal: 10000;

.type_primary {
  font-family: Circe, Helvetica, sans-serif;

  // Headers
  @h0-margin: @h0-primary-margin;
  @h1-margin: @h1-primary-margin;
  @h2-margin: @h2-primary-margin;
  @h3-margin: @h3-primary-margin;
  @h4-margin: @h4-primary-margin;
  @h5-margin: @h5-primary-margin;

  // SubHeaders
  @s0-margin: @s0-primary-margin;
  @s1-margin: @s1-primary-margin;
  @s2-margin: @s2-primary-margin;
  @s3-margin: @s3-primary-margin;

  form,
  .form-grp {
    font-family: @base-font-family;
    font-size: @base-font-size;
    line-height: @base-line-height;
  }
}

// Основные элементы
@page-bg-transition: background-color 0.2s ease-out, color 0.2s ease-out;
@page-width: 100%;
@page-maxWidth: auto;
@page-minWidth: 1240px;
@page-zindex: @zindex-page;

@page-main-paddingTop: 70px;

@layout-marginTop: auto;
@layout-marginBottom: 0;
@layout-paddingTop: auto;
@layout-paddingBottom: 50px;

@inner-maxWidth: 1680px;
@inner-padding: 0 3%;
@inner-max-padding: 0 50px;

@content-padding: 0;
@above-content-padding: 69px; // Сделано с учетом высоты .header-panel
@container-margin: auto;

// Для макетов с фиксированной колонкой
@fixCol-width: 360px;
@fixCol-padding: 40px;

// Buttons
@btn-dis-bg-clr: @clr-muted-light;
@btn-dis-clr: #9b9b9b;
@btn-bg-clr: #f0f0f0;
@btn-border: 1px solid @clr-muted;
@btn-clr: @clr-txt;
@btn-default-bg-clr: transparent;
@btn-default-border-clr: @clr-muted;
@btn-default-clr: @clr-txt;
@btn-default-hvr-clr: @clr-txt;
@btn-default-hvr-bg-clr: transparent;
@btn-default-act-bg-clr: @clr-default-light;
@btn-default-hvr-border-clr: @clr-primary;
@btn-primary-bg-clr: @clr-primary-light;
@btn-primary-border-clr: transparent;
@btn-primary-clr: @clr-txt;
@btn-primary-act-bg-clr: @clr-primary;
@btn-primary-act-border-clr: @clr-primary;
@btn-primary-hvr-bg-clr: @clr-primary-light;
@btn-primary-hvr-border-clr: @clr-primary;
@btn-promo-bg-clr: @clr-accent;
@btn-promo-border-clr: transparent;
@btn-promo-clr: #ffffff;
@btn-promo-act-bg-clr: @clr-accent-dark;
@btn-promo-act-border-clr: @clr-accent-dark;
@btn-promo-hvr-bg-clr: @clr-accent;
@btn-promo-hvr-border-clr: @clr-accent-dark;

@btn-link-clr: @clr-primary-dark;
@btn-link-hvr-clr: @clr-accent;

@btn-accent-bg-clr: transparent;
@btn-accent-border-clr: @clr-primary-light;
@btn-accent-clr: @clr-txt;
@btn-accent-hvr-bg-color: transparent;
@btn-accent-hvr-border-clr: @clr-primary;
@btn-accent-act-bg-clr: lighten(@btn-accent-hvr-border-clr, 35);
@btn-accent-act-border-clr: @clr-primary;

// Forms
@input-dis-clr: #c7c7c7;
@input-dis-bg: #f1f1f1;

@form-ctrl-clr: @clr-txt;
@form-ctrl-shdw: none;
@form-ctrl-pholder-clr: @clr-muted;
@form-ctrl-border: 1px solid @clr-muted;
@form-ctrl-error-shadow: none;
@form-ctrl-error-border-clr: @clr-accent;
@form-ctrl-fcs-shdw: none;
@form-ctrl-fcs-border: 1px solid #999;
@form-ctrl-hvr-border: 1px solid #999;

// Icons
@ico-svg-clr: @clr-txt;
@a-ico-svg-clr: @clr-primary-dark;
@a-hvr-ico-svg-clr: @clr-accent;

// Layout
@page-bg: #fff;
@page-bg-light: #F6F5F3;
@page-bg-dark: #53514D;
@layout-bg: transparent;
@layout-border: none;
@layout-boxShadow: none;

// Misc
@dashed-box-border: 1px dashed #dadada;
@circle-bg: transparent;
@circle-border: 1px dashed #ccc;
@neutral-bg: #f5f5f5;
@neutral-bg-border: none;
@accent-bg: #f6f6db;
@accent-bg-border: none;
@primary-bg: #ebebeb;
@primary-bg-border: none;
@pattern-bg: url("@{path-img}/pattern-bg.png") repeat center;
@pattern-bg-border: none;
@dark-bg: #33495e;
@dark-bg-border: none;
@dark-clr: #E8EDF3;
@divider-bg: #bebebe;

// Tables
@tr-active-bg:  #eaeff6;
@tr-checked-bg: #F6F6DB;
@tr-hvr-bg: #f2f0eb;
@tcol-hvr-bg: #e3e1dc;
@th-border-clr: #d6d6d6;
@td-border-top: none;
@tfoot-border-color: #d6d6d6;
@even-td-bg: #fff;
@odd-td-bg: #fafafa;

// Type
@body-clr: @clr-txt;
@heading-clr: @clr-txt;
@a-clr: @clr-primary-dark;
@a-hvr-clr: @clr-accent;
@a-vis-clr: #5c2d91;

@muted-clr: @clr-muted;
@p-margin: 0.8rem 0;
@ul-margin: @p-margin;
@ul-padding: 0 0 0 2.4rem;
@ol-padding: @ul-padding;
@li-margin: 0.8rem 0 0;
@ul-ul-margin: 0 0 0 20px;
@ul-separated-clr: @clr-muted;
@dl-margin: 0.7142857142857142em 0;
@dt-font-weight: normal;
@heading-font-weight: normal;
@heading-letter-spacing: .12px;

// Headers
@h0-font-size: 4.8rem;
@h0-line-height: 6.4rem;
@h0-margin: 2.4rem 0;
@h0-primary-margin: 0.8rem 0;

@h1-font-size: 3.2rem;
@h1-line-height: 4rem;
@h1-margin: 2.4rem 0 1.2rem;
@h1-primary-margin: 4rem 0 0.8rem;

@h2-font-size: 2.8rem;
@h2-line-height: 3.2rem;
@h2-margin: 2.8rem 0 0.8rem;
@h2-primary-margin: 2.8rem 0 1.2rem;

@h3-font-size: 2.4rem;
@h3-line-height: 3.2rem;
@h3-margin: 2rem 0 0.8rem;
@h3-primary-margin: 2.8rem 0 0.4rem;

@h4-font-size: 1.8rem;
@h4-line-height: 2.4rem;
@h4-font-weight: bold;
@h4-margin: 2rem 0 0.8rem;
@h4-primary-margin: 3.2rem 0 0.8rem;

@h5-font-size: 1.4rem;
@h5-line-height: 2rem;
@h5-font-weight: bold;
@h5-margin: 1.2rem 0 0.4rem;
@h5-primary-margin: 5.6rem 0 0.4rem;

@h6-font-size: 1.4rem;
@h6-line-height: 2rem;
@h6-font-weight: normal;
@h6-text-transform: uppercase;
@h6-letter-spacing: 0.2rem;
@h6-margin: 1.2rem 0 0.4rem;


// SubHeaders
@s0-font-size: 2.4rem;
@s0-line-height: 3.2rem;
@s0-margin: 2.4rem 0 0;
@s0-primary-margin: 0.8rem 0;

@s1-font-size: 2rem;
@s1-line-height: 2.8rem;
@s1-margin: 1.2rem 0;
@s1-primary-margin: 0.8rem 0;

@s2-font-size: 1.8rem;
@s2-line-height: 2.4rem;
@s2-margin: 0.8rem 0;
@s2-primary-margin: 1.2rem 0;

@s3-font-size: 1.6rem;
@s3-line-height: 2.4rem;
@s3-margin: 0.8rem 0;
@s3-primary-margin: 0.4rem 0;

@lead-font-size: 2rem;
@lead-line-height: 2.4rem;
@lead-margin: 0 0 1.2rem;

// Utils
@caps-font-size: 1.2rem;
@caps-letter-spacing: 0.1rem;
@caps-line-height: 1.2rem;
@caps-inline-font-size: 0.857em;

// Typography lists
@headerIntervals: 6.4rem, 4rem, 3.2rem, 3.2rem, 2.8rem, 2.4rem, 2.4rem;
@subheaderIntervals: 6.4rem, 6rem, 4.8rem, 4rem;
@paragraphIntervals: 6.8rem, 3.6rem, 2.8rem, 2rem, 1.6rem, .8rem;
@headerFontSizes: @h0-font-size, @h1-font-size, @h2-font-size, @h3-font-size, @h4-font-size, @h5-font-size, @h6-font-size;
@headerLineHeights: @h0-line-height, @h1-line-height, @h2-line-height, @h3-line-height, @h4-line-height, @h5-line-height, @h6-line-height;
@subheaderFontSizes: @s0-font-size, @s1-font-size, @s2-font-size, @s3-font-size;
@subheaderLineHeights: @s0-line-height, @s1-line-height, @s2-line-height, @s3-line-height;

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background-color: @page-bg;
  font-family: Arial, sans-serif;

  &.dark {
    background-color: @page-bg-dark !important;
  }

  &.light {
    background-color: @page-bg-light;
  }
}
#page {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: @page-maxWidth;
  min-width: @page-minWidth;
  position: relative;
  width: @page-width;
  z-index: @page-zindex;
  display: flex;
  flex-direction: column;
}
.page-main, // @TODO необходима замена класса main-layout на page-main
.main-layout {
  background: @layout-bg;
  border: @layout-border;
  margin-top: @layout-marginTop;
  margin-bottom: @layout-marginBottom;
  padding-top: @page-main-paddingTop;
  padding-bottom: @layout-paddingBottom;
  width: 100%;
  box-shadow: @layout-boxShadow;
  flex: 1 0 auto;
}

.tilda { // Стили для страниц с тильды, чтобы некоторые наши стандартные стили не мешали тильдовым, крайне своеобычным
  &_page_outer {
    min-width: auto !important;
  }

  &_page {
    padding-top: 0;
    .loading {background-image: none;}
  }
}

#content {
  padding: @content-padding;
}

#above-content {
  padding-top: @above-content-padding;
}

.page-main {
  position: relative;
  z-index: @zindex-main;
}

// Контент
.wrapper {
  width: 100%;
}

.inner {
  max-width: @inner-maxWidth;
  margin: 0 auto;
  padding: @inner-padding;
  position: relative;

  .lt-ie9 & {
    max-width: 1346px;
  }
  @media (min-width: @inner-maxWidth) {
    padding: @inner-max-padding;
  }
}

// Контейнер для разделения частей интерфейса в блоке inner
.container {
  margin: @container-margin;
  position: relative;
}

// Генерация заголовков, подзаголовков и параграфов
.generateTypography(@selector; @intervals; @fontSizes; @lineHeights; @cnt: 0) when (@cnt < length(@intervals)) {
  @interval: extract(@intervals, @cnt + 1);
  @fontSize: extract(@fontSizes, @cnt + 1);
  @lineHeight: extract(@lineHeights, @cnt + 1);

  // Генерация подзаголовков .s0, .s1 и т.д.
  & when (@selector = s) {
    .@{selector}@{cnt} {
      font-size: @fontSize;
      line-height: @lineHeight;

      .generateTypographySibling(@selector: h; @interval; @fontSize; @lineHeight; @headerFontSizes);
      .generateTypographySibling(@selector: s; @interval; @fontSize; @lineHeight; @subheaderFontSizes);
      .generateTypographySibling(@selector: p; @interval; @fontSize; @lineHeight; @base-font-size);
    }
  }

  // Генерация класса .h0
  & when (@selector = h) and (@cnt = 0)  {
    .@{selector}@{cnt} {
      font-size: @fontSize;
      line-height: @lineHeight;

      .generateTypographySibling(@selector: h; @interval; @fontSize; @lineHeight; @headerFontSizes);
      .generateTypographySibling(@selector: s; @interval; @fontSize; @lineHeight; @subheaderFontSizes);
      .generateTypographySibling(@selector: p; @interval; @fontSize; @lineHeight; @base-font-size);
    }
  }

  // Генерация стилей для селекторов h1 - h6 и таких же классов .h1 - .h6
  & when (@selector = h) and (@cnt > 0) {
    @{selector}@{cnt},
    .@{selector}@{cnt} {
      font-size: @fontSize;
      line-height: @lineHeight;

      .generateTypographySibling(@selector: h; @interval; @fontSize; @lineHeight; @headerFontSizes);
      .generateTypographySibling(@selector: s; @interval; @fontSize; @lineHeight; @subheaderFontSizes);
      .generateTypographySibling(@selector: p; @interval; @fontSize; @lineHeight; @base-font-size);
    }
  }

  .generateTypography(@selector; @intervals; @fontSizes; @lineHeights; @cnt + 1);
}

// Генерация сестринских классов
.generateTypographySibling(@selector; @interval; @fontSize; @lineHeight; @fontSizes; @cnt: 0) when (@cnt < length(@fontSizes)) {
  @siblingFontSize: extract(@fontSizes, @cnt + 1);

  & when (@selector = s) {
    + .@{selector}@{cnt} {
      .setTopMargin(@interval; @fontSize; @lineHeight; @siblingFontSize);
    }
  }

  & when (@selector = h) and (@cnt = 0) {
      + .@{selector}@{cnt} {
        .setTopMargin(@interval; @fontSize; @lineHeight; @siblingFontSize);
      }
    }

  & when (@selector = h) and (@cnt > 0) {
    + @{selector}@{cnt},
    + .@{selector}@{cnt} {
      .setTopMargin(@interval; @fontSize; @lineHeight; @siblingFontSize);
    }
  }

  & when (@selector = p) {
    + @{selector} {
      .setTopMargin(@interval; @fontSize; @lineHeight; @siblingFontSize);
    }
  }

  .generateTypographySibling(@selector; @interval; @fontSize; @lineHeight; @fontSizes; @cnt + 1);
}

// Генерация заголовков следующих после параграфа
.generateParagraphSibling(@selector; @intervals; @cnt: 0) when (@cnt < length(@intervals)) {

  & when (@cnt = 0) {
    p + .@{selector}@{cnt} {
      margin-top: extract(@intervals, @cnt + 1);
    }
  }

  & when (@cnt > 0) {
    p + @{selector}@{cnt},
    p + .@{selector}@{cnt} {
      margin-top: extract(@intervals, @cnt + 1);
    }
  }

  .generateParagraphSibling(@selector; @intervals; @cnt + 1);
}

// Задание верхнего внешнего отступа
.setTopMargin(@interval; @fontSize1; @lineHeight1; @fontSize2) {
  & when (@lineHeight1 = normal) or (@lineHeight1 = initial) {
    @lineHeight1: 2rem;

    @marginTop: @interval - (@lineHeight1 - @fontSize1 + @fontSize2);

    & when (@marginTop > 0) and (not (@marginTop <= 0)) {
      margin-top: @marginTop;
    }
  }

  & when (get-unit(@lineHeight1) = rem) or (get-unit(@lineHeight1) = em) or (isnumber(@lineHeight1)) {
    @marginTop: @interval - (@lineHeight1 - @fontSize1 + @fontSize2);

    & when (@marginTop > 0) and (not (@marginTop <= 0)) {
      margin-top: @marginTop;
    }
  }
}

//	Базовые стили заголовков
.h0 {
  small {
    color: gray;
    font-size: 70%;
    line-height: 1;
  }
}

h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: @heading-clr;
  font-weight: @heading-font-weight;
  letter-spacing: @heading-letter-spacing;
  position: relative;
  margin: 0;
}

h4, .h4 {
  font-weight: @h4-font-weight;
}

h5, .h5 {
  font-weight: @h5-font-weight;
}

h6, .h6 {
  font-weight: @h6-font-weight;
  text-transform: @h6-text-transform;
  letter-spacing: @h6-letter-spacing;
}

// Генерация классов заголовков и подзаголовков
.generateTypography(@selector: h; @headerIntervals; @headerFontSizes; @headerLineHeights);
.generateTypography(@selector: s; @subheaderIntervals; @subheaderFontSizes; @subheaderLineHeights);
.generateParagraphSibling(@selector: h; @paragraphIntervals);

.lead {
  font-size: @lead-font-size;
  line-height: @lead-line-height;
  margin: 0;
}

h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6,
.s1, .s2, .s3, .lead,
p, ul, ol, dl {
  &:first-child {
    margin-top: 0;
  }
}

// @depricated
.artificial {
  font: normal 15px/1.6em "ALS Mirta";
}

//	Headers
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: @heading-clr;
  font-weight: @heading-font-weight;
  letter-spacing: @heading-letter-spacing;
  position: relative;

  small {
    color: @clr-muted;
    font-size: 70%;
    line-height: 1;
  }
}

.h0 {
  position: relative;
  
  &:before {
    content: '64px';
    position: absolute;
    font-size: 14px;
    color: crimson;
    left: -40px;
    bottom: -40px;
  }
  
  &:after {
    content: '';
    width: 64px;
    height: 15px;
    position: absolute;
    background: linear-gradient(transparent 0, transparent 49%, orange 49%, orange 50%, transparent 61%);
    bottom: -15px;
    left: 0;
    border-right: 1px solid orange;
    border-left: 1px solid orange;
    transform: rotate(90deg);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console