Pagina "Gallery"

Na galeria tivemos a por estivemos a por 8 imagens e utilizado o CSS3 fizemos com que as fotos ficassem preto e branco utilizanco a propriedade: "-webkit-filter: grayscale()", e só quando o rato passasse por cima da imagem é que ela ficava com a cor normal.

Utilizando javascript fizemos com que os utilizadores do site pode-sem carregar na imagem e esta mesma abrir numa nova janela mas com tamanho maior. 

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

Pagina "Media"

Após termos acabado a pagina do "Tour" começamos por criar as imagens que a pasta da galeria(gallery) e os vídeos (videos) iria ter. E o resultado por o seguinte :

E fizemos um "rollover" nas imagens e o resultado foi o seguinte:

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

Pagina "Tour"

Após mudarmos o icon do separador, começamos a procurar as datas do tour da banda. Nas redes sócias deles vimos que o próximo concerto que eles iriam ter é no dia 7 de Dezembro e decidimos por um "countdown"(contagem decrescente) ate a data do concerto:

E abaixo desta contagem decrescente tivemos a por uma tabela com a data do concerto(Date), o local de encontro e a banda/s que vão actuar com eles(Venue), a cidade e o pais onde vai ser o concerto(Location) e os bilhetes (Tickets) que têm um link para o site oficial de onde podem se comprar.

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

Título e a imagem do separador

Após termos concluído a biografia, olhamos para o separados e achamos q o icon do separador não era o apropriado para o nosso site(imagem do ultimo album da banda) e decidimos muda-lo usando um código de HTML que permite essa mudança. O resultado foi o seguinte:

Apos ter-mos posto o icon do seprador observamos que quando estavamos no index nao conseguiamos ler o titulo do separados e decidimos faze-lo mexer-se para q as pessoas possam ver o que esta escrito. Fizemos esta mudança usando o Javascript e o resultado foi o seguinte: 

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

Pagina "Biography"

Para começar fizemos uma breve pesquisa da banda e copiamos o que achamos mais importante e também pesquisamos os nomes dos membros da banda.

No início da pagina "biography" colocamos um "<article>" que contém os nomes dos membros da banda e ao lado colocamos uma imagem fazendo um "float: right". Nessa mesma imagem optamos por colocar um "rollover" através de CSS em que a imagem tem o contraste ao máximo e passando com o rato por cima da imagem ela fica com o contraste normal.

Imagem com o contraste ao máximo 

Imagem normal 

O restante texto contem acontecimentos importantes da banda.

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

Noticias no na pagina "Index"

Após termos concluído o rodapé começamos por pesquisa algumas notícias de alguns acontecimentos da banda e decidimos escolher 4 noticias que eram mais recentes.

Depois de termos feito a pesquisa das noticias começamos pela criação das div's para colocarmos as noticias. Para tal nos utilizamos o método par ou impar em que criávamos 2 divs ambas com o mesmo id, depois de fazermos isso uma das div's tinha o "float: right"  outra com o "float: left". Depois disso atribuímos o mesmo id da div que tinha o "float: right", para as restantes div's que nos queríamos alinhadas a direita e a mesma coisa mas utilizando o id da div que tinha o "float: left" para as div's que queríamos alinhadas a esquerda. Aqui esta um exemplo do resultado :

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

DIV Rodape

Após termos criado a imagem a anuncia o álbum, começamos a procurar as redes sócias que a banda tinha e decidimos por 5 das redes sócias(Facebook, Twitter, Instagram, Whosay e Myspace) em que eles tinham conta. Em seguida fomos procurar as os logos das redes socias e as colocamos na margem direita do rodapé : 

Enquanto estávamos a nas redes sócias da banda descobrimos que a banda tinha uma empresa que estava a produzir a musica dele, e naquele momento decidimos pó-la também no nosso rodapé na canto esquerdo:

E para o rodapé ficar completo decidimos por o copyright. Depois de muitas tentativas nos conseguimos por o centralizar da pagina :

