Всі шаблони для свого сайту побудовані на сучасних версіях HTML5 і CSS3. Крім того, автори застосовують такі модні фішки, як плоский дизайн, чуйний дизайн, адаптивна верстка, слайдери на jQuery, анімація на CSS3 та ін. Тобто якщо ви шукаєте шаблон мобільного сайту, то можете вибрати будь-який з представлених. Красиві html5 шаблони 2017, хоч і безкоштовні, але виглядають на рівні преміум-класу.
Тут ви знайдете понад 50 безкоштовних адаптивних шаблонів сайтів високої якостіна HTML5 і CSS3, які можна використовувати як для нових сайтів, так і для переробки вже існуючих. Стильні шаблони сайтів- це те що вам треба!
Оновлено 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. Успіхів!
Додайте до закладок, щоб потім швидко знайти.
ПС: Якщо не можете визначитися з вибором, прочитайте статтю «Я не знаю, чого я хочу» . Буде корисним.
Вам терміново потрібно зробити сайт, використовуючи лише HTML, та викласти його в інтернет? Тоді вам не важко скопіювати готовий код і дотримуватися моїх інструкцій.
Правда повноцінний ресурс, із застосуванням однієї мови програмування, зробити важко, але сайт-візитку з декількох сторінок, цілком можливо.
Якщо у когось саме він є метою, і немає бажання вивчати інші мови, то ця стаття для них.
Коротше, в самописному виконанні без використання CMS простіше вже нічого не існує.
А для тих кому потрібно щось по крутіше, в кінці статті є посилання на статті з кодом блочного шаблону, використанням CSS, та кодом динамічного сайту з використанням PHP.
Сайт на чистому html зробимо прямо на цій сторінці, так би мовити – сайт у сайті, цілком робочий та готовий до заповнення контентом.
Розділимо весь процес на три частини.
1. Створення директорії сайту на комп'ютері.
2. Створення сайту.
3. Переклад сайту з нашого комп'ютера на хостинг, тобто в інтернет.
Створення директорії сайту на своєму комп'ютері
Перший пункт найпростіший. Про те, як створити директорію дуже наочно показано у статті (всі посилання з цієї сторінки відкриваються в окремому вікні, щоб не загубитися).
А що, і в яку папку покласти, я докладно покажу після коду головної сторінки, щоб було вже з чим йти в директорію.
Потім приступимо до другого пункту, творчого.
Створення шаблону сайту
Для створення шаблону буде потрібно редактор, у який потрібно буде вставити наведений нижче код.
Це може бути як простий віндовський Блокнот, так і будь-який інший текстовий редактор.
За основу шаблону візьмемо багатошарову HTML таблицю. Раніше, до появи CSS всі сайти писалися таблицями, тепер більш популярною стала блокова верстка.
Але й досі таблічна структура не застаріла і з успіхом застосовується.
Наприклад інвестиційна CMS H-script із найскладнішим функціоналом, повністю зверстана на основі таблиць.
Отже, такий сайт, з мінімальним оформленням.
Як надалі оформлювати таблиці, дуже докладно показано у статті.
|
<!--Створюємо таблицю контейнер, якою задаємо наступне
оформлення:
border="1" - рамка навколо контейнера. Збільшивши кількість, можна збільшити товщину рамки.
align="center" - розміщуємо контейнер центром екрана.
rules="rows" - прибираємо подвійну рамку.
style="width:60%;" - додаємо стильові властивості, що робить
контейнер і весь сайт "гумовим".
Зробити повноцінний адаптивний дизайн, цим способом неможливо.>
|
Новые теги HTML5В HTML5 для структуры кода введено несколько новых тегов:  |