Какой шаблон в категории «Портфолио»вам нравится? Отличное портфолио на HTML5 Адаптивные шаблоны html5 для фотографа портфолио.
Сначала сделаем разметку нового документа HTML5. В разделе заголовка включим стиль страницы. Библиотека jQuery, плагин Quicksand и наш файл script.js будут включены перед закрывающимся тегом body:
index.htmlМое портфолио
Элемент HTML5 header содержит наш заголовок h1 (который оформлен как логотип). Элемент section содержит неупорядоченный список пунктов портфолио другие списки добавляются кодом jQuery)/ Элемент nav , оформленный как зеленая полоса, действует как фильтр содержания.
Неупорядоченный список #stage содержит пункты нашего портфолио. Каждый пункт имеет атрибут data , который определяет серию разделенных запятой меток. Позже, в коде jQuery, мы проходим циклом список, записываем метки и создаем категории, которые могут быть выбраны на зеленой полоске меню.
Вы можете поместить в список пунктов другие работы и использовать другие метки.
jQueryПлагин Quicksand сравнивает два неупорядоченных списка, находит одинаковые элементы li в них, и анимирует процесс расстановки. Скрипт jQuery, который разбирается в данной части урока, проходит циклом по пунктам портфолио в списке #stage и создает новые (скрытые) неупорядоченные списки для каждой найденной метки. Данные списки затем будут использоваться для работы плагина Quicksand.
После загрузки страницы мы запускаем цикл для обнаружения меток.
script.js - Часть 1$(document).ready(function(){ var items = $("#stage li"), itemsByTags = {}; // Цикл по всем элементам li: items.each(function(i){ var elem = $(this), tags = elem.data("tags").split(","); // Добавляем атрибут data-id. Требуется плагином Quicksand: elem.attr("data-id",i); $.each(tags,function(key,value){ // Удаляем лишние пробелы: value = $.trim(value); if(!(value in itemsByTags)){ // Создаем пустой массив для пунктов: itemsByTags = ; } // Каждый пункт добавляется в один массив по метке: itemsByTags.push(elem); }); });
Каждая метка добавляется в объект itemsByTags как массив. Значит, itemsByTags["Веб дизайн"] будет содержать массив всех пунктов, которые имеют метку "Веб дизайн". Мы используем данный объект для создания скрытого неупорядоченного списка на странице для плагина Quicksand.
Создадим вспомогательные функции
script.js - Part 2Function createList(text,items){ // Вспомогательная функция, которая получает текст кнопки меню и // массив пунктов li // Создаем пустой неупорядоченный список var ul = $("
- ",{"class":"hidden"});
$.each(items,function(){
// Создаем копию каждого пункта li
// и добавляем ее в список:
$(this).clone().appendTo(ul);
});
ul.appendTo("#container");
// Создаем пункт меню. Неупорядоченный список добавляется
// как параметр data (доступен через.data("list"):
var a = $("",{
html: text,
href:"#",
data: {list:ul}
}).appendTo("#filter");
}
Данная функция получает имя группы и массив с пунктами li как параметры. Затем она клонирует данные пункты в новый список ul и добавляет ссылку на зеленую полоску.
Теперь мы проходим циклом по всем группам и вызываем вспомогательную функцию, также добавляем обработку события click для пунктов меню.
script.js - Часть 3// Создаем опцию "Все" в меню: createList("Все",items); // Цикл по массивам в itemsByTags: $.each(itemsByTags,function(k,v){ createList(k,v); }); $("#filter a").live("click",function(e){ var link = $(this); link.addClass("active").siblings().removeClass("active"); // Используем плагин Quicksandдля анимации пунктов li. // Он использует data("list"), определённую нашей функцией createList: $("#stage").quicksand(link.data("list").find("li")); e.preventDefault(); }); $("#filter a:first").click();
CSSСамая интересная часть стилей CSS - зеленая полоска #filter . Для нее используются псевдо-элементы:before / :after , чтобы создать привлекательные уголки по сторонам полоски. Так как они позиционируются абсолютно, то при изменении размеров полоски они выведутся там, где надо.
styles.css#filter { background: url("../img/bar.png") repeat-x 0 -94px; display: block; height: 39px; margin: 55px auto; position: relative; width: 600px; text-align:center; -moz-box-shadow:0 4px 4px #000; -webkit-box-shadow:0 4px 4px #000; box-shadow:0 4px 4px #000; } #filter:before, #filter:after { background: url("../img/bar.png") no-repeat; height: 43px; position: absolute; top: 0; width: 78px; content: ""; -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4); box-shadow:0 2px 0 rgba(0,0,0,0.4); } #filter:before { background-position: 0 -47px; left: -78px; } #filter:after { background-position: 0 0; right: -78px; } #filter a{ color: #FFFFFF; display: inline-block; height: 39px; line-height: 37px; padding: 0 15px; text-shadow:1px 1px 1px #315218; } #filter a:hover{ text-decoration:none; } #filter a.active{ background: url("../img/bar.png") repeat-x 0 -138px; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(255, 255, 255, 0.2), 1px 0 1px rgba(0,0,0,0.2) inset, -1px 0 1px rgba(0,0,0,0.2) inset; }
Готово!Вы можете использовать шаблон для своих проектов. Изменение содержания портфолио осуществляется просто. Если у пользователя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта.
Все представленные шаблоны для своего сайта построены на современных версиях HTML5 и CSS3. Кроме того, авторы применяют такие модные фишки, как плоский дизайн, отзывчивый дизайн, адаптивная верстка, слайдеры на jQuery, анимация на CSS3 и пр. То есть, если вы ищете шаблон мобильного сайта, то можете выбрать любой из представленных. Красивые html5 шаблоны 2017 , хоть и бесплатны, но выглядят на уровне премиум-класса.
Здесь вы найдете более 50 бесплатных адаптивных шаблонов сайтов высокого качества на HTML5 и CSS3, которые можно использовать как для новых сайтов, так и для переделки уже существующих. Стильные шаблоны сайтов html5 - это то, что вам нужно!
Обновлено 12.03.2019 : Так как статья была написана 2 года назад, то многие ссылки стали битыми. Либо владельцы шаблонов слились, либо поменяли статус шаблонов с бесплатных на платные, либо инопланетяне все похерили. Просьба к вам, уважаемые читатели, если нашли такую ссылку, киньте в комментах, я поправлю.
1. Snow - бесплатный шаблон лендинга на HTML5 и CSS3Шаблон html5 css3 целевой страницы Snow построен на фреймворке Bootstrap. Шаблон очень стильный и классный! Фиксированный фон и громадный Jumbotron - штука, которая показывает главное содержимое сайта. А что на лендинге самое главное? Правильно, призыв к действию. Естественно, шаблон полностью адаптирован под мобильные устройства. Вы можете использовать его даже в качестве основы для собственных шаблонов.
2. Sima - шикарный коммерческий шаблон сайтаЭтот шаблон html5 css3 также построен на фреймворке Bootstrap. Вы можете создать на этом шаблоне уникальный сайт с портфолио, вашей командой, ценами, отзывами и всем другим, что будет необходимо. Например, отлично подойдет этот шаблон для сайта клининговых услуг. Анимация в этом шаблоне плавная и эффектная, чистые и хорошо читаемые шрифты. Просто идеальный шаблон!
3. White - прекрасный шаблон одностраничника!Отличительная особенность шаблона сайта White - два варианта фона в верхней части. На ваш выбор либо слайдер с картинками, либо видео фон. Очень качественный и эффектный шаблон для сайта!
4. Platz - бесплатный HTML5 шаблон сайта на основе сеткиСовременный, визуально привлекательный HTML5 шаблон сайта, разработанный на основе сетки (подробнее о сетке читайте ). Красивый и отзывчивый дизайн шаблона для блога или сайта.
5. Mart eCommerce - прекрасный HTML5 и CSS3 шаблон сайта для электронной коммерцииСвежий и стильный дизайн шаблона сайта лучше всего подходит для всех видов модных сайтов, продающих обувь, одежду, часы, аксессуары, спортивную одежду и др. В комплекте идет PSD файл, который вы можете скорректировать под свои нужды.
6. Nava - эффектный HTML5 и CSS3 шаблон для творческих сайтовNava представляет собой современный HTML5 шаблон сайта, который используется в основном для творческих профессионалов, которые хотят показать их работу во всей красе. Множество вариаций настроек шаблона позволяет сделать ваш сайт уникальным. Легкий, красивый и отзывчивый шаблон для сайта.
7. Box Portfolio - уникальный творческий шаблон сайта на HTML5 и CSS3Шаблон сайта Box Portfolio обладает чистым и современным минималистичным дизайном. Отлично подойдет для профессионалов, желающих эффектно показать свои работы в сети. Как следует из названия, шаблон сайта идеально заточен под портфолио.
8. Mountain King - популярный и функциональный HTML5 и CSS3 шаблон сайтаГорная тема в дизайне сайтов очень популярна в последнее время. Шаблон сайта Mountain King не исключение. Включает 336 векторных иконок от Typicons. Плюс великолепная анимация на CSS3. Шаблон отлично подойдет для сайтов о путешествиях и портфолио.
9. Beauty Spa - классный шаблон сайта на HTML5 и CSS3 для спа-салоновBeauty Spa - отзывчивый шаблон сайта, имеющий множество функций, идеально подходящих для сайтов спа-салонов, оздоровительных или фитнес-центров, сайтов о йоге или даже парикмахерских. Отличная читаемость шрифтов и ненавязчивый минимализм.
10. Bent – стильный и эффектный лендинг для сайтов на HTML5 и CSS3Bent - великолепный бесплатный шаблон сайта на html5 и css3. Отзывчивый дизайн, CSS3 анимация, параллакс прокрутка, настраиваемая навигации и прочие вкусняшки. Это чистый дизайн шаблона для сайтов, которые хотят использовать сбалансированную конструкцию, чтобы гарантировать, что посетители будут наслаждаться внешним видом сайта, и в то же время четко видеть его основное содержание.
11. Triangle - бесплатный отзывчивый многоцелевой шаблон на HTML5 и CSS3Triangle эксклюзивный творческий HTML5 и CSS3 шаблон сайта специально для тех, кто хочет нарулить свой клевый дизайн, но при этом не сделать хуже. В шаблоне есть более 40 предварительно разработанных страниц, которые позволят вам настраивать ваш сайт, как душе угодно.
12. Future Imperfect - блестящий шаблон сайта для творческих людей!Испытайте подлинное чувство удовольствия с этим шаблоном сайта, идеально подходящим для писателей, авторов, копирайтеров и других работников пера и бумаги. Шаблон можно использовать также для личного блога, блога о путешествиях, о творчестве и пр. Креативный дизайн и адаптивная верстка шаблона понравятся многим.
13. Bodo - прекрасный шаблон для персонального сайтаBodo - красивый шаблон сайта на HTML5 и CSS3, который идеально подходит для персонального сайта. Особенно для организации портфолио. Чистая и четкая типографика, карусельный слайдер, всплывающие popup окна для показа работ и многое другое.
14. Lens - идеальный HTML5 шаблон сайта для фотографовФотографы всегда ищут идеальный шаблон для своего сайта, чтобы показать работы во всей красе, эффектно и самое главное - крупно! Редкий шаблон сайта отвечает этим требованиям. Lens - один из таких шаблонов сайта фотографа.
15. Spectral - уникальный шаблон сайта ручной работы на HTML5 и CSS3Если вы ищете бесплатные шаблоны сайтов по теме авто тематика , то Spectral будет идеальным решением. Здесь совершенно уникальный дизайн шаблона одностраничного сайта ручной работы. Дизайн можно менять по своему усмотрению. С помощью этого шаблона можно сделать потрясающий сайт абсолютно на любую тему, будь то впечатляющий блог о путешествиях или фотогалерея, сайт автомобильной тематики или хостинг-провайдера.
16. Oxygen - одностраничный HTML5 и CSS3 шаблон сайтаOxygen - удобный и уникальный шаблон для бизнес сайта. Современный плоский дизайн, адаптивная верстка. Наример, этот шаблон идеально подойдет для сайта о мобильных приложениях или мобильной технике.
17. Mobirise Bootstrap - совершенный бесплатный шаблон сайта на HTML5 и CSS3Если вы ищете бесплатный шаблон сайта, то Mobirise Bootstrap будет идеален, чтобы начать работу. Это многофункциональный шаблон с массой дополнений в комплекте. Три, предварительно сделанные, макета главной страницы и блога помогут вам в этом. Mobirise Bootstrap также SEO оптимизирован на 100% и адаптирован под любые размеры экранов.
18. La Casa - красивый и бесплатный HTML5 шаблон для сайта недвижимостиШаблон Brandy прекрасно подойдет для организации коммерческого сайта о недвижимости. Отзывчивый и очень красивый дизайн понравится не только владельцу сайта, но и посетителям.
19. Drifolio - стильный HTML5 шаблон сайта для портфолиоСтильный и анимированный HTML5 и CSS3 шаблон сайта для организации портфолио. Чистый дизайн, отличная типографика, красивые иконки и многое другое.
20. Pluton - яркий и стильный шаблон для одностраничного сайтаPluton – яркий и эффектный шаблон сайта на Bootstrap. Современный шаблон сайта, с его уникальным одностраничным макетом и адаптивным дизайном, который отлично подходит для студий, фотографов и творческих дизайнеров.
21. SquadFree - профессиональный шаблон одностраничного сайта на HTML5Шаблон SquadFree отлично подойдет для создания коммерческого одностраничного сайта. Выглядит шаблон не только профессионально, но и адаптирован под все виды экранов. Шаблон собран на основе Bootstrap.
22. Sublime - завораживающий шаблон сайта на HTML5 и CSS3Sublime - чистый и потрясающе красивый шаблон сайта на HTML5 и CSS3, идеально подходящий для стартапа, креативного агентства или сайта-портфолио. Отзывчивый дизайн и два варианта страниц на выбор.
23. Timber - необычный и красивый HTML5 и CSS3 шаблон сайтаTimber - свежая, стильная и необычная тема шаблона одностраничного сайта. Диагональ - главная фишка дизайна этого шаблона. Шаблон отлично подойдет для бизнес-сайта или портфолио. Есть встроенная галерея, карта и контактная информация, которые вы легко сможете адаптировать под себя.
24. E-Shopper - лучший шаблон сайта для электронной коммерцииE-Shopper - прекрасный вариант шаблона сайта для электронной коммерции. Построен на основе bootstrap с удивительным набором функций для полноценного и эффективного интернет-магазина.
25. Magnetic - бесплатный HTML5 и CSS3 шаблон для фотосайтаСовершенно потрясающий HTML5 и CSS3 шаблон для создания фотосайта или портфолио дизайнера, иллюстратора или художника. Этот шаблон поднимает планку профессиональных шаблонов на новый уровень! Отзывчивый дизайн, отличная поддержка всех видов устройств отображения, легкая и удобная навигация и многое другое.
26. Mabur Portfolio - прекрасный шаблон сайта в стиле минимализма на HTML5 и CSS3Плоский дизайн этого шаблона сайта в стиле минимализма отлично подойдет для создания портфолио. В шаблоне все детали выверены идеально!
27. Modern Bootstrap HTML5 - бесплатный одностраничный шаблон сайтаЭтот бесплатный одностраничник на основе фреймворка Bootstrap прекрасно подойдет для корпоративных сайтов, как для малых компаний, так и для крупных. Плоский дизайн, адаптивная верстка, все элементы дизайна высокого качества. Шаблон представлен в 4 различных цветах.
28. Infusion - стильный одностраничный шаблон сайта на HTML5 и CSS3Infusion - это прекрасный пример шаблона сайта в стандартах HTML5 и CSS3, который специально разработан для создания бизнес портфолио. Богатая функциональность этого шаблона позволяет эффективно работать с клиентами и привлекать новых.
29. Yebo - корпоративный шаблон сайта на HTML5 и CSS3Этот высококачественный шаблон сайта в плоском стиле прекрасно подойдет для любого корпоративного сайта. Адаптивный дизайн, масса настроек и возможностей для редактирования.
30. Twenty - эффектный HTML5 и CSS3 шаблон сайта с параллаксомЭтот уникальный и очень красивый шаблон сайта с эффектом параллакса не оставит никого равнодушным. Одностраничный шаблон построен на чистом HTML5 и CSS3 с адаптивной версткой, впечатляющими фонами, поддержкой социальных медиа и пр.
31. Urbanic – отличный HTML5 и CSS3 шаблон сайта на BootstrapUrbanic – свежий и классный HTML5 и CSS3 шаблон сайта, построенный на движке Bootstrap. Прекрасно подходит, чтобы сразу начать создавать свой сайт без особых проблем. Шаблон отлично адаптирован под любые размеры экранов.
32. Design Showcase - HTML5 шаблон сайта для портфолиоВизуально гармоничный и эффектный шаблон сайта на HTML5 для организации вашего портфолио. Шаблон прекрасно адаптирован под мобильные устройства, что для сайтов такого формата очень непросто сделать.
33. Mamba One - простой и стильный шаблон сайта на HTML5 и CSS3Mamba One - это пример простого, но стильного шаблона сайта для создания одностраничника. Совместим со всеми современными браузерами и везде будет отображаться адекватно.
34. KreativePixel - бесплатный шаблон сайта для фотографовЕще один прекрасный шаблон сайта для фотографов. Отзывчивый дизайн и очень удобная сортировка фоток в портфолио и галереях понравятся многим любителям фотографии. В шаблоне также применен параллакс-эффект, что тоже впечатляет зрителей при просмотре фоток.
35. Retina Ready Responsive App - бесплатный шаблон лендинга на HTML5 и CSS3Как следует из названия, этот замечательный шаблон сайта не только идеально заточен под целевые страницы, но и отвечает новым мобильным веяниям, особенно в плане четкости отображения на устройствах с Retina дисплеями.
36. Brushed - отзывчивый HTML5 и CSS3 шаблон сайта на движке BootstrapBrushed - отзывчивый, бесплатный HTML5 и CSS3 шаблон сайта на основе движка Bootstrap. Также оптимизирован для Retina дисплеев (iPhone, IPAD, IPod Touch и MacBook Pro Retina).
37. Big Picture HTML5 и CSS3 шаблон сайтаДобро пожаловать на Big Picture! Этот адаптивный шаблон сайта на HTML5 прекрасно подойдет всем творческим людям, которым есть что показать, и показать это крупно и эффектно на своем сайте. Кроме того, в шаблоне применена отличная анимация.
38. Tesselatte - бесплатный отзывчивый шаблон на HTML5 и CSS3Простой шаблон одностраничника, который учитывает все необходимые инструменты для успешного создания сайта. Идеально подойдет для личного блога писателя, копирайтера и просто любителя печатного слова.
39. Overflow - уникальный шаблон сайта на HTML5 и CSS3Этот уникальный шаблон сайта на чистом HTML5 и CSS3 прекрасно подойдет любому творческому человеку. Он полностью отзывчивый и совершенно бесплатный.
40. Runkeeper - отзывчивый и очень красивый шаблон сайтаRunkeeper - бесплатный, отзывчивый и очень красивый шаблон сайта. Его можно использовать для сайта любой тематики. Блестящий стиль и четкие шрифты, адаптивный дизайн и впечатляющие детали шаблона. Все работает на вас!
41. Pinball Responsive Grid Style - отличный шаблон сайта на основе сеткиЭтот замечательный профессиональный шаблон сайта на основе сетки идеально подойдет для корпоративного сайта. Современный плоский дизайн и отзывчивая структура шаблона прекрасно отображается как на экранах больших мониторов, так и мобильных устройств.
42. Prologue - чистый шаблон одностраничного сайта на HTML5 и CSS3Этот чистый, простой и четкий шаблон сайта на HTML5 и CSS3 прекрасно подойдет для постройки лендинга. Минималистический дизайн не отвлекает от главного. Эффектная боковая панель навигации с прокруткой и четкие линии страницы - просто идеальное сочетание!
43. Helios - современный шаблон сайта на чистом HTML5 и CSS3Еще один шаблон сайта в стиле минимализма и чистых форм. Специально разработан, чтобы использовать преимущества больших экранов дисплеев, но так же прекрасно адаптирован и под маленькие экраны мобильных устройств.
44. Telephasic - бесплатный и отзывчивый шаблон сайта на HTML5Этот современный, отзывчивый и абсолютно бесплатный шаблон сайта обладает одним большим преимуществом - он прост и лаконичен, но многим именно этого и не хватает.
45. Strongly Typed - очень красивый шаблон сайта в стиле полу-ретроНовый шаблон сайта с минималистичным полу-ретро стилем. Просто ретро уже не в моде, а вот легкий намек на него - очень даже кстати. Этот шаблон сайта полностью отзывчивый, построен на чистом HTML5 и CSS3 и включает все необходимые основные элементы страницы. Шаблон Strongly Typed идеально подойдет для сайтов творческой тематики. Например, для сайта о домашнем декоре .
46. Striped - чистый, красивый и функциональный шаблон сайта HTML5 и CSS3Свежий и чистый, красивый и функциональный, новый шаблон сайта на HTML5 и CSS3. Имеет в своем арсенале все необходимые элементы страниц, в том числе оформленные цитаты, таблицы и списки, а также адаптированный сайдбар (справа или слева - по вашему желанию).
47. Parallelism - необычный и стильный шаблон сайта на HTML5 и CSS3Parallelism - стильный шаблон сайта для организации портфолио или фотографий. Необычность его в том, что прокрутка здесь не вертикальная, как обычно, а горизонтальная. Это придает сайту особый шик и запоминаемость.
48. Miniport - полностью отзывчивый HTML5 шаблон сайта в стиле минимализмаОтличный шаблон сайта в стиле минимализма на HTML5. Прекрасно подойдет как для личного сайта/блога, так и для небольшого корпоративного сайта одностраничника или в качестве сайта-визитки.
49. Verti - просторный и свободный отзывчивый шаблон сайта на HTML5Чистый и просторный дизайн этого шаблона сайта прекрасно подойдет для набольших корпоративных сайтов или для коммерческих проектов. Отзывчивый и удобный как для автора, так и для пользователей.
50. ZeroFour - впечатляющий и стильный шаблон сайта на HTML5 и CSS3И последний в списке, но не последний по качеству и внешней эффектности шаблон сайта - ZeroFour. Стильный дизайн, очень красивое меню, идеально выверенные формы и кнопки, красивые иконки и многое другое. И все это абсолютно бесплатно!
Надеюсь, вы нашли для себя что-то подходящее среди этих замечательных шаблонов сайтов на HTML5 и CSS3. Удачи!
Добавьте в закладки, чтобы потом быстро найти.
ПС: Если никак не можете определиться с выбором, прочтите статью «Я не знаю, чего я хочу» . Будет полезно.
В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.
Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.
Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.
Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.
В данную подборку вошли шаблоны для различных профессий, но, в основном, оценят топик программисты, веб-дизайнеры или верстальщики, так как по дизайну и структуре они больше подходят именно им.
Ранее мы уже публиковали подборки с шаблонами для создания портфолио. Например:
Шаблон полностью адаптивен, имеет классную анимацию появления элементов при скроллинге с полностью валидным кодом.Gorgo PortfolioБесплатный, очень чистый и стильный шаблон портфолио дизайнера . Выполнен в стиле минимализм . Также имеет классное полноэкранное меню .
Сетка с примерами работ сделана по примеру шахматной доски, что очень радует, так как это тренд. Сама страница работы меня очень впечатлила, вероятно из-за качественного демо-наполнения. Если Вы намерены использовать именно этот дизайн в качестве личной странички, позаботьтесь о качественном оформлении самой работы.LithiumБесплатный адаптивный шаблон в стиле Flat , который подойдет практически любому фрилансеру, будь это веб-разработчик или фотограф, так как на станице предусмотрено как привычное портфолио с фильтром по категориям работ, так и фотогалерея . BrandyЕще один чрезвычайно качественный шаблон для создания личного портфолио . Он имеет множество плюшек, которые все так любят: Parallax эффекты, эффект появления блоков при скроллинге, плавная прокрутка, различные счетчики и, конечно же, блок самого портфолио.
Шаблон абсолютно бесплатен и подойдет для фрилансеров любой IT профессии.KongИнтересный html шаблон портфолио дизайнера . В первом экране можно разместить свою фотографию, представиться и написать свою специальность.
Практически все блоки в шаблоне реализованы те, которые мы привыкли видеть в стандартном Лендинге.
По поводу цветовой гаммы - я бы ее сменил. Слишком уж ядовая.MyFolioОтличный адаптивный одностраничник-портфолио в зеленых тонах. Подойдет как фрилансеру-одиночке, так и команде разработчиков. Шаблон выполнен качественно и заслуживает внимания.BasicСтрогий шаблон в синих тонах для создания портфолио. Построен на Bootstrsp 3.2. Если заменить иконки в первом экране, можно использовать фрилансерам любой сферы деятельности.SmallНебольшой одностраничный html шаблон в плоском стиле . Он разделен на три экрана с высотой 100%. Первый экран - фотография и краткая информация о фрилансере.
Второй экран - портфолио. Выводятся последние 8 работ из Вашего портфолио на dribbble . То есть все, что нужно сделать, это настроить интеграцию с и на этом все. Изображения будут обновляться сами, синхронно с вашими действиями на Dribbble.
Третий экран - Контактная информация.KelvinКачественный, универсальный HTML5 CSS3 шаблон. Очень напоминает Ceevee, который был в этой подборке выше, но есть некоторые отличия в концепции блока с примерами работ и в графиках, которые отображают скиллы фрилансера. Предусмотрена возможность детального рассказа о себе с помощью различных блоков.PortioИнтересный, универсальный шаблон, хотя есть много моментов, из-за которых я бы не стал его использовать: это дурацкие шрифты, убогие кнопки. Возможно, кого-то заинтересует такой вариант. Как никак - яркая цветовая гамма. Если немножко поправить CSS стили, можно прийти к хорошему результату.PortБесплатный, и, я бы даже сказал, элегантный одностраничный шаблон на базе Bootstrap. Лично мне нравятся красные активные элементы. Блок с примерами работ выполнен в виде мудреной сетки, и это плюс. Данный шаблон будет отличным решением для создания портфолио веб-дизайнера или программиста .HexaМногостраничный Flat-шаблон со слайдером в шапке в характерной стилю цветовой гамме - зеленой. Используя данное решение, вы сможете создать отличный сайт-визитку с примерами работ и блогом.FreelancerОтличный одностраничник в плоском стиле и зеленой цветовой гамме. В первом экране предусмотрено место под фотографию, а лучше, чтобы не портить стилевое оформление, рисованный автопортрет владельца сайта.
Шаблон небольшой, и это огромный плюс, так как для наших целей использовать «портянки» незачем. Выполнен, на удивление, очень качественно. Он полностью адаптивен и базируется на фреймворке Bootstrap.Dribbble PortfolioЕще один шаблон, портфолио в котором интегрировано с Dribbble . Требуется лишь настроить выгрузку последних работ и забыть о постоянном, нудном обновлении портфолио на своей личной странице.
Шаблон выполнен в строгой, современной цветовой гамме. Все смотрится очень чистенько.
Также как и предыдущий Dribbble-шаблон, он небольшой. Я бы даже сказал, лаконичный. В общем, моя оценка 9 из 10.GeekНеплохой, хотя и ощущается немного тяжеловатым, шаблон для создания портфолио фрилансера в виде посадочной страницы. Он имеет различные диаграммы для визуального отображения уровня навыков в своих профилях деятельности - это интересно. Также имеется слайдер с отзывами и блок с симпатичной сеткой из фотографий, который можно использовать для демонстрации своих работ.Dribbble Folio V2Бесплатный шаблон с автонаполняемым портфолио . Работы импортируются с сайта Dribbble . Перед использованием данного решения, не забудьте настроить интеграцию с вашим профилем на Dribbble.
К сожалению, демо нет.HarbourОригинальный html css шаблон в фиолетовых тонах для создания персонального сайта. Это многостраничная тема, где главная выполнена в стиле одностраничника, но, в свою очередь, имеются также внутренние страницы. Подойдет для создания личного сайта фрилансера любой специальности.
Создание картинной галереи
Как без знания языков программирования сделать себе на сайт простую и удобную для посетителя картинную галерею? Во-первых, это должно занимать немного времени, а вовторых, при просмотре не должно ничего мешать - будь то кнопки управления или какая то другая ерунда. Открываем программу "блокнот" и с чистого листа прямо сайчас мы с Вами научимся как бесплатно создадть сайт портфолио - картинную галерею.
- отвечает за начало и конец html кода
- эти теги отвечают за заголовок
- Отвечает за отображение текста заголовка, т.е. в браузере будет страница выдаваться с таким заголовком. И в поисковике тоже.
- внутри этого тега будет находиться остальной код.
Продолжаем:
В заголовок введем:
"Картинная галерея художника такого то (или портфолио фотографа такогото)"
Сжимайте фотографии перед публикацией в интернет. Сделать это можно при помощи Photoshop. Открываем фото, выбираем файл -> сохранить как -> тип файлов JPEG выбираем средний размер файла. Или еще лучше файл -> сохранить для web и устройств -> JPEG Hight.
Теперь у нас есть фото. Нужно написать информацию о себе - в какой области работаете, какой опыт, в каких событиях принимаете участие, немного биографии и т. п. В итоге мы хотим, чтобы получилось так: слева наше фото, справа немного о нас.
Для этого вставляем таблицу, в левой ячейке которой будет находиться фотография, а в правой - текст:
Картинная галерея художника Василия Пупкина
- создание столбца, в данном случае в одной строке создается два столбца. Теперь поместим в левую часть таблицы фотографию. Для этого сохраним создаваемый нами файл в какой-нибудь папке следующим образом: файл -> сохранить как -> вводим название "index.html" - наш файл сохраняется как веб страница. Название index он должен иметь потому, что когда вы набираете в браузере название какого-либо сайта, в первую очередь он ищет файл index.html, потом index.htm, index.php и т. д. В той же папке, куда мы сохранили этот файл, мы создадим папку "images", в которой будем сохранять все наши изображения. В эту папку ("images") мы переместим нашу фотографию "foto.jpg". Выводим изображение на экран браузера.
Картинная галерея художника Василия Пупкина
означает вывод изображения src="/images/foto.jpg" - путь к фотографии Теперь необходимо вывести текст в правой части таблицы.
Картинная галерея художника Василия Пупкина
Не забываем сохраняться. Одно из правил программиста: "Сохраняться почаще". Теперь у нас получилась страничка с краткой информацией об авторе. Дбавим на эту страницу картинную галерею. Т. к. Цель данной статьи научить Вас создавать сайты без знания языков программирования - обойдемся простым HTML для реализации простейшей галереи. Даже применяя тот простой метод, о котором будет рассказано далее, Вы сможете сделать хорошую галерею для Вашего портфолио.
Картинная галерея художника Василия Пупкина
Тег Свойство cellspacing определяет расстояние между ячейками таблицы. Оно нам нужно для того, чтобы изображения и текст не сливались в общую массу. Вместо текста "Строка 1" нужно вставить нашу первую фотографию. Я надеюсь, мы ее уже приготовили и поместили в папку images корневой папки, где находится наш сайт. Назовем ее pic_1.jpg В названиях файлов нельзя употреблять пробелы, поэтому мы укажем знак "_" нижнее подчеркивание, или "-" минус. Земеним текст "Строка 1" на В этом выражении alt означает альтернативный текст, т. е. Тот, который будет отображаться вместо картинки, если в браузере посетителя сайта выключено отображение изображений. Тег title отвечает за вывод подсказки при наведении мышки на картинку. Еще можно указать название изображения под картинкой. для этого послес трочки вывода изображения поставим Поясню, зачем мы провели все эти действия: Поисковые системы для поиска фотографий используют тэги описания изображения. А если рядом с фото будет стоять текст, соответствующий описанию фотографии, поисковая система сочтет данный рисунок релевантным запросу, содержащим описание фотографии, что поможет в продвижении сайта в топ выдачи поисковых систем. Кроме того, можно попасть в топ поиска по изображениям, что позволит привлечь дополнительный трафик. Интересный совет: используйте как минимум три изображения с подписями на страницах сайта. Изображения обязательно должны соответствовать тематике содержимого текста. Современные поисковые системы достаточно умны. В поиске изображений отображается ссылка на Ваш сайт, соответственно, люди могут заинтересоваться этим и перейти к Вам. Благодаря этому можно хорошо продвигать товары в интернет магазине. Хорошее детальное описание фотографии, состоящее из ключевых поисковых запросов, по которым люди должны находить Ваш товар - например, "Фиолетовый холодильник" или "Платье в горошек", или "свадебные букеты". Важный совет: используйте защиту фотографий от копирования с умом для раскрутки своего сайта. Размещайте на фотографиях "Водяной знак", ссылку на источник фотографии контрастным к изображению текстом или делайте другую подобную защиту. Это позволит доказать авторское право на изображение, а так же увеличит посещаемость сайта, если люди увидят ссылку на автора фотографии где-нибудь еще. Вернемся к редактированию текста. Сохраним HTML код и проверим, как все это отображается в браузере. Теперь мы видим, что появилось изображение нашей первой фотографии. height=" " - высота в пикселях и width=" " - ширина в пикселях. Укажем ширину нашего заранее подготовленного такой, какая она есть. Пусть, в нашем примере изображение будет размером 300 по ширине и 200 по высоте. Соответственно укажем:
Картинная галерея художника Василия Пупкина
Посмотрим, как измениться фотография, меняя эти размеры, например, ширину 300 поменяем на 500. Вотография растянется по ширине. Благодаря этим приемам - изменению масштабов фото мы можем выводить большие изображения в меньшем размере в окне браузера. Если необходимо сделать область одного цвета, или градиентный фон, можно растянуть рисунок, например, шириной 1 пиксель и высотой 20, на нужную величину используя атрибут width. Это может применяться для ускорения загрузки страницы, нет необходимости вставлять дополнительный рисунок. Теперь добавим другие фотографии подобным образом в наш код. Мы получили простую галерею изображений. Добавим теперь свои контакты для того чтобы посетители сайта могли связаться с нами. Воспользуемся ссылкой на электронную поту. Для того чтобы вставить ссылку на e-mail пишем следующий код: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript В этом выражении означает открытие тега ссылки, затем идет href="/ " - адрес ссылки, тег title=" " означает надпись, появляющуюся при наведении на ссылку мыши. Обязательно указывайте title для каждой ссылки, благодаря этому страницы, на которые ссылается ссылка приобретут большее доверие у поисковых систем, т. е. содержимое страницы подходит под описание ссылки, поисковая система больше ценит страницы стакими осмысленными ссылками. Добавим еще наш контактный телефон. В итоге у нас получается такой код:
Картинная галерея художника Василия Пупкина
Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
Звоните: 77-888-999
Сохраняем, проверяем. У нас получился простейший одностраничный сайт портфолио с нашими работами. Для того, чтобы его могли увидеть люди, нам необходимо выложить его на |