###
  • Програми
  • Безпека
  • Новини
  • Цікаве
  • Поради
  • Новини
  • Огляди

    • Адаптивний html шаблон unofficial channels. Mabur — адаптивний шаблон для портфоліо

    22.07.2020 Цікаве

    Всі шаблони для свого сайту побудовані на сучасних версіях 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 та CSS3

    Bent – ​​чудовий безкоштовний шаблон сайту на html5 та css3. Чуйний дизайн, CSS3 анімація, паралакс прокрутка, навігації, що настроюється, та інші смакоти. Це чистий дизайн шаблон для сайтів, які хочуть використовувати збалансовану конструкцію, щоб гарантувати, що відвідувачі будуть насолоджуватися зовнішнім виглядом сайту, і в той же час чітко бачити його основний зміст.

    11. Triangle – безкоштовний чуйний багатоцільовий шаблон на HTML5 та CSS3

    Triangle ексклюзивний творчий 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 та CSS3

    Sublime - чистий і красивий шаблон сайту на 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 та CSS3

    Infusion - це чудовий приклад шаблону сайту в стандартах HTML5 та CSS3, який спеціально розроблений для створення бізнес-портфоліо. Багата функціональність цього шаблону дозволяє ефективно працювати з клієнтами та залучати нових.

    29. Yebo - корпоративний шаблон сайту на HTML5 та CSS3

    Цей високоякісний шаблон сайту у плоскому стилі чудово підійде для будь-якого корпоративного сайту. Адаптивний дизайн, маса налаштувань та можливостей для редагування.

    30. Twenty - ефектний HTML5 та CSS3 шаблон сайту з паралаксом

    Цей унікальний та дуже красивий шаблон сайту з ефектом паралаксу не залишить нікого байдужим. Односторінковий шаблонпобудований на чистому HTML5 та CSS3 з адаптивною версткою, вражаючими фонами, підтримкою соціальних медіа та ін.

    31. Urbanic – відмінний HTML5 та CSS3 шаблон сайту на Bootstrap

    Urbanic - новий і класний HTML5 і CSS3 шаблон сайту, побудований на движку Bootstrap. Прекрасно підходить, щоб одразу почати створювати свій сайт без особливих проблем. Шаблон відмінно адаптований до будь-яких розмірів екранів.

    32. Design Showcase - HTML5 шаблон сайту для портфоліо

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

    33. Mamba One - простий та стильний шаблон сайту на HTML5 та CSS3

    Mamba One – це приклад простого, але стильного шаблону сайту для створення односторінника. Сумісний з усіма сучасними браузерамиі скрізь відображатиметься адекватно.

    34. KreativePixel – безкоштовний шаблон сайту для фотографів

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

    35. Retina Ready Responsive App - безкоштовний шаблон лендингу на HTML5 та CSS3

    Як випливає з назви, цей чудовий шаблон сайту не тільки ідеально заточений під цільові сторінки, але й відповідає новим мобільним віянням, особливо щодо чіткості відображення на пристроях з Retina дисплеями.

    36. Brushed - чуйний HTML5 і CSS3 шаблон сайту на движку Bootstrap

    Brushed - чуйний, безкоштовний 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 та CSS3

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

    48. Miniport - повністю чуйний HTML5 шаблон сайту у стилі мінімалізму

    Відмінний шаблон сайту в мінімальному стилі на HTML5. Прекрасно підійде як для особистого сайту/блогу, так і для невеликого корпоративного сайту односторінника або як сайт-візитка.

    49. Verti - просторий та вільний чуйний шаблон сайту на HTML5

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

    50. ZeroFour - вражаючий та стильний шаблон сайту на HTML5 та CSS3

    І останній у списку, але не останній за якістю та зовнішньою ефектністю шаблон сайту - ZeroFour. Стильний дизайн, дуже гарне меню, ідеально вивірені форми та кнопки, красиві іконки та багато іншого. І все це абсолютно безкоштовно!

    Сподіваюся, ви знайшли для себе щось, що підходить серед цих чудових шаблонів сайтів на HTML5 і CSS3. Успіхів!

    Додайте до закладок, щоб потім швидко знайти.

    ПС: Якщо не можете визначитися з вибором, прочитайте статтю «Я не знаю, чого я хочу» . Буде корисним.

    Адаптивна версткасайту дозволяє веб-сторінкам автоматично підлаштовуватися під екрани планшетів та смартфонів. Мобільний інтернет-трафік зростає з кожним роком і, щоб ефективно обробляти цей трафік, потрібно пропонувати користувачам адаптивні сайти зі зручним інтерфейсом.

    Пошукові системи використовують низку критеріїв для оцінки адаптивності сайту під час перегляду на мобільних пристроях. Google намагається спростити користування Інтернетом для власників смартфонів та планшетів, відзначаючи в мобільній видачі адаптовані під мобільні пристрої сайти спеціальною позначкою mobile-friendly. В Яндексі також працює алгоритм, який надає перевагу сайтам з мобільною/адаптивною версією для користувачів у мобільному пошуку.

    Перевірити відображення сторінки на мобільних пристроях можна на сервісах та .


    Мал. 1. Мобільна видача Яндекса та Google з позначкою про дружелюбність сайту до мобільних пристроїв Що таке адаптивна верстка

    Адаптивна верстка передбачає відсутність горизонтальної смуги прокручування і областей, що масштабуються при перегляді на будь-якому пристрої, читабельний текст і великі області для клікабельних елементів. За допомогою медіазапитів можна керувати компонуванням та розташуванням блоків на сторінці, перебудовуючи шаблон таким чином, щоб він адаптувався під різні розміриекранів пристроїв.

    Основні прийоми створення адаптивного сайту наведено у статті. Для чуйного дизайну ширина основного контейнера сайту задається в %, при цьому вона може дорівнювати як 100% ширини вікна браузера, так і менше. Ширина стовпців сітки також задається у %. В адаптивному дизайні ширина основного контейнера та стовпців сітки фіксується за допомогою значень px .

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

    Верстка головної сторінки

    Сторінка складається з трьох основних блоків: верхній колонтитул (шапка), контейнер-обгортка для основного вмісту та сайдбару, та нижній колонтитул (футер). Як переломні точки дизайну візьмемо 768px і 480px .

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


    Мал. 2. Приклад адаптивної верстки 1. Метатеги та розділ

    1) Додамо в розділ необхідні файли - посилання на використовувані шрифти, бібліотеку jQuery, а також плагін prefixfree (щоб не писати для властивостей браузерні префікси):

    Адаптивна верстка сайту

    2. Шапка сторінки

    У шапці сторінки помістимо такі елементи-контейнери:
    логотип