Π”ΠΈΠ·Π°ΠΉΠ½

Π”ΠΈΠ·Π°ΠΉΠ½ сайта html – БСсплатныС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ HTML5 CSS3 ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ сайтов ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ²

17.08.2020

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠšΡ€ΡƒΡ‚Π΅ΠΉΡˆΠΈΠ΅ CSS ΠΈ HTML ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Material Design Π² дСйствии

ΠœΡ‹ ΡƒΠ·Π½Π°Π»ΠΈ ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Π»ΠΈΒ Material Design нСсколько мСсяцСв Π½Π°Π·Π°Π΄. И ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ этот ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ язык ΠΎΡ‚ Google становится всё большС популярным. И сСйчас ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ всё большС ΠΈ большС сайтом ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ этот ΡΡ‚ΠΈΠ»ΡŒ. 2015 Π³ΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΠ΄ΠΎΠΌΒ Material Design ΠΈ ΠΎΠ½ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π°ΠΌ понравится.

А Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Ρ‡Ρ‚ΠΎ способСн этот ΡΡ‚ΠΈΠ»ΡŒ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ сСгодня с Π’Π°ΠΌΠΈ взглянСм Π½Π° нСсколько ΠΎΡ‡Π΅Π½ΡŒ популярных ΠΈ ΠΊΡ€ΡƒΡ‚Ρ‹Ρ… CSS ΠΈ HTML ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π² дСйствии, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π²ΠΎ всСх Ρ€Π°Π±ΠΎΡ‚Π°Ρ… присутствуСт анимация, ΠΈ смотрится это ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ прСвосходно.

ΠžΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ спасибо http://speckyboy.comΒ ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΊ просмотру:

ДСмонстрация ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

ΠšΡ€Π°ΡΠΈΠ²Π°Ρ дСмонстрация ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠ°ΠΊΠΈΠ΅ установлСны Π½Π° Π½ΠΎΠ²Ρ‹ΠΉΒ Android Lollipop, ΠΎΡ‡Π΅Π½ΡŒ ΠΊΡ€ΡƒΡ‚ΠΎ ΠΈ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ смотрится.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Анимированная сСтка

Π­Ρ‚Π° сСтка сдСлана с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ Π² стилС Material Design, Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΠ»ΠΈΡ‚ΠΊΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡŽΡ‚ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ добавляСтся Π΅Π»Π΅ замСтная Ρ‚Π΅Π½ΡŒ.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

НСсколько иконок

Набор ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Π² стилС Material Design

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Анимация для ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ

ΠšΡ€Π°ΡΠΈΠ²Π°Ρ анимация, которая большС ΠΏΠΎΠ΄ΠΎΠΉΠ΄Ρ‘Ρ‚ для ΠΊΠ°ΠΊΠΈΡ… Π»ΠΈΠ±ΠΎ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΉ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ Π² стилС Material Design.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Π‘Π΅Ρ‚ΠΊΠ° с классным эффСктом

ΠŸΡ€ΠΎΡΡ‚Π°Ρ сСтка с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Π½ΠΎ Π΅Ρ‘ Π±Π»ΠΎΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ интСрСсный эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Π‘Π°Ρ€ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Ρ‹ΠΉ ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±Π°Ρ€ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ страница загруТаСтся. Он Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ Π² стилС Material Design ΠΈ находится свСрху страницы.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅

ΠšΡ€Π°ΡΠΈΠ²ΠΎΠ΅ ΠΈ простоС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π² стилС Material Design, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΊΠ»ΠΈΠΊΠ½Π΅Ρ‚ Π½Π° ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Π€ΠΎΡ€ΠΌΠ° Π²Ρ…ΠΎΠ΄Π°

ΠŸΡ€ΠΎΡΡ‚Π°Ρ ΠΈ ΡΡ‚ΠΈΠ»ΡŒΠ½Π°Ρ Ρ„ΠΎΡ€ΠΌΠ° Π²Ρ…ΠΎΠ΄Π° выполнСнная Π² стилС Material Design

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Анимация ΠΏΡ€ΠΈ пСрСлистывании

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ срабатываСт анимация ΠΏΡ€ΠΈ пСрСлистывании Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Навигация

