musicWebTemplate

Бесплатный шаблон веб-сайта, созданный для музыкантов/артистов, чтобы продвигать свою музыку и общаться со своей аудиторией.

Функции

• Настраиваемые изображения героев и адаптивное модальное изображение.
• Музыкальный проигрыватель на основе Javascript и генератор миниатюр YouTube, оптимизированный для загрузки страниц.
• Список рассылки и контактная форма с проверкой и внутренней интеграцией
• Дополнительные разделы, в том числе раздел о компании, товарах, новостях прессы и шоу.
• Код проекта соответствует требованиям проверки HTML и CSS W3C (за исключением черно-белой оболочки CSS).

Начиная

Примечание. Для полной функциональности тестирования рекомендуется использовать локальный веб-сервер с настроенным PHP и почтовый сервер.

Чтобы отредактировать заголовок и навигацию:

1. Замените имя исполнителя/группы в идентификаторе «логотип».
2. Обновите навигационные ссылки на свои собственные.

Чтобы отредактировать домашний раздел:

1. Замените имя изображения в классе «герой» в файле style.css.
2. Отредактируйте слоган, призыв к действию (CTA) и ссылку CTA в классе «home» в index.html.

Чтобы отредактировать список рассылки:

1. Создайте свой собственный список рассылки Google Таблиц, следуя руководству Дэвида Маккоя: https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms- b833952cc175
2. Замените вновь созданную ссылку на листы Google на «url» в mailingList.js.
3. Замените призыв к действию и слоган в index.html.

Чтобы отредактировать раздел «О программе»:

1. Замените ссылки соцсетей на свои.
2. Изменить класс «О программе» в index.html.

Чтобы отредактировать раздел товаров:

1. Сжимайте изображения и уменьшайте количество пикселей, чтобы оптимизировать время загрузки.
2. Скопируйте свои фотографии в папку /pictures/merch.
3. Замените имя изображения в классах «.a, .b, .c» и т. д. в style.css.
4. Замените имя изображения в классе «сетка» в index.html.

Чтобы отредактировать музыкальный раздел:

1. Изменить класс «Музыка» в index.html.
2. Измените музыкальные ссылки на свои собственные
3. Подставьте название своей картинки в класс «music-hero» в style.css.

Чтобы добавить избранные песни:

1. Отредактируйте свою песню с помощью DAW в 30-секундном предварительном просмотре клипа, чтобы оптимизировать время загрузки и потоковой передачи.
2. Поместите песни в каталог /music.
3. Редактировать массив var "files" в musPlayer.js
4. Чтобы добавить песню в массив, используйте следующий формат: «Название вашей песни.mp3».

Чтобы отредактировать раздел новостей:

1. Сжимайте изображения и уменьшайте количество пикселей, чтобы оптимизировать время загрузки.
2. Скопируйте свои изображения в каталог /pictures/blog.
3. Замените имя изображения в классах «.a, .b, .c» и т. д. в style.css.
4. Замените название изображения и заголовок блога в классе «grid» в index.html.
5. Напишите сообщение в блоге на html-страницах blog_(page).

Чтобы отредактировать раздел прессы:

Отредактируйте класс «Пресса» в index.html.

Чтобы отредактировать раздел видео:

1. Перейдите к видео YouTube, которое вы хотите показать.
2. Скопируйте текст после «v=" в ссылке на YouTube.
3. Вставьте текст идентификатора данных в класс «youtube-player» в класс «Видео» в index.html.

Чтобы отредактировать раздел шоу:

Отредактируйте класс «Показы» в index.html.

Чтобы отредактировать раздел изображений:

1. Сжимайте изображения, чтобы оптимизировать время загрузки
2. Скопируйте свои фотографии в папку /pictures/gallery.
3. Замените имя изображения в классах «.a, .b, .c» и т. д. в style.css.
4. Замените имя изображения в классе «сетка» в index.html.

Чтобы отредактировать контактную форму:

1. Введите свой адрес электронной почты в form.php
2. Настройте свои ответные сообщения в form.php

Чтобы отредактировать нижний колонтитул:

1. Обновите ссылки в нижнем колонтитуле на свои собственные
2. Замените название исполнителя/группы в файле terms.html.

Настройте скины!

Новая черно-белая тема доступна уже сейчас.

1. Переименуйте css/style_black_white.css в css/style_black_white.

ИЛИ

1. Измените ссылку href в заголовке на css/style_black_white.css для всех html-документов.

Построен с

• HTML5
• CSS3
• jQuery/JavaScript/AJAX
• PHP5

Содействие

Внося свой вклад в этот репозиторий, вы можете выполнить форк и отправить запрос на включение. Добавьте описание того, что вы делаете, и я рассмотрю его.

Управление версиями

Версия 2.3.0

Авторы

• Мэтью Уолдрон - (http://waldronmatthew.com)

Лицензия

Этот проект лицензируется по лицензии MIT — подробности см. в файле LICENSE.md.

Пожалуйста, соблюдайте Условия использования и страницы «Кредиты веб-сайта».

Благодарности

ОГРОМНОЕ спасибо всем разработчикам, у которых я использовал лицензионный код MIT. Они перечислены на странице «Кредиты веб-сайта».