8 | Página para compra de um fone de ouvido
9 |
10 |
11 | Desafio
12 | ·
13 | DevChallenge
14 |
15 |
16 |
17 | ## Índice
18 |
19 | * [Devchallenge](#devchallenge)
20 | * [Desafio](#desafio)
21 | * [Techs](#techs)
22 | * [Como começar](#como-começar)
23 | * [Dicas](#dicas)
24 | * [Cores](#cores)
25 | * [Modelo](#modelo)
26 | * [Imagens](#imagens)
27 | * [Icones](#icones)
28 | * [Tipo de fonte](#tipo-de-fonte)
29 | * [Compartilhe](#compartilhe)
30 |
31 | # Devchallenge
32 | DevChallenge permite que você evolua suas skills como programador! Participe da nossa comunidade o/
33 |
34 | # Desafio
35 | Seu desafio é criar uma página para compra de um fone de ouvido! O modelo final está disponível na pasta "design"
36 |
37 | ## Requisitos:
38 | - Sua página deverá conter um menu superior com as seções da loja (home, about, products e support)
39 | - Sua página deverá contar as informações sobre o produto e botão para adicionar o mesmo no carrinho de compras
40 | - Sua página deverá ser responsiva
41 |
42 | ### Requisitos bônus
43 | - Você poderá adicionar um menu drop down para aparecer quando o usuário clicar no ícone superior direito.
44 | - Você poderá adicionar mais imagens do produto quando o usuário clicar nas opções (bolinhas) que aparecem ao lado esquerdo do produto
45 |
46 | # Techs:
47 | - HTML e CSS
48 | - Framework ou linguagem que preferir :)
49 |
50 | # Como começar:
51 | 1 - Use esse template (clicando em Use this template) ou faça um fork deste repositório com o código inicial
52 | 2 - Leia as instruções no readme.md
53 | 3 - Comece a codar! Sinta-se livre para utilizar o fluxo de trabalho que ache mais confortável
54 | 4 - Compartilhe seu resultado com a comunidade! Se puder, mostre seus resultado aqui no repositório também, criando uma Issue :)
55 |
56 | # Dicas
57 |
58 | ## Cores:
59 | Vermelho: #ca3b3a
60 | Preto: #161616
61 | Cinza: #707070
62 |
63 | ## Modelo:
64 | O modelo final desktop e mobile está disponível na pasta `./design`
65 |
66 | ## Imagens
67 | As imagens utilizadas estão disponíveis na pasta `./assets`
68 |
69 | ## Icones
70 | Para os ícones, recomendamos que utilize alguma biblioteca, como o Font Awesome
71 |
72 | ## Tipo de fonte:
73 | - Montserrat
74 |
75 | # Compartilhe!
76 | Inicie seu projeto utilizando esse template no seu github como um repositório público
77 | Faça um print, gif ou vídeo e compartilhe o resultado no seu Linkedin
78 |
79 | Desafio criado por Emmanuel Messias :)
80 |
--------------------------------------------------------------------------------
/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
4 |
5 |