ΠžΡ‡Π΅Π½ΡŒ красивая ΠΈ простая навигация выполнСнная Π² стилС Material Design с ΠΊΡ€ΡƒΡ‚ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

МСню с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€

АнимационноС мСню с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

ΠšΡ€ΡƒΠ³ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π½Π° сайт ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

UI ΠΎΡ‚Β Chrome

CSS ΠΌΠ°ΠΊΠ΅Ρ‚Β Chrome Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ³ΠΎ Π² стилС Material Design

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Π’Π°Π±Ρ‹

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ Ρ‚Π°Π±Ρ‹ Π² стилС Material Design с классной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

beloweb.ru

30 одностраничных шаблонов Π½Π° html для студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° / HTML ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ / ΠŸΠΎΡΡ‚ΠΎΠ²ΠΎΠΉ

БСгодняшняя ΡΡ‚Π°Ρ‚ΡŒΡ посвящСна HTML шаблонам для создания одностраничника студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ шаблон ΠΏΠΎ своСму ΡƒΠ½ΠΈΠΊΠ°Π»Π΅Π½. Π•Π΄ΠΈΠ½ΠΎΠ³ΠΎ стандарта Π½Π΅ сущСствуСт ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΏΠΎ своСму. Одни Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ с Π»Π΅Π³ΠΊΠΈΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π° Ρ‚Ρ€Π΅Ρ‚ΡŒΠΈ ΡΠΎΠ²ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ элСмСнты ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠΌΠ΅ΡŽΡ‚ нСстандартныС гСомСтричСскиС Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ. Но Π΅ΡΡ‚ΡŒ ΠΈ схоТиС элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΏΠΎΡ‡Ρ‚ΠΈ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ

одностраничникС Π²Π΅Π±-студии. По сути Π² ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ… ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ эти Π±Π»ΠΎΠΊΠΈ:

  • ОписаниС
  • ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅ΠΌΡ‹Π΅ услуги ΠΈ особСнности
  • ΠŸΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Ρ€Π°Π±ΠΎΡ‚
  • Бписок ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΈΡ… ΠΎΡ‚Π·Ρ‹Π²Ρ‹
  • ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Π°Ρ информация
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊ со списком сотрудников ΠΈ Π±Π»ΠΎΠ³ с интСрСсными новостями. Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ страницы ΡƒΠ·Π½Π°Ρ‚ΡŒ всю Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ студии, расцСнках ΠΈ ΠΏΡ€ΠΈΠ±Π»ΠΈΠ·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… сроках исполнСния (Ссли ΡƒΠΊΠ°Π·Π°Π½ΠΎ) ΠΈ ΡΠ²ΡΠ·Π°Ρ‚ΡŒΡΡ с Π²Π°ΠΌΠΈ, Ссли Π΅ΠΌΡƒ всС понравится.
Π¨Π°Π±Π»ΠΎΠ½Ρ‹ созданы Π½Π° HTML5, CSS3, Π° Ρ‚Π°ΠΊΠΆΠ΅ jQuery ΠΈ
Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ΅ Twitter
Bootstrap. ВсС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ сайт ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° любом устройствС. ΠŸΠΎΡ‡Ρ‚ΠΈ всС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡŽΡ‚ΡΡ бСсплатно, ΠΈΠ½ΠΎΠ³Π΄Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ссылку Π½Π° ΠΏΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Π²ΠΈΠ΄Π΅ Ρ‡Π°ΡˆΠ΅Ρ‡ΠΊΠΈ ΠΊΠΎΡ„Π΅ :), Π½ΠΎ Π½Π΅ Π½Π°ΡΡ‚Π°ΠΈΠ²Π°ΡŽΡ‚ Π½Π° этом.
ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Π΅ΠΌ ΠΊ ΠΎΠ±Π·ΠΎΡ€Ρƒ, ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ Π½Π΅ малая ΠΈ Π΅ΡΡ‚ΡŒ ΠΈΠ· Ρ‡Π΅Π³ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ. Π’Π°ΠΊΠΆΠ΅ оставляйтС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° Π³Ρ€ΡƒΠΏΠΏΡƒ Π²ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅ ΠΈ рассылку.

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

