Sergey Ponomarenko xto3na

## Swipe event-handler
var initialPoint;
    var finalPoint;
    document.addEventListener('touchstart', function(event) {
    event.preventDefault();
    event.stopPropagation();
    initialPoint=event.changedTouches[0];
    }, false);
    document.addEventListener('touchend', function(event) {
    event.preventDefault();
    event.stopPropagation();

## Check Icon
.check-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    &:before, &:after {
        position: absolute;
        content: '';
        background: #007b68;
        height: 3px;
        border-radius: 1.5px;

## Animate max-height
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
	<style>
		.wr {

## Text vertical CSS
// HTML
<span class="vertical">VERTICAL TEXT ON CSS</span>

// CSS
.vertical {
	display: block;
	writing-mode: vertical-rl;
	height: 200px;
	transform: rotate(-180deg);
}

## Input[type="file"] styling
Поместить прозрачный input[type=file] внутрь элемента label,
вместе с произвольными стилизованными инлайновыми элементами
(кроме input, button, select и textarea, разумеется).
Клик по label автоматически приведет к клику и по скрытому полю для выбора файла.

## Sublime Settings
{
	"draw_white_space": "all",
	"font_size": 15,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"margin": 2,
	"save_on_focus_lost": true,

## Placeholder styling css
/* цвет */
input::-webkit-input-placeholder {color:#001e5d;}
input::-moz-placeholder          {color:#001e5d;}/* Firefox 19+ */
input:-moz-placeholder           {color:#001e5d;}/* Firefox 18- */
input:-ms-input-placeholder      {color:#001e5d;}

/* скрытие при фокусе */
input:focus::-webkit-input-placeholder {color: transparent}
input:focus::-moz-placeholder          {color: transparent}
input:focus:-moz-placeholder           {color: transparent}

## Диапазон в CSS
ol li:nth-child(-n+14):nth-child(n+7) {
  background: red;
}

## STOP Youtube-video


<div class="video-wr">
	<iframe width="490" height="300" src="https://www.youtube.com/embed/2CPY5C-PYPs?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

<button type="button" class="btn btn-primary stop-btn">PAUSE</button>

## Треугольник на CSS
.arrow {
    width: 20px;
    height: 20px;
    border: 10px solid transparent;
    border-bottom: 10px solid #000;
}
	var initialPoint;
	var finalPoint;
	document.addEventListener('touchstart', function(event) {
	event.preventDefault();
	event.stopPropagation();
	initialPoint=event.changedTouches[0];
	}, false);
	document.addEventListener('touchend', function(event) {
	event.preventDefault();
	event.stopPropagation();
	.check-icon {
	position: absolute;
	right: 0;
	bottom: 0;
	&:before, &:after {
	position: absolute;
	content: '';
	background: #007b68;
	height: 3px;
	border-radius: 1.5px;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	</head>
	<body>
	<style>
	.wr {
	// HTML
	<span class="vertical">VERTICAL TEXT ON CSS</span>

	// CSS
	.vertical {
	display: block;
	writing-mode: vertical-rl;
	height: 200px;
	transform: rotate(-180deg);
	}
	Поместить прозрачный input[type=file] внутрь элемента label,
	вместе с произвольными стилизованными инлайновыми элементами
	(кроме input, button, select и textarea, разумеется).
	Клик по label автоматически приведет к клику и по скрытому полю для выбора файла.
	{
	"draw_white_space": "all",
	"font_size": 15,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
	"Vintage"
	],
	"margin": 2,
	"save_on_focus_lost": true,
	/* цвет */
	input::-webkit-input-placeholder {color:#001e5d;}
	input::-moz-placeholder {color:#001e5d;}/* Firefox 19+ */
	input:-moz-placeholder {color:#001e5d;}/* Firefox 18- */
	input:-ms-input-placeholder {color:#001e5d;}

	/* скрытие при фокусе */
	input:focus::-webkit-input-placeholder {color: transparent}
	input:focus::-moz-placeholder {color: transparent}
	input:focus:-moz-placeholder {color: transparent}




	<div class="video-wr">
	<iframe width="490" height="300" src="https://www.youtube.com/embed/2CPY5C-PYPs?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
	</div>

	<button type="button" class="btn btn-primary stop-btn">PAUSE</button>
	.arrow {
	width: 20px;
	height: 20px;
	border: 10px solid transparent;
	border-bottom: 10px solid #000;
	}