Completed Challenge

.gitignore

@@ -0,0 +1 @@
+/node_modules

README.md

@@ -1,36 +1,92 @@
-# Frontend challenge júnior
-
-Pontos importantes antes de iniciar
-
-- Sinalizar por e-mail para a pessoa que está fazendo o seu recrutamento a data de ínicio e a expectativa de entrega;
-- O prazo médio de entrega do teste é de 7 dias mas caso você tenha algum imprevisto sinalize o novo prazo e o motivo;
-- Pra gente é mais importante você desenvolver algumas das skills solicitadas ou passar um tempo mais demonstrando suas habilidades do que entregar algo incompleto ou que não atenda todos os requisitos do teste.
-
-Teste para a vaga de Frontend Júnior
-
-- Codificar layout seguindo o [wireframe](https://drive.google.com/file/d/10xpr_7qaEXNBT4v2dOKqanS4_tOcgEJs/view)
-- Você pode gerar uma paleta de cores que te agrade nesse site (https://coolors.co). Clique em "Start the generator".
-- Fontes: [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) e [PT Sans](https://fonts.google.com/specimen/PT+Sans)
-- O wireframe representa o layout macro do site, você tem liberdade para escolher os espaçamentos, tamanho de fontes, uso das cores, efeitos e outros detalhes.
-- Para as imagens, pode ser usado geradores de imagens por dimensão, como o [picsum](https://picsum.photos/) e o [placeholder](https://placeholder.com/), ou se preferir você pode adicionar imagens de sua escolha.
-- No fullbanner com slider, usar o [swiper](http://idangero.us/swiper/), mas utilizar o swiper de forma inteligente em outras seções contam pontos.
-- Deve ser feito o responsivo, mantendo as mesmas sessões do desktop. Você tem liberdade para decidir os pontos de quebra e o estilo das sessões no mobile, mas é importante que o site se adapte e fique legível.
-- Você tem total liberdade para criar efeitos nas sessões do site, explore o artista dentro de você;
-- O envio deve ser feito através dos arquivos zipados ou no github (pode ser feito pull request para esse repositório);
-- Deve ser utilizado sass e gulp para o pré-processamento do código;
-- Entregar uma pasta com os arquivos de desenvolvimento e outra pasta com os arquivos minificados e comprimidos (src/dist);
--- Na pasta **src** ficam os arquivos de desenvolvimento.
--- Na pasta **dist** ficam os arquivos finais (comprimidos e minificados).
-- Não deve ser usado nenhum framework de css (Bootstrap entre outros) nem de js (React, Vue, Angular entre outros), para que possamos avaliar melhor a sua qualidade técnica;
-
-Dicas
-
-- Navegue pelo site da https://www.vnda.com.br/ e visite também o site de nossos clientes;
-- Capriche, demonstre suas habilidades CSS, brinque com os efeitos, utilize em todas as seções e seja detalhista. Queremos saber seu repertório;
-- Utilizar um padrão de código como o RSCSS conta muitos pontos;
-- Tente dar sua cara pro projeto, imagine uma marca fictícia ou não, dê uma identidade visual pra ela;
-- Tente utilizar o JS além do Swiper e Menu Mobile, veja algumas seções em que você possa inserir algumas funções. Não precisa ser nada complexo;
-- Plugins JS são bem vindos contanto que sejam utilizados de forma inteligente;
-- Ainda não tem dominada algumas das skills? Foque primeiro no que você sabe. Vá o mais longe possível e utilize o tempo restante pra aprender o que não sabe, afinal essas habilidades serão utilizadas na sua rotina de trabalho;
-
-- Passe seu café e acredite no seu potencial!
+<h4 align="center">
+  <img src="https://github.com/gustavo-nt/frontend-challenge-junior/blob/master/src/assets/logo/logo.png" alt="logo" height="60"/>
+</h4>
+
+<h1 align="center">
+    🚀 Desafio Técnico - Vnda
+</h1>
+
+<p align="center">Aplicação desenvolvida para fins técnicos</p>
+
+<p align="center">
+  <img src="https://img.shields.io/static/v1?label=html&message=5.0&color=61DAFB&logo=html" />
+  <img src="https://img.shields.io/static/v1?label=css&message=3.0&color=0088CC&logo=css" />
+  <img src="https://img.shields.io/static/v1?label=js&message=ES6&color=yellow&logo=javascript" />
+  <img src="https://img.shields.io/badge/last%21commit-june-important" />
+</p>
+
+<p align="center">
+  <a href="#-features">Features</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-pré-requisitos">Pré-Requisitos</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-tecnologias">Tecnologias</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-licença">Lincença</a>
+</p>
+
+<h3 align="center"> 
+🚧  Finalizado  🚧
+</h3>
+
+### 📎 Features 
+
+- [x] Menu Mobile
+- [x] Full Banner
+- [x] Detalhes dos animais
+- [x] Espécies de animais
+- [x] Input para envio de email
+
+### 💻 Projeto
+
+Landing Page para apoiar as causas animais, diminuir o impacto gerado pelo contrabando e tráfico de animais silvestres, e conscientizar as pessoas a salvarem "vidas". Aplicação realizada como teste técnico da [Vnda](https://www.vnda.com.br/).  
+
+### ✅ Demonstração
+<img src="https://github.com/gustavo-nt/frontend-challenge-junior/blob/master/src/assets/home.png" />
+
+### ⚙ Pré-requisitos
+
+Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
+[Git](https://git-scm.com) e [Node.js](https://nodejs.org/en/). Além disto é bom ter um editor para trabalhar com o código como [VSCode](https://code.visualstudio.com/)
+
+### 📗 Rodando a Aplicação (web)
+
+```bash
+# Clone este repositório
+$ git clone https://github.com/gustavo-nt/frontend-challenge-junior
+
+# Instale as dependências
+$ npm
+
+# Wacth gulp
+$ gulp
+```
+
+### 🚀 Tecnologias
+
+Esse projeto foi desenvolvido com as seguintes tecnologias:
+
+- HTML
+- JavaScript
+- Sass
+
+### 📕 Bibliotecas
+
+Esse projeto foi utilizou das seguintes lib:
+
+- gulp
+- gulp-concat
+- gulp-rename
+- gulp-sass
+- gulp-uglify
+- node-sass
+- swiper-js
+
+### ⚖ Direitos
+
+Todos direitos são reservados a Vnda.
+
+### 📝 Licença
+
+Esse projeto está sob a licença MIT.
+
+<hr/>
+
+Feito por Gustavo Teixeira

dist/index.min.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html lang="pt_BR"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="shortcut icon" href="../src/assets/logo/favicon.png" type="image/png"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:wght@400;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"><link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="./styles/styles.min.css"><script src="./scripts/libs/js-modules.min.js"></script><title>Challenge Frontend - Vnda</title></head><body><div class="mobile-menu"><ul class="list"><li class="list-item"><a class="link" title="Home">Home</a></li><li class="list-item"><a class="link" title="Localização">Localização</a></li><li class="list-item"><a class="link" title="Horários">Horários</a></li><li class="list-item"><a class="link" title="Sobre">Sobre</a></li></ul></div><header class="header-container"><div class="content"><div class="mobile-icon"><input type="checkbox" id="check"> <label for="check" class="mobile-label"></label> <span class="mobile-span"></span></div><div class="logo-header"><img class="logo" src="../src/assets/logo/logo.png" alt="Logo"></div><ul class="desktop-menu"><li class="menu-item"><a class="link" title="Home">Home</a></li><li class="menu-item"><a class="link" title="Localização">Localização</a></li><li class="menu-item"><a class="link" title="Horários">Horários</a></li><li class="menu-item"><a class="link" title="Sobre">Sobre</a></li></ul><div class="options-header"><img class="option-icon" src="../src/assets/icons/search.svg" alt="Search" onload="SVGInject(this)"> <img class="option-icon" src="../src/assets/icons/avatar-circle.svg" alt="User" onload="SVGInject(this)"> <img class="option-icon" src="../src/assets/icons/shopping-bag.svg" alt="Shopping Bag" onload="SVGInject(this)"></div></div></header><main class="main-section"><div class="section-fullbanner"><div class="swiper-container carousel-fullbanner"><div class="swiper-wrapper"><div class="swiper-slide"><img class="imgslide" src="../src/assets/full-banner/tiger.jpg" alt="Tiger"></div><div class="swiper-slide"><img class="imgslide" src="../src/assets/full-banner/bull.jpg" alt="Bull"></div><div class="swiper-slide"><img class="imgslide" src="../src/assets/full-banner/eagle.jpg" alt="Eagle"></div></div><div class="swiper-button-prev -white"></div><div class="swiper-button-next -white"></div></div></div><div class="section-homepage"><div class="section-cards"><div class="rowlistarea"><div class="rowlist"><div class="card-spotlight"><img class="imgcard" src="../src/assets/species/rhinoceros.jpg" alt="Rhinoceros"></div><div class="card-spotlight"><img class="imgcard" src="../src/assets/species/lion.jpg" alt="Lion"></div><div class="card-spotlight"><img class="imgcard" src="../src/assets/species/eagle.jpg" alt="Eagle"></div><div class="card-spotlight"><img class="imgcard" src="../src/assets/species/puma.jpg" alt="Puma"></div><div class="card-spotlight"><img class="imgcard" src="../src/assets/species/elephant.jpg" alt="Elephant"></div><div class="card-spotlight"><img class="imgcard" src="../src/assets/species/tiger.jpg" alt="Tiger"></div></div></div><div class="container-arrows"><div class="arrowleft"><img src="../src/assets/icons/arrow.svg" alt="Arrow Left" onload="SVGInject(this)"></div><div class="arrowright"><img src="../src/assets/icons/arrow.svg" alt="Arrow Right" onload="SVGInject(this)"></div></div></div><div class="section-care"><div class="content-care"><div class="details"><div class="detailscontent"><span class="subtitle">Colabore com a fauna silvestre</span><h4 class="title">O que podemos fazer para preservar?</h4><p class="description">Em primeiro lugar, deve-se combater a ilegalidade no comércio dessa fauna, com isso, evite a compra de uma animal sem a liberação do IBAMA. Se você já possui um animal silvestre, é importante prezar pela saúde do mesmo, qualquer sintoma diferente, procure um profissional para examinar seu amigo.</p></div><p class="arrowdown">&rarr;</p></div><div class="examples"><div class="folder-example -translate"><img class="folderimg" src="../src/assets/care/giraffe.jpg" alt="Giraffe"><div class="info"><div class="title">Girafas</div><p class="description">As girafas são herbívoras, alimentando-se, assim, de folhas, caules e frutos.</p></div></div><div class="folder-container"><div class="folder-example -horizontal"><img class="folderimg" src="../src/assets/care/shark.jpg" alt="Shark"><div class="info"><div class="title">Tubarões</div><p class="description">Alguns tubarões alimentam-se de animais grandes, como outros peixes.</p></div></div><div class="folder-example"><img class="folderimg" src="../src/assets/care/sloth.jpg" alt="Sloth"><div class="info"><div class="title">Bicho-preguiça</div><p class="description">A preguiça são arborícolas, com hábitos diurnos e noturnos e herbívoros.</p></div></div></div></div></div><div class="bgcare"></div></div><div class="section-pet"><div class="content-pet"><div class="box"><div class="content-record"><img class="image" src="../src/assets/pet/trafic-animals.jpg" alt="Trafic Animals"><div class="description"><span class="alert">A prática ilegal é crime!</span><h2 class="title">Animais silvestre de estimação</h2><p class="content">Um dos mais lucrativos comércios ilegais do mundo é o tráfico de animais, que movimenta aproximadamente 20 bilhões de dólares por ano. Por esse motivo, aconselhamos que, caso queira um animal silvestre de estimação, procure saber a procidência, e caso desconfie, denuncie!</p><button class="button">Denuncie <span class="arrow">></span></button></div></div><div class="mini-banner"><div class="swiper-container carousel-mini"><div class="swiper-wrapper"><div class="swiper-slide"><img class="imgslide" src="../src/assets/mini-banner/leopard.jpg" alt="Leopard"></div><div class="swiper-slide"><img class="imgslide" src="../src/assets/mini-banner/elephant.jpg" alt="Elephant"></div><div class="swiper-slide"><img class="imgslide" src="../src/assets/mini-banner/macaw.jpg" alt="Turtle"></div></div><div class="elprev"><img src="../src/assets/icons/chevron.svg" alt="Chevron Left" onload="SVGInject(this)"></div><div class="elnext"><img src="../src/assets/icons/chevron.svg" alt="Chevron Right" onload="SVGInject(this)"></div></div></div></div><div class="bgpet"></div></div></div><div class="section-instagram"><div class="user"><h1 class="company">@gnt_official</h1></div><div class="swiper-container carousel-instagram"><div class="swiper-wrapper"><div class="swiper-slide"><div class="postslide"><img class="imgslide" src="../src/assets/feed-instagram/lion.jpg"><div class="details"><h3 class="titleslide">Leão</h3><p class="descriptionslide">Conhecido como o Rei da Selva, o leão pode ser encontrado na Ásia, África e Europa.</p></div></div></div><div class="swiper-slide"><div class="postslide"><img class="imgslide" src="../src/assets/feed-instagram/moose.jpg"><div class="details"><h3 class="titleslide">Alce</h3><p class="descriptionslide">O alce é um mamífero de grande porte que habita regiões frias do hemisfério norte.</p></div></div></div><div class="swiper-slide"><div class="postslide"><img class="imgslide" src="../src/assets/species/rhinoceros.jpg"><div class="details"><h3 class="titleslide">Rinoceronte</h3><p class="descriptionslide">O Rinoceronte é um mamífero herbívoro encontrado na África e Ásia que apresentam pele grossa e cornos muito visados comercialmente.</p></div></div></div></div></div><div class="instagram-feed"><div class="like-post"><img class="imgfeed" src="../src/assets/feed-instagram/lion.jpg"><div class="details"><h3 class="titlefeed">Leão</h3><p class="description">Conhecido como o Rei da Selva, o leão pode ser encontrado na Ásia, África e Europa.</p></div></div><div class="like-post -main"><img class="imgfeed" src="../src/assets/feed-instagram/moose.jpg"><div class="details"><h3 class="titlefeed">Alce</h3><p class="description">O alce é um mamífero de grande porte que habita regiões frias do hemisfério norte.</p></div></div><div class="like-post"><img class="imgfeed" src="../src/assets/species/rhinoceros.jpg"><div class="details"><h3 class="titlefeed">Rinoceronte</h3><p class="description">O Rinoceronte é um mamífero herbívoro encontrado na África e Ásia que apresentam pele grossa e cornos muito visados comercialmente.</p></div></div></div></div></div></main><footer><div class="logo-footer"><hr class="line"><img class="img" src="../src/assets/logo/logo-small.png" alt="Logo"><hr class="line"></div><div class="content-footer"><div class="section-menu"><div class="title">Home</div><div class="box"><div class="boxsubmenu"><p class="submenu">Aves</p><p class="submenu">Mamíferos</p></div><div class="boxsubmenu"><p class="submenu">Aquáticos</p><p class="submenu">Répteis</p></div></div></div><div class="section-newsletter"><div class="title">Receba novos contéudos</div><form class="form"><label class="search" for="signup"><input class="input" type="text" name="signup"> <label class="label">Email</label> <span class="span"></span></label> <button class="button">Enviar ></button></form></div><div class="section-sociais"><div class="title">Sociais</div><div class="box"><div class="boxsubsocial"><img class="imgsocial" src="../src/assets/icons/outlook.svg" alt="Email" onload="SVGInject(this)"><p class="namesocial">Email</p></div><div class="boxsubsocial"><img class="imgsocial" src="../src/assets/icons/facebook.svg" alt="Facebook" onload="SVGInject(this)"><p class="namesocial">Facebook</p></div></div></div></div><div class="copyright-footer">@Gnt - Em prol dos animais - CNPJ 00.0000.000/0001-00</div></footer><script src="https://unpkg.com/swiper/swiper-bundle.js"></script><script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script><script src="./scripts/index.min.js"></script></body></html>