Conquer
БСсплатный шаблон для ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Π˜ΠΌΠ΅Π΅Ρ‚ Π³Π°Π»Π΅Ρ€Π΅ΡŽ с описаниями Ρ€Π°Π±ΠΎΡ‚ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ изобраТСния Π² слайд-ΡˆΠΎΡƒ. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана, список сотрудников ΠΈ контактная информация.

Bright Heaven
Чистый ΠΈ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ΠΉ шаблон. Π’ Π½Π΅ΠΌ Π΅ΡΡ‚ΡŒ полноэкранный слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, masonry галСрСя с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты.

Xenon
БСсплатный одностраничный шаблон с косыми гСомСтричСскими Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ. Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ Π² красной, синСй, ΠΊΠΎΡ€ΠΈΡ‡Π½Π΅Π²ΠΎΠΉ ΠΈ Π±Π΅Π»ΠΎΠΉ расцвСткС. ГалСрСя ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚. Π’ Ρ†Π΅Π»ΠΎΠΌ интСрСсноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для сайта.

Shuffle
ΠžΠ΄Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½ΠΈΠΊ для Π²Π΅Π± студии. Π›Π΅Π³ΠΊΠΈΠΉ ΠΈ чистый шаблон, быстро загруТаСтся. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π²Π½Π°Ρ‡Π°Π»Π΅ ΠΈ Π² Π³Π°Π»Π΅Ρ€Π΅Π΅, Π±Π»ΠΎΠΊΠΈ с описаниСм ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, услугами ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ. Π¨Π°Π±Π»ΠΎΠ½ сдСлан ΠΎΡ‡Π΅Π½ΡŒ качСствСнно.

Flat Asphalt
ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ одностраничный HTML5 шаблон Π² стилС Flat. ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ: parallax-эффСкт, анимация ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅, плоскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ, плавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚ ΠΏΠΎ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ°ΠΌ, Goolge Font ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Drifolio
Π¨Π°Π±Π»ΠΎΠ½ для создания ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ фрилансСра. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ панСль-Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, плоскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ, яркиС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты.

Photographer
Π­Ρ‚ΠΎΡ‚ шаблон ΡƒΠΆΠ΅ Ρ„ΠΈΠ³ΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Π» Π² ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ΅ для создания ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„Π°. Но ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΡ‚ΠΈ ΠΈ для студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‚Π°ΠΊ-ΠΊΠ°ΠΊ содСрТит всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ элСмСнты ΠΈ мноТСство особСнностСй. CSS3 анимация, слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, навигация с ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

Flex
Π¨Π°Π±Π»ΠΎΠ½ HTML5 с hover эффСктами, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с lightbox ΠΈ слайдСром. Π’Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ полноэкранный слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ просто ΠΈ качСствСнно, быстро загруТаСтся ΠΈ ΠΏΡ€ΠΈΠ²Π΅Ρ‚Π»ΠΈΠ²ΠΎ смотрится.

Dreams
Π¨Π°Π±Π»ΠΎΠ½ одностраничника Π² плоском стилС для ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ полноэкранноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, интСрСсно Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ «О нас».

Creative Idea
ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Landing page шаблон с косыми гСомСтричСскими Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ Π²Ρ‹ΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, контактная Ρ„ΠΎΡ€ΠΌΠ° ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ для Π²Π΅Π±-студии.

Molly
Π¨Π°Π±Π»ΠΎΠ½ одностраничника Π² плоском стилС для студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ полноэкранноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ скроллингС, Π³Π°Π»Π΅Ρ€Π΅ΡŽ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚, панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, Π±Π»ΠΎΠ³, ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ ΠΈ Π΄Ρ€.

Unique
Π¨Π°Π±Π»ΠΎΠ½ одностраничника Π² соврСмСнном стилС Π² красном, Π±Π΅Π»ΠΎΠΌ ΠΈ Ρ‡Π΅Ρ€Π½ΠΎΠΌ Ρ†Π²Π΅Ρ‚Π°Ρ…. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Google Fonts, ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Font Awesome, ΠΏΠ»Π°Π½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ для студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‚Π°ΠΊ ΠΈ для Π»Π΅Π½Π΄ΠΈΠ½Π³Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ фрилансСра.

