@@include("../parts/head.html") @@include("../parts/header.html")
@@include("../parts/navbar.html")

Блок "Link"

Описание

Блок "Link" - это ссылка. Для использования блока вам нужно в своем LESS файле подключить link.less.

						
@import "../../blocks/link/link.less" 
						
					

Важно! Путь указан относительно текущего файла. Вполне возможно, что вам потребуется указать свой.

Далее требуется скопировать следующую разметку и вставить в свой файл.

											
@@include("../../../blocks/link/link-source.html")
						
					

После сделанных шагов вы должны увидеть в браузере следующий результат.

@@include("../../../blocks/link/link.html")

Модификации блока

Черный фон

Подключите требуемые LESS файлы в своем файле.

							
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_black/link_black.less";
							
						

Далее скопируйте следующий HTML и вставьте в свой файл.

											
@@include("../../../blocks/link/modifiers/link_black/link_black-source.html")
							
						

Вы должны увидеть следующий результат.

@@include("../../../blocks/link/modifiers/link_black/link_black.html")

Белый фон и черная обводка

Подключите требуемые LESS файлы в своем файле.

							
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_white-border-black/link_white-border-black.less";
							
						

Далее скопируйте следующий HTML и вставьте в свой файл.

											
@@include("../../../blocks/link/modifiers/link_white-border-black/link_white-border-black-source.html")
							
						

Вы должны увидеть следующий результат.

@@include("../../../blocks/link/modifiers/link_white-border-black/link_white-border-black.html")

Ссылка с анимацией. Еффект 1

Ссылка с черным фоном

Подключите требуемые LESS файлы в своем файле.

						  
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_animated-slide/link_animated-slide.less";
@import "../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-black/link_animated-slide-black.less";
						
					

Далее скопируйте следующий HTML и вставьте в свой файл.

											
@@include("../../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-black/link_animated-slide-black-source.html")
						
					

Вы должны увидеть следующий результат.

@@include("../../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-black/link_animated-slide-black.html")

Ссылка с черным белым фоном и черной обводкой

Подключите требуемые LESS файлы в своем файле.

						  
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_animated-slide/link_animated-slide.less";
@import "../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-white-border-black/link_animated-slide-white-border-black.less";
						
					

Далее скопируйте следующий HTML и вставьте в свой файл.

											
@@include("../../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-white-border-black/link_animated-slide-white-border-black-source.html")
						
					

Вы должны увидеть следующий результат.

@@include("../../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-white-border-black/link_animated-slide-white-border-black.html")

Ссылка с белым фоном

Подключите требуемые LESS файлы в своем файле.

						
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_animated-slide/link_animated-slide.less";
@import "../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-white/link_animated-slide-white.less";
						
					

Далее скопируйте следующий HTML и вставьте в свой файл.

											
@@include("../../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-white/link_animated-slide-white.html")

						
					

Вы должны увидеть следующий результат.

@@include("../../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-white/link_animated-slide-white.html")
@@include("../parts/scripts.html")