Спершу зробимо розмітку нового документа 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); tags,function(key,value)( // Видаляємо зайві прогалини: value = $.trim(value); if(!(value in itemsByTags))( // Створюємо порожній масив для пунктів: itemsByTags = ; ) // Кожен пункт додається до одного масиву по мітці: itemsByTags.push(elem); )); ));

Кожна мітка додається до об'єктів елементівByTags як масив. Значить, itemsByTags["Веб дизайн"] міститиме масив усіх пунктів, які мають мітку "Веб дизайн". Ми використовуємо цей об'єкт для створення прихованого невпорядкованого списку на сторінці Quicksand.

Створимо допоміжні функції

script.js - Part 2

Function 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; : url("../img/bar.png") no-repeat; height: 43px; position: absolute; top: 0; width: 78px; content: ""; (0,0,0,0.4);-webkit-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; ("../img/bar.png") repeat-x 0 -138px; 5, 0.2), 1px 0 1px rgba(0,0,0,0.2) inset, -1px 0 1px rgba(0,0,0,0.2) inset; )



Готово!

Ви можете використовувати шаблон для проектів. Зміна змісту портфоліо здійснюється просто. Якщо у користувача відключений JavaScript, то він все одно побачить роботи, що сприятливо позначається на SEO сайту.

У цю добірку увійшли шаблони для різних професій, але, в основному, оцінять топік програмісти, веб-дизайнери або верстальники, так як за дизайном і структурою вони найбільше підходять саме їм.

Раніше ми вже публікували добірки із шаблонами для створення портфоліо. Наприклад:



Clean

Професійний, чистий для створення персонального портфоліо та особистої сторінки незалежного веб-розробника. Відмінно підійде для дизайнерів, верстальників чи програмістів.
Шаблон повністю адаптивний, має класну анімацію появи елементів при скролінгу з валідним кодом.



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 шаблонисайтів. HTML шаблон сайту – це набір готових статичних сторінок для сайту певної тематики. За допомогою такого шаблону створити простий сайт можна буквально за пару годин, за наявності базового знання HTML розмітки. У розділі HTML Ви отримаєте ці знання, якщо витратите ще пару годин на вивчення, а якщо не пошкодуєте час на розділ CSS, зможете повністю керувати дизайном HTML шаблонів сайтів і налаштовувати їх повністю під свої потреби.

Ще одним незаперечним плюсом шаблонів сайтів є те, що їх пишуть в більшості випадків професіонали. Під професійним шаблоном сайтом розуміється не тільки красивий та сучасний дизайн, але й написаний код. Пошукові системидивляться, як у Вас написаний сайт, SEO оптимізовано код чи ні, на підставі цього знижують чи підвищують Ваші позиції у видачі. Тому хороший сайт має бути не тільки красивий і сучасний, що важливо, але й грамотно написаний у плані коду.

Завантажуйте безкоштовні HTML шаблони сайту та створюйте свої проекти у найкоротші терміни.

Ми продовжуємо серію уроків з верстці сайту з нуля. На ми верстали шапку макету. Далі йде блок з однієї великої фотографії як тло. Цей блок перебуває у першому екрані браузера, отже у центрі уваги користувача. Тому поміщайте в цю область лише візуально привабливу картинку, яка передає суть сайту та важливу інформацію.



Як ви помітили, ми верстаємо макет портфоліоале не звичайного, а собаки. Однак окрім жартів, на виході вийде типовий шаблон у стилі популярного flatдизайну, який можна використовувати для себе, замінивши текст та фотографії. Для плоского дизайну характерні контрасти кольорів. Вся сторінка ділиться кілька блоків, де світлий блок змінює темний і так всю висоту сторінки кілька екранів. Кожен блок в ідеалі має містити однаковий за змістом контент.

Весь макет складається з шапки, чотирьох секцій та підвалу.

..


Зображення


Портфоліо


Про мене


Форма & Контакти



Background: url("your_image.jpg") no-repeat;

Керує розмірами картинки селектор background-size. Вставляємо картинку повністю по ширині та висоті. При збільшенні розмірів екрана картинка розтягуватиметься, при зменшенні – масштабуватиметься, не зберігаючи пропорцій.

Background-size: 100% 100%;

Усередині контейнера section, помістимо блок divіз заголовком, текстом та кнопкою.

Вставляємо код повністю в наш HTML документ після тега .










Важко бути "милим"




Щодня я прокидаюся з однією єдиною думкою про те, як важко бути милим. Але не подаю вигляду, що мені набридли ваші "погладжування" та "сюсюкання".



Дізнайтесь більше












Код для style.css:

Mops_bg(
background: url(images/articles/html_coding_banner.jpg) no-repeat;
background-size: 100%; 100%;
}
.mops_text (
padding: 20% 0%;
}
.mops_text h2 (
color: #fff;
font-size: 2.9em;
font-weight: 600;
z-index: 10;
text-align: center;
position: relative; /* відносне позиціонування заголовка */
margin-top: -140px;
}
.mops_text h2 span (
font-size: 1.1em;
font-weight: 290;
}
.mops_text p (
color: #fff;
font-size: 1.2em;
text-align: center;
margin: 1.4em auto;
width: 76%;
font-weight: 200;
line-height: 1.3em;
}
.mops_text .da-butt (
display: block;
background-color: #a97b7b;
color: #fff;
font-size: 1em;
text-transform: uppercase;
margin: 0 auto;
width: 10%;
text-align: center;
padding: 1em 2em;
}
.da-butt (
position: absolute; /* абсолютне позиціонування кнопки */
left: 750px; top: 370px; /* відступи від країв браузера */
}
.mops_text .da-butt:hover
{
background:#d0a5a5;
}
.butt-img(
width: 50px;
height: 50px;
display: block;
margin: 2em auto 1em;
background: url(images/articles/html_coding_buttonimg.png);
-webkit-transition: all 0.5s ease-in-out; /* плавний перехід */
-Moz-transition: all 0.5s ease-in-out; /* плавний перехід */
-o-transition: all 0.5s ease-in-out; /* плавний перехід */
-ms-transition: all 0.5s ease-in-out; /* плавний перехід */
transition: all 0.5s ease-in-out; /* плавний перехід */
position: relative; /* абсолютне позиціонування стрілки */
left: 210px; top: 130px; /* відступи від батька */
}
.butt-img:hover(
display: block;
width: 50px;
height: 50px;
background: url(images/articles/html_coding_buttonimgh.png);
}

Результат роботи можна переглянути на