Vibrant
One page шаблон Π² соврСмСнном стилС. Π’ описании услуг ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ плоскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π² ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ присутствуСт Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ ΠΏΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌ. Π₯ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Timeline
Π¨Π°Π±Π»ΠΎΠ½ Π² Π·Π΅Π»Π΅Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚Π°Ρ…. ΠŸΡ€ΠΈΠΊΠΎΠ»ΡŒΠ½Π°Ρ анимация ΠΈ прорисовка элСмСнтов ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы. Π›Π΅Π³ΠΊΠΈΠΉ, чистый, быстро загруТаСтся.

Epils Agency
ΠžΠ΄Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½ΠΈΠΊ для студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² плоском стилС. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ полноэкранноС мСню с ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚ ΠΏΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌ. плоскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ. Активный Ρ†Π²Π΅Ρ‚ Π½Π° сайтС β€” Π·Π΅Π»Π΅Π½Ρ‹ΠΉ.

Pink
Π¨Π°Π±Π»ΠΎΠ½ одностраничника Π² Ρ€ΠΎΠ·ΠΎΠ²ΠΎΠΌ Ρ†Π²Π΅Ρ‚Π΅. Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, lightbox ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. плоскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ с услугами. Π’Π°ΠΊΠΆΠ΅ Π±Π»ΠΎΠΊ с ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

Spirit8
Π¨Π°Π±Π»ΠΎΠ½ HTML Π² соврСмСнном стилС. Π‘Π»ΠΎΠΊΠΈ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ ΠΈ Π±Π΅Π»Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ Ρ‡Π΅Ρ€Π΅Π΄ΡƒΡŽΡ‚ΡΡ. Π˜ΠΌΠ΅Π΅Ρ‚ полноэкранноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚ ΠΏΠΎ Ρ‚ΠΈΠΏΡƒ ΠΈ Π±Π»ΠΎΠΊΠΈ с описаниСм ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, услугами, ΠΎΡ‚Π·Ρ‹Π²Π°ΠΌΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠΎΠΉ.

KreFolio
ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ одностраничник для ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ фрилансСра. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ полноэкранный слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ полноэкранноС мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Активный Ρ†Π²Π΅Ρ‚ шаблона β€” красный.

SinglePro
Π’Π΅ΠΌΠ° одностраничного сайта Π² соврСмСнном стилС. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ полноэкранный слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, 10 Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅ΠΌ, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ ΠΏΠΎ Ρ‚Π΅ΠΌΠ°ΠΌ, прайс Ρ†Π΅Π½, Π±Π»ΠΎΠ³ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ.

Arcadia
ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ одностраничник для студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Π°Ρ прСзСнтация: Π½Π° полноэкранном ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚Π°ΡŽΡ‰ΠΈΠΉΡΡ тСкст, Ρ‡Ρ‚ΠΎ сходу ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Π˜ΠΌΠ΅Π΅Ρ‚ Π²Ρ‹Π΄Π²ΠΈΠ³Π°ΡŽΡ‰ΡƒΡŽΡΡ слСва слайд-панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° элСмСнты Π² услугах, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Π±Π»ΠΎΠΊ со списком ΠΏΠ°Ρ€Ρ‚Π½Π΅Ρ€ΠΎΠ², сотрудников коммСнтариями ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠΎΠΉ.

Fimply
ΠšΠ»Π°ΡΡΠ½Ρ‹ΠΉ, чистый шаблон одностраничника Π² соврСмСнном стилС. Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ полноэкранный слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Π±Π»ΠΎΠ³, прайс Ρ†Π΅Π½ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ.

OnePage
ΠžΠ΄Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½ΠΈΠΊ Π² стилС ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ с Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Β«ΠΎ нас», ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠΎΠΉ. Π˜ΠΌΠ΅Π΅Ρ‚ полноэкранноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Parallax-эффСктом. Навигация появляСтся свСрху ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы. Π¨Π°Π±Π»ΠΎΠ½ качСствСнный ΠΈ простой.

Casablanca
Π‘Π»ΠΎΠΊΠΈ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ ΠΈ Π±Π΅Π»Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ Ρ‡Π΅Ρ€Π΅Π΄ΡƒΡŽΡ‚ΡΡ. Π£ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΅ΡΡ‚ΡŒ анимация, Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ полноэкранноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π²Ρ‹Π΄Π²ΠΈΠ³Π°ΡŽΡ‰ΡƒΡŽΡΡ слСва слайд-панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Π±Π»ΠΎΠΊΠΈ about, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹, услуги ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹.