Os nossos nomes tem outra cor porque contem o link para este blog.

O resultado final do rodapé é o seguinte:

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

IMG do anuncio do album

Com o nosso menu criado começamos a trabalhar na DIV em vai conter uma imagem a anunciar o novo álbum que foi lançado em conjunto com a banda Stick to Your Guns. Para isso fomos buscar uma imagem a anunciar o novo álbum:

Mas como a imagem era demasiado pequenas e tinha algumas frases que nos não queríamos, usando o Photoshop mudas a imagem da noticia e obtivemos o seguinte resultado:

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

Menu

Depois de por-mos cores nas nossas DIV's com a transparência passamos a criação do nosso menu. Para tal começamos por programar no HTML um menu utilizando a tag <ul> e <li>. Criamos 5 <li> isto para cada pagina: biography, tour, media, albuns, contact e este foi o resultado:

Depois optemos o resultados que nos queríamos começamos por mudar as cores dos nomes dos menus e também alinha-los utilizando "padding e margin-right".

Após a uma longa pesquisa na Internet sobre vários efeitos em menus utilizando CSS3 que um menu podia ter acabamos por encontrar um que nos gostávamos. Primeiro criamos o efeito em que quando o rato passava pela DIV do menu os nomes dos menus ficavam desfocados. Para optermos este resultado usamos os seguintes codigos:

Depois programamos um efeito que quando rato passava pelo nome de um menu os restantes continuavam desfocados enquanto o nome do menu no qual tinhamos passado o rato fica com outra cor e o seu tamanho aumenta e para poder-mos fazer isso utilizamos estes codigos:

E o resultado que obtivemos foi o seguinte:

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

Cores das Div's

Após a criação do nosso rollover passamos em colocar as cores em todas a nossas DIV's, e arranjar maneira de criar a transparência na cor das DIV's. Para tal nos utilizamos a propriedade "background-color:rgba(x, x, x, x)" em que o "rgb" são as cores que nos queríamos colocar e o "a" e a transparência que desejávamos. Após muitas tentativas e termos escolhido os valor para as cores e a transparência obtivemos o seguinte resultado:

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

Rollover do Logo

Depois de termos criado as DIV começamos por pesquisar o logo da banda. Depois termos encontrado o logo fomos  a procura de logos dos álbuns deles e optamos por escolher só 2:

Logo Do Album "Diamond"

Logo do Album "The Hope Division"

Logo da Banda

Depois termos encontra as imagens dos logos utilizando o photoshop juntamos o logo dos albuns com o logo do nome da banda. E depois de termos concluído a criação dos logos começamos a programar utilizando o javascript para fazer o rollover (quando o rato passa por cima da imagem ela muda para outra imagem).

Logo Principal

Logo Rollover

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

Criação de Divs

Após termos decidido o nosso layout começamos por criar o nosso site através de DIV's. Para podermos notar as DIV's que nos tínhamos criado utilizamos a propriedade background-color na CSS e atribuímos varias cores para podermos destingir as diferentes DIV's que tínhamos criado.
Para conseguirmos fazer com que a imagem de fundo estar sempre no mesmo ou ajustar sempre a todas as resoluções de cada monitor nos optamos por pôr a imagem de fundo na tag <body> utilizando a CSS e em seguida utilizamos varias propriedades.

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/

Descrição do tema do site

O nosso tema consiste na criação de um site sobre uma banda de metalcore chamada "Stick To Your Guns".

Em primeiro lugar nos trabalhamos no layout e começamos por definir que paginas iramos por no nosso site.  Acabamos por decidir que iram ser 8 paginas, o index, a biografia (biography), tour,  media em que ira conter mais 2 sub menus (galeria e vídeos), álbuns e contactos.

Aqui esta o nosso layout inicial:

Andreea Blidaru & Marcos Pinheiro

http://andreeablidaru.comule.com/sticktoyourguns/