У цю підбірку увійшли шаблони для різних професій, але, в основному, оцінять топік програмісти, веб-дизайнери або верстальники, так як за дизайном та структурою вони більше підходять саме їм.
Раніше ми вже публікували добірки із шаблонами для створення портфоліо. Наприклад:
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 шаблон у фіолетових тонахдля створення персонального веб-сайту. Це багатосторінкова тема, де головна виконана в стилі односторінника, але, у свою чергу, також є внутрішні сторінки. Підійде для створення особистого сайту фрілансерабудь-якої спеціальності.
Грамотно складене та візуально оформлене, у нашому випадку, це окрема сторінка, є важливим елементом особистого сайту чи блогу, будь-якого спеціаліста, який досяг певного рівня майстерності у своїй професійній діяльності.
Сторінка портфоліо, це такий своєрідний звіт, або візуальне резюме, за допомогою якого ви зможете наочно продемонструвати читачам та відвідувачам сайту/блогу, набір найбільш вдалих реалізованих робіт, будь-то фотографії, статті, публікації, елементи дизайну тощо.
У мене такої сторінки немає і, це з мого боку, прикра недогляд, який потрібно, якнайшвидше виправити, над чим власне в даний моментта працюю.
На безкрайніх просторах глобальної мережі, можна знайти величезну кількість готових шаблонівсторінок для організації портфоліо, і різноманітність таких сторінок по-справжньому вражає. Так що, кому в лом вникати у всі тонкощі веб-дизайну та розробки, завжди зможуть знайти підходящий для себе варіант. Ну, а для стражденних знань у сайтобудівництві, пропоную розібрати приклад адаптивної верстки, простий сторінки портфоліо, з фільтрацією виконаних робіт за категоріями, виконаною на , розведеною привабливим ефектом переходу, з елементами анімації .
Макет сторінки, що виконується javascript і деякі елементи оформлення, видав на гора, чудовий веб-дизайнер і розробник Kevin Liew (queness.com). При виборі оптимального рішення, для мене було важливо, це простота виконання, функціональність плагіна jQuery, коректна робота у всіх сучасних браузерах, і враховуючи популярність використання різних мобільних пристроївдля інтернет-серфінгу, адаптивність дизайну майбутньої сторінки. Ніяких химерних, дизайнерських наворотів та великовагових плагінів.
Базовий макет складається із двох основних елементів інтерфейсу користувача, які ми маємо побудувати, це навігації по вкладкам для фільтрації категорій представлених робіт, і сама сітка мініатюр з ефектом спливаючого підпису при наведенні.
Для початку, щоб все в результаті запрацювало, буде потрібен jQuery не нижче версії 1.7.0. Якщо він у вас ще не підключений, додайте наступний рядок перед тегом :
Запустіть плагін MixItUp в роботу, цей код вставте після зазначених вище файлів:
| < script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) ) mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , effects: [ "fade" ) , easing : "snap" , // call the hover effect onMixEnd: filterList. find(".label" ) . stop() . animate(( bottom: 0 ) , 200 , "easeOutQuad" ) ; $(this) . find("img" ) . ) , 500 , "easeOutQuad" ) ; ) , function () ( $(this) . find(".label" ) . stop() . animate(( bottom: - 40 ) , 200 , "easeInQuad" ) ; this) .find("img" ) .stop() .animate(( top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ) ;filterList. |
Окремо розглядати всі налаштування плагіна, сенсу немає, за умовчанням виставлений досить оптимальний варіант. Ну, якщо вже когось вставить на експерименти з параметрами, будь ласка, все у ваших силах.
Для формування макету сторінки та зовнішнього вигляду елементів, підключаєте до документа парочку файлів .
, один для базових стилів, обзовемо його наприклад: layout.css і ще один маленький CSS файл normalize.css для забезпечення кращої узгодженості браузерів у стандартному оформленні елементів:
| < link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" > |
Тепер розберемо все по порядку, по можливості без зайвої води, доступно і зрозуміло, рідною, багатостраждальною мовою.
| < ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Усе < li>< span class = "filter" data- filter= "app" >Програми < li>< span class = "filter" data- filter= "card" >Візитки < li>< span class = "filter" data- filter= "icon" >Іконки < li>< span class = "filter" data- filter= "logo" >Логотип < li>< span class = "filter" data- filter= "web" >Веб дизайн |
- Усе
- Програми
- Візитки
- Іконки
- Логотип
- Веб дизайн
На панелі навігації розміщуємо весь список робіт, розбитий на категорії. Нам необхідно кожну категорію портфоліо через атрибут data-cat зв'язати з тим чи іншим пунктом навігаційної панелі відповідно до значення в атрибуті data-filter . Шляхом зіставлення значень data-filter з data-cat і буде виконуватися фільтрація елементів портфоліо за категоріями.
Крім цього, додамо до мініатюри, заховану до певного часу, невелику панель з назвою роботи та заголовком категорії, що спливає тільки при наведенні на картинку. А щоб легше сформувати зовнішній виглядвсієї цієї конструкції в CSS, пропишемо відповідні класи елементам:
| < div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Хостинг Beget. Ru < span class = "text-category" >Логотип < div class = "label-bg" > ......... |
Зверніть увагу, що ви можете додати посилання до картинки або безпосередньо в підпис, щоб користувач зміг у повному обсязі бачити всі ваші праці.
CSS
Тепер, тихим сапом, переходимо до найцікавішого, до формування в CSS загальних стилів інтерфейсу користувача нашої сторінки портфоліо і адаптивної її версії. У статті вкажу лише базові (за замовчуванням) значення, тобто без будь-яких фонових картинок та підключених шрифтів, все це, кому воно треба, можна побачити в демо, або знайти в архіві з вихідними джерелами.
| .container (position: relative; width: 960px; margin: 0 auto; /* Ви зможете бачити ланцюг переходів при зміні розмірів вікна браузера */-webkit-transition: all 1s ease; -Moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; ) #filters ( margin : 1% ; padding : 0 ; list-style : none ; ) #filters li ( float : left ; ) #filters li span ( display : block ; padding : 5px 20px ; text-decoration : none ; : # 666; /* додаємо трохи тіні для тексту */ text-shadow : 1px 1px #FFFFFF; cursor: pointer; ) /* змінюємо фон категорії при наведенні */#filters li span: hover ( background : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) /* фон активного пункту категорії */#filters li span.active ( background : rgb (62 , 151 , 221 ) ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; width : 23% ; margin : 1% ; display : none ; float : left ; overflow : hidden ; . overflow : hidden ; position : relative !important; background : #666 ; cursor : pointer ; . /* за замовчуванням підписи приховані */.portfolio .label ( position : absolute ; width : 100% ; height : 40px ; bottom : -40px ; ) .portfolio .label-bg ( background : rgb (62 , 151 , 221 ) ; 0 ; % ; position : absolute ; top : 0 ; left : 0 ; ) . display : block ; font-size : 9px ; ) |
Container ( position: relative; width: 960px; margin: 0 auto; /* Ви зможете бачити ланцюг переходів при зміні розмірів вікна браузера */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o- transition: all 1s ease; transition: all 1s ease; ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li ( float:left; ) #filters li span ( display: block; padding:5px 20px;text-decoration:none;color:#666;/* додаємо трохи тіні для тексту */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; ) /* змінюємо фон категорії при наведенні */ li span:hover ( background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* фон активного пункту категорії */ #filters li span.active ( background: rgb(62, 151, 221) );text-shadow: 0 0 2px #004B7D; color:#fff; sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; ) .po rtfolio-wrapper ( overflow: hidden; position: relative !important; background: #666; cursor:pointer; ) .portfolio img ( max-width:100%; position: relative; ) /* за замовчуванням підпису приховані */ .portfolio .label ( position: absolute; width: 100%; height:40px; bottom:-40px; ) . portfolio .label-bg ( background: rgb(62, 151, 221); width: 100%; height:100%; position: absolute; top:0; left:0; ) .portfolio .label-text ( color:# off, position: relative, z-index:500; padding:5px 8px;
У другій частині, прямо в цій же таблиці стилів, за допомогою декількох медіа-запитів створимо альтернативні секції CSS. Щоб макет нашої сторінки коректно відображався на екранах різних мобільних пристроїв, додамо альтернативні правила CSS для різних екраніву ці секції. Тим самим ми запросто перевизначаємо будь-які правила, встановлені раніше в нашій CSS таблиці для звичайних браузерів і досягнемо тієї самої бажаної адаптивності.
| /* Планшет */ @media only screen and (min-width : 768px ) and (max-width : 959px ) ( .container ( width : 768px ; ) ) /* Мобільний - Примітка: Дизайн для ширини 320px*/@media only screen and (max-width : 767px ) ( .container ( width : 95% ; ) #portfoliolist .portfolio ( width : 48% ; margin : 1% ; ) ) /* Мобільний - Примітка: Дизайн для ширини 480px */@media only screen and (min-width : 480px ) and (max-width : 767px ) ( .container ( width : 70% ; ) ) |
/* Планшет */ @media only screen and (min-width: 768px) and (max-width: 959px) ( .container ( width: 768px; ) ) /* Мобільний - Примітка: Дизайн для ширини 320px*/ @media only screen and (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* Мобільний - Примітка: Дизайн для ширини 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) ( .container ( width: 70%; ) )
От і все. Наша чудова сторінка під ємною назвою «Портфоліо» готова, залишається лише наповнити її своїми не менш чудовими та визначними роботами, і виставити на огляд усьому світові. Можна ще тихо, скромно так, пишатися собою. Головне не перестаратися у цій справі.
Дивіться ще раз приклад і за необхідності забирайте вихідні засоби, на дозвіллі, в тихій домашній обстановці, зможете довести до досконалості цю роботу.
Під час створення уроку використовувався матеріал: . Оригінальна, чиста, щойно з-під пера автора, сторінка портфоліо, знаходиться там же.
Успіхи всім і з користю для тіла, провести залишки короткого літа!
Ми продовжуємо серію уроків з верстці сайту з нуля. На ми верстали шапку макету. Далі йде блок з однієї великої фотографії як тло. Цей блок перебуває у першому екрані браузера, отже у центрі уваги користувача. Тому поміщайте в цю область лише візуально привабливу картинку, яка передає суть сайту та важливу інформацію.
Як ви помітили, ми верстаємо макет портфоліоале не звичайного, а собаки. Однак окрім жартів, на виході вийде типовий шаблон у стилі популярного 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);
}
Результат роботи можна подивитися на
Роблю верстку сайтів.
Загальний досвід з веб-розробки 7 років (дизайн, верстка, програмування).
Основні навички: HTML, CSS, JS, SVG, jQuery, Node.js, WordPress, веб-дизайн (фотошоп, корел), git.
Іноді використовую: PHP, MySQL.
Переваги моєї верстки:
- Знаю як все працює від дизайну до сервера, тому верстка лаконічна та зрозуміла. Можу працювати в команді з вашим дизайнером та програмістом. Дизайнери отримують попіксельну відповідність верстки їх дизайну. А програмісти швидко прикручують верстку куди треба без жодних проблем.
- Роблю для комп'ютерів, планшетів та телефонів.
- Для всіх сучасних браузерів. Можу для старих, якщо потрібно від IE6:)
- Програмую все, що потрібно на сторінках: запити на сервер, анімації, інтерфейс, калькулятори.
– Пишу весь код руками.
– Код абсолютно валідний.
- Швидкість сторінок до 100% у Google PageSpeed.
Переваги роботи зі мною:
- Якщо домовилися, то роблю одразу без зволікань.
- Роблю швидко. Якість при цьому не страждає. Якщо хтось вам пообіцяє швидше, швидше за все, отримаєте незрівнянно гірше.
- Працюю зазвичай із постоплатою, але частинами. Зробив частину, ви перевірили оплату.
– Спокійно виправляю помилки після здачі роботи, якщо будуть.
- Якщо я щось не можу, ви дізнаєтесь про це до початку робіт, а не потім.
особливості:
- Роблю лише з нуля. Це може бути весь сайт, сторінка, блок на сторінці і таке інше. Тобто чужу верстку я не правлю.
- Не використовую Bootstrap. Він для прототипування або швидкого запускуа не для нормального дизайну.
- Роблю із дизайну у форматах PSD, AI або CDR. З-поміж інших не роблю.
Нижче наведені роботи є скріншотами з браузера реальної верстки, яку я виконав, а не дизайну. Багато чудових робіт не увійшли в портфоліо через небажання замовників.
Спершу зробимо розмітку нового документа HTML5. У розділі заголовка увімкнемо стиль сторінки. Бібліотека jQuery, плагін Quicksand та наш файл script.jsбудуть включені перед тегом body, що закривається:
index.html