Ungart
ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ ΠΈ простой одностраничный шаблон для студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Бостоит ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ²: услуги, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ ΠΏΠΎ Ρ‚Π΅ΠΌΠ°ΠΌ, сотрудники со ΡΠΌΠ΅ΡˆΠ½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€ΠΈΠΊΠ°Ρ‚ΡƒΡ€Π°ΠΌΠΈ ΠΈ контактная Ρ„ΠΎΡ€ΠΌΠ°.

Ufolio
ΠžΠ΄Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹ΠΉ шаблон Π² плоском стилС. Π‘Π»ΠΎΠΊΠΈ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Β«ΠΎ нас», услуги, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹. Π₯ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для landing page студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Kasper
ΠžΠ΄Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹ΠΉ шаблон Π² стилС ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ слайдСр, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² ΠΈ приятноС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅. Π₯ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

Brandi
HTML5 шаблон одностраничника. Π˜ΠΌΠ΅Π΅Ρ‚ полноэкранноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, описания ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Blue
ΠžΠ΄Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½ΠΈΠΊ для студии Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² синих ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠ°Ρ…. На страничкС Π΅ΡΡ‚ΡŒ полноэкранный слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, навигация с ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, плоскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π¨Π°Π±Π»ΠΎΠ½ сдСлан Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ ΠΈ качСствСнно.

postovoy.net

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ простой сайт. Π§Π°ΡΡ‚ΡŒ 3. ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ с использованиСм CSS β€Ή Asterial Web. IT Π±Π»ΠΎΠ³

Π’ послСднСй части ΡƒΡ€ΠΎΠΊΠ° ΠΏΠΎ созданию html страницы рассмотрим использованиС каскадных Ρ‚Π°Π±Π»ΠΈΡ† стилСй — Cascading Style Sheets, сокращСнно CSS. Π“Π»Π°Π²Π½Ρ‹ΠΌ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ css являСтся ΠΎΡ‚Π΄Π΅Π»Π΅Π½ΠΈΠ΅ внСшнСго оформлСния страницы ΠΎΡ‚ Π΅Π΅ структуры, поэтому css ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ„Π°ΠΉΠ»ΠΎΠΌ, Π° Π² основном Ρ„Π°ΠΉΠ»Π΅, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π΅ΠΌ структуру (Π² нашСм случаС это Ρ„Π°ΠΉΠ» index.html), ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ лишь html-Ρ‚Π΅Π³ΠΈ, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠ΅ Π·Π° Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ страницы.

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π² ΠΏΠ°ΠΏΠΊΠ΅ Test Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ style.css. Π‘Π½Π°Ρ‡Π°Π»Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ css Ρ„Π°ΠΉΠ» Π² нашСм основном Ρ„Π°ΠΉΠ»Π΅ index.html. ПослС указания ссылки Π½Π° Ρ„Π°ΠΉΠ» стилСй, html-Ρ„Π°ΠΉΠ» ΡƒΠΆΠ΅ смоТСт Π±Ρ€Π°Ρ‚ΡŒ стили оформлСния ΠΈΠ· Π½Π΅Π³ΠΎ. ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ css-Ρ„Π°ΠΉΠ»ΠΎΠ² происходит Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ <head></head>. Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΡƒΡ€ΠΎΠΊΠ΅ ΡƒΠΆΠ΅ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡŒ, Ρ‡Ρ‚ΠΎ этот Ρ€Π°Π·Π΄Π΅Π» Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ, ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ для ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ стилСй, скриптов, Π° Ρ‚Π°ΠΊΠΆΠ΅ указания Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° страницы, ΠΌΠ΅Ρ‚Π°-Ρ‚Π΅Π³ΠΎΠ² ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ… элСмСнтов страницы. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π½Π°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ <head> ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку:

<link rel="stylesheet" href="style.css">

Π Π°Π·Π΄Π΅Π» <head> Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

<link rel="stylesheet" href="style.css">
<title>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ страницы</title>
</head>

