Download musicWebTemplate - download do código-fonte musicWebTemplate

musicWebTemplate

Outras categorias

2.0.0

Baixar

Modelo de site gratuito criado para músicos/artistas promoverem suas músicas e se conectarem com seu público.

Características

Imagens de herói personalizáveis e modal de imagem responsivo
Reprodutor de música baseado em Javascript e gerador de miniaturas do YouTube otimizado para carregamento de páginas
Lista de discussão e formulário de contato com validação e integração back-end
Seções adicionais, incluindo uma seção sobre, produtos, notícias e programas
O código do projeto atende à conformidade de validação HTML e CSS W3C (excluindo a capa CSS em preto e branco)

Começando

Nota: É recomendado que você use um servidor web local configurado com php e um servidor de e-mail para funcionalidade de teste completa.

Para editar o cabeçalho e a navegação:

Substitua pelo nome do seu artista/banda no id "logotipo"
Atualize os links de navegação para os seus

Para editar a seção inicial:

Substitua o nome da sua foto na classe "herói" em style.css
Edite seu slogan, call to action (CTA) e link de CTA na classe "home" em index.html

Para editar a lista de discussão:

Crie sua própria lista de e-mails do Planilhas Google seguindo o tutorial de David McCoy: https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms- b833952cc175
Substitua o link do Planilhas Google recém-criado por "url" em mailingList.js
Substitua sua frase de chamariz e slogan em index.html

Para editar a seção sobre:

Altere os links de mídia social para os seus
Edite a classe "Sobre" em index.html

Para editar a seção de produtos:

Comprima suas fotos e reduza pixels para otimizar o tempo de carregamento
Copie suas fotos para dir /pictures/merch
Substitua o nome da sua foto nas classes ".a, .b, .c", ect... em style.css
Substitua o nome da sua imagem na classe "grade" em index.html

Para editar a seção de música:

Edite a classe "Música" em index.html
Altere os links de música para os seus
Substitua o nome da sua foto na classe "music-hero" em style.css

Para adicionar músicas em destaque:

Edite sua música usando um DAW em uma visualização de clipe de 30 segundos para otimizar o carregamento e o tempo de streaming
Coloque as músicas em dir /music
Edite a matriz var "arquivos" em musPlayer.js
Para adicionar uma música ao array, use o seguinte formato: "Your Song Title.mp3"

Para editar a seção de notícias:

Comprima suas fotos e reduza pixels para otimizar o tempo de carregamento
Copie suas fotos para dir /pictures/blog
Substitua o nome da sua foto nas classes ".a, .b, .c", ect... em style.css
Substitua o nome da sua imagem e o título do blog na classe "grade" em index.html
Escreva sua postagem no blog nas páginas html blog_(page).

Para editar a seção de imprensa:

Edite a classe "Press" em index.html.

Para editar a seção de vídeo:

Navegue até o vídeo do YoutTube que deseja apresentar
Copie o texto depois de "v=" no link do youtube
Cole o texto do data-id na classe "youtube-player" na classe "Video" em index.html

Para editar a seção de shows:

Edite a classe "Shows" em index.html.

Para editar a seção de fotos:

Comprima suas fotos para otimizar o tempo de carregamento
Copie suas fotos para dir /pictures/gallery
Substitua o nome da sua foto nas classes ".a, .b, .c", ect... em style.css
Substitua o nome da sua imagem na classe "grade" em index.html

Para editar o formulário de contato:

Digite seu endereço de e-mail no form.php
Personalize suas mensagens de resposta no form.php

Para editar o rodapé:

Atualize os links de rodapé para os seus
Substitua pelo nome do seu artista/banda em termos.html

Personalize com skins!

Novo tema preto e branco disponível agora.

Renomeie css/style_black_white.css para css/style_black_white

OU

Altere o link href no cabeçalho para css/style_black_white.css para todos os documentos HTML

Construído com

HTML5
CSS3
jQuery/JavaScript/AJAX
PHP5

Contribuindo

Ao contribuir para este repositório, você pode bifurcar e enviar uma solicitação pull. Adicione uma descrição do que você está fazendo e eu analisarei.