Π’Π°ΠΊΠΎΠΉ ΠΏΡƒΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли Ρ„Π°ΠΉΠ» стилСй Π»Π΅ΠΆΠΈΡ‚ Π² ΠΏΠ°ΠΏΠΊΠ΅ вмСстС с Ρ„Π°ΠΉΠ»ΠΎΠΌ index.html, Ссли ΠΆΠ΅ ΠΎΠ½ Π»Π΅ΠΆΠΈΡ‚ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅, Ρ‚ΠΎ Π² ссылкС Π½Π°Π΄ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ Π½Π΅ΠΌΡƒ.

Π˜Ρ‚Π°ΠΊ, css ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ пСрСнСсСм ΡƒΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ΡΡ стили Π² Ρ„Π°ΠΉΠ» style.css. Index.html Π±ΡƒΠ΄Π΅Ρ‚ снова Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ практичСски ΠΊΠ°ΠΊ Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ части ΡƒΡ€ΠΎΠΊΠ°, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠ΄Π½ΠΎΠΉ строчки, которая ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ css.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Ρ„Π°ΠΉΠ»Π° index.html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ страницы</title>
</head>
<body>
<div>
<a href="http://ссылка Π½Π° сайт.ru"><img src="bird.png" alt="header"/>Π¨Π°ΠΏΠΊΠ° сайта. Π”ΠΎΠ±Ρ€ΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° ΠΌΠΎΠΉ сайт</a>
Β Β  Β </div>
<div>
Β Β  Β <p>ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚. Π—Π΄Π΅ΡΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ любая информация.</p>
</div>
<div>
Π€ΡƒΡ‚Π΅Ρ€. Подвал. НиТняя Ρ‡Π°ΡΡ‚ΡŒ сайта
</div>
</body>
</html>

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Ρ„Π°ΠΉΠ»Π° style.css. Как Π²ΠΈΠ΄ΠΈΠΌ, всС стили Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΠ±ΡŠΡΠ²Π»ΡΡŽΡ‚ΡΡ Π² Π½Π΅ΠΌ:

body {
margin: 0;
padding: 0;
}

#header {
height: 200px;Β Β  Β 
}

#content {
height: 300px;
background-color: #B0E0E6;
border: 1px solid #999;
font-size: 12pt;Β Β  Β 
}

#footer {
height: 200px;
text-align: center;
font-size: 14pt;
}

Π’ Π½Π°Ρ‡Π°Π»Π΅ Ρ„Π°ΠΉΠ»Π° ΠΈΠ΄Π΅Ρ‚ ΠΎΠ±Π½ΡƒΠ»Π΅Π½ΠΈΠ΅ Ρ‚Π΅Π³Π° <body>, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ элСмСнты ΠΈΠΌΠ΅ΡŽΡ‚ прСдустановлСнныС отступы, Π΄Π° ΠΈ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ.

Бинтаксис css прост β€” сначала ΠΈΠ΄Π΅Ρ‚ имя html-Ρ‚Π΅Π³Π°, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ описываСтся ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅, Π° Π·Π°Ρ‚Π΅ΠΌ Π² Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобках β€” нСпосрСдствСнно сам ΡΡ‚ΠΈΠ»ΡŒ оформлСния ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ с Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ с запятой Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ свойства. Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ body, html ΠΏΠΈΡˆΡƒΡ‚ΡΡ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π·Π½Π°ΠΊΠΎΠ², Ссли ΠΌΡ‹ описываСм элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ записывали ΠΊΠ°ΠΊ <div>, Ρ‚ΠΎ Π² Π½Π°Ρ‡Π°Π»Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠ° — #, Ссли <div>, Π² Π½Π°Ρ‡Π°Π»Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΡ‡ΠΊΠ°, Π½ΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡƒΡ€ΠΎΠΊΠ΅ классов Π½Π΅Ρ‚, поэтому ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ Π½ΠΈΡ….

Если сСйчас ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΎΠ±Π° Ρ„Π°ΠΉΠ»Π° ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» index.html Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‚ΠΎ ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ измСнился. Π­Ρ‚ΠΎΠ³ΠΎ ΠΈ слСдовало ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Π½Π΅ измСнилось, Π° просто Π±Ρ‹Π»ΠΎ пСрСнСсСно Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ». Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒΡΡ с каскадными Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ стилСй Π·Π°Π΄Π°Π΄ΠΈΠΌ Ρ„ΠΎΠ½ для шапки ΠΈ Ρ„ΡƒΡ‚Π΅Ρ€Π°. ΠŸΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ для #header Π½ΠΎΠ²ΠΎΠ΅ свойство Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобок:

background: url('header.jpg') repeat-x;

Π€Π°ΠΉΠ» header.jpg ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Ρ‚ΡƒΡ‚, послС скачивания Π΅Π³ΠΎ слСдуСт ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π² ΠΏΠ°ΠΏΠΊΡƒ Test.

Π’Π°ΠΊΠΆΠ΅ установим Ρ„ΠΎΠ½ ΠΈ для Ρ„ΡƒΡ‚Π΅Ρ€Π°. Π’ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобках #footer пишСм:

background: url('footer.jpg') repeat-x;

Π€Π°ΠΉΠ» footer.jpg ΠΊΠ°Ρ‡Π°Π΅ΠΌ Ρ‚ΡƒΡ‚ ΠΈ Ρ‚ΠΎΠΆΠ΅ ΠΊΠ»Π°Π΄Π΅ΠΌ Π² ΠΏΠ°ΠΏΠΊΡƒ с ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ.

Рядом с ΠΏΡƒΡ‚Π΅ΠΌ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ находится ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ repeat-x, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.
Π’ ΠΈΡ‚ΠΎΠ³Π΅ Ρ„Π°ΠΉΠ» style.css Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²ΠΈΠ΄:

body {
margin: 0;
padding: 0;
}

#header {
height: 200px;Β Β  Β 
background: url('header.jpg') repeat-x;
}

#content {
height: 300px;
background-color: #B0E0E6;
border: 1px solid #999;
font-size: 12pt;Β Β  Β 
}

#footer {
height: 200px;
background: url('footer.jpg') repeat-x;Β Β  Β 
text-align: center;
font-size: 14pt;
}


Π’Π΅ΠΏΠ΅Ρ€ΡŒ страничка практичСски Π³ΠΎΡ‚ΠΎΠ²Π°, Π½ΠΎ тСкст Π² Π±Π»ΠΎΠΊΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° находится слишком Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ Π»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅ Π±Π»ΠΎΠΊΠ°, поэтому Π»ΡƒΡ‡ΡˆΠ΅ Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΠΌΡƒ отступ. Π’Π°ΠΊ ΠΊΠ°ΠΊ тСкст Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ Π² Ρ‚Π΅Π³ <p>, Π·Π½Π°Ρ‡ΠΈΡ‚ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ Π½Π°Π΄ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Ρ‚Π΅Π³Ρƒ <p>. ΠŸΡ€ΠΈ этом Ρ‚Π΅Π³ <p> располоТСн Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ° content, ΠΈ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

#content p {
margin: 20px;Β Β  Β 
}

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΠΌ Ρ„Π°ΠΉΠ» style.css, ΠΎΠ±Π½ΠΎΠ²ΠΈΠΌ страничку Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΈ Ссли всС Π±Ρ‹Π»ΠΎ сдСлано ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, Ρ‚ΠΎ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, страница выглядит совсСм простой, ΠΈ Π΅Π΅ структура ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Π°, Π½ΠΎ ΠΏΡ€ΠΈ этом ΠΎΠ½Π° ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ страницСй сайта, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ для этого всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅. Если ΠΆΠ΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ ΡƒΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ структуру ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css, Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΉΡ‚ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ вСсьма Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎΠ΅.

Π’ ΠΊΠΎΠ½Ρ†Π΅ ΡƒΡ€ΠΎΠΊΠ° Π²Ρ‹ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽ Π°Ρ€Ρ…ΠΈΠ² со всСми Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ, Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ для Π΅Π³ΠΎ выполнСния, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡΠ²Π΅Ρ€ΠΈΡ‚ΡŒΡΡ с Π½ΠΈΠΌΠΈ ΠΈ ΠΏΡ€ΠΈ нСобходимости ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΡƒΡ‰Π΅Π½Π½Ρ‹Π΅ ошибки.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π°Ρ€Ρ…ΠΈΠ²

ΠŸΠ΅Ρ€Π²Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΡƒΡ€ΠΎΠΊΠ° —Β ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Вторая Ρ‡Π°ΡΡ‚ΡŒ ΡƒΡ€ΠΎΠΊΠ° — ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ интСрСсны ΡΡ‚Π°Ρ‚ΡŒΠΈ:

asterial.ru

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *