Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Desafio Front-end Junior Entrega #41

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Desafio Front-end Junior Entrega #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
package-lock.json
28 changes: 9 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,12 @@
# Frontend challenge júnior
<h1>Desafio Programador Junior VNDA</h1>
<h2>Dependências:</h2>

Teste para a vaga de front end júnior
- NODE
- SASS
- GULP
- SWIPPER

- Codificar layout seguindo o [wireframe](https://drive.google.com/file/d/10xpr_7qaEXNBT4v2dOKqanS4_tOcgEJs/view)
- Paleta de cores: https://coolors.co/ffffff-f6f6f6-f5e5d9-272727-000000
- 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/)
- No banner com slider, usar o [swiper](http://idangero.us/swiper/)
- 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.
- Você tem total liberdade para criar efeitos nas sessões do site, explore o artista dentro de você hehehe;
- 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 (como bootstrap), para que possamos avaliar melhor a sua qualidade técnica;
<h2>Rodar em desenvolvimento</h2>

**Obs 1: Caso tenha dificuldade para compilar o sass e gulp, codifique o teste como preferir, o importante é o teste ser feito**

**Obs 2: Caso não consiga terminar todo o layout no prazo, mande o que conseguiu fazer, o importante é entregar algo para ser avaliado**
- git clone https://github.com/RicardoSaudade/desafiojuniorbeta.git
- npm install
1 change: 1 addition & 0 deletions dist/css/general.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

334 changes: 334 additions & 0 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,334 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/general.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
</head>
<body>
<section class="wrapper">
<div class="row template-header">
<div class="column-2">
LOGO
</div>
<div class="column-8">
<a href="#">MENU</a>
<a href="#">MENU</a>
<a href="#">MENU</a>
<a href="#">MENU</a>
<a href="#">MENU</a>
</div>
<div class="column-2">
<div class="icon-container">
<i class="fas fa-search"></i>
<i class="far fa-user-circle"></i>
<i class="fas fa-shopping-bag"></i>
</div>
</div>
</div>
<div class="row header-mobile">
<div class="column-12">
<span>Mobile Version</span>
<i class="fas fa-bars menu-burger"></i>
</div>
</div>
<div class="row">
<div class="column-12 slider-background">
<div class="slider-section">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://picsum.photos/id/1021/1900/550">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/1008/1900/550">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/1044/1900/550">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/1052/1900/550">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
<div class="row circles-container">
<div class="column-2">
<img src="https://picsum.photos/id/1062/100/100">
</div>
<div class="column-2">
<img src="https://picsum.photos/id/40/100/100">
</div>
<div class="column-2">
<img src="https://picsum.photos/id/433/100/100">
</div>
<div class="column-2">
<img src="https://picsum.photos/id/582/100/100">
</div>
<div class="column-2">
<img src="https://picsum.photos/id/593/100/100">
</div>
<div class="column-2">
<img src="https://picsum.photos/id/1074/100/100">
</div>
</div>
<div class="row circles-container-mobile">
<div class="column-12">
<div class="row">
<div class="column-12">
<img src="https://picsum.photos/id/1062/100/100">
<img src="https://picsum.photos/id/40/100/100">
</div>
</div>
<div class="row">
<div class="column-12">
<img src="https://picsum.photos/id/433/100/100">
<img src="https://picsum.photos/id/582/100/100">
</div>
</div>
<div class="row">
<div class="column-12">
<img src="https://picsum.photos/id/593/100/100">
<img src="https://picsum.photos/id/1074/100/100">
</div>
</div>
</div>
</div>
<div class="row first-section">
<div class="column-4 first-section-info">
<p>Lorem ipsum dolor</p>
<h1 class="page-title">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut ex est quibusdam! Dolore quis similique ad, hic voluptatibus aliquam veritatis nulla deserunt! Porro unde sint voluptates doloremque iusto, distinctio voluptate.</p>
</div>
<div class="column-4 first-banner-container">
<div class="row">
<div class="column-12 img-banner"></div>
</div>
<div class="row">
<div class="column-12 txt-banner">
<h4>Titulo do banner</h4>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, porro deserunt</p>
</div>
</div>
</div>
<div class="column-4">
<div class="row">
<div class="column-12">
<div class="row">
<div class="column-12 img-mini-banner"></div>
</div>
<div class="row">
<div class="column-12 txt-banner">
<h4>Titulo do banner</h4>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, porro deserunt</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column-12">
<div class="row">
<div class="column-12 img-banner"></div>
</div>
<div class="row">
<div class="column-12 txt-banner">
<h4>Titulo do banner</h4>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, porro deserunt</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column-12 second-section-background">
<div class="row">
<div class="column-8">
<div class="row">
<div class="column-6">
<div class="second-section-banner"></div>
</div>
<div class="column-6">
<div class="second-section-info">
<p>Lorem ipsum dolor</p>
<h1 class="page-title">Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis atque consectetur commodi provident. Commodi, soluta. Voluptate magnam iure minima quo sapiente atque expedita eos aspernatur consequatur. Explicabo mollitia quia quisquam.</p>
<div class="row">
<div class="column-4 button-container">
<button class="second-section-button">Call-to-action ></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column-4">
<div class="second-section-slider">
<div class="slider-section">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://picsum.photos/id/1021/664/500">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/1021/664/500">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/1021/664/500">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/1021/664/500">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<div class="second-section-slider-mobile">
<div class="slider-section">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://picsum.photos/id/1021/664/564">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/1021/664/564">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/1021/664/564">
</div>
<div class="swiper-slide">
<img src="https://picsum.photos/id/1021/664/564">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row third-section">
<div class="column-4">
<div class="third-section-box">
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="column-4">
<div class="row">
<div class="column-12 third-section-insta">@instadamarca</div>
</div>
<div class="row">
<div class="column-12">
<div class="third-section-box insta-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat praesentium magni ad at blanditiis soluta minima enim illum sint dolores tenetur accusamus, neque exercitationem odio, qui in aut tempora assumenda.</p>
</div>
</div>
</div>
</div>
<div class="column-4">
<div class="third-section-box">
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
<div class="row">
<div class="column-12">
<div class="row">
<div class="column-12 footer-logo">LOGO</div>
</div>
<div class="row">
<div class="column-3">
<div class="row">
<div class="column-12">MENU</div>
</div>
<div class="row">
<div class="column-6">
<ul class="footer-submenu">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
<div class="column-6">
<ul class="footer-submenu">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
</div>
</div>
<div class="column-6">
<div class="row">
<div class="column-12">MENU</div>
<div class="row">
<div class="column-12 footer-email">
<div class="row desktop-input">
<div class="column-10">
<input class="footer-imput" type="email" placeholder="Email">
</div>
<div class="column-2">
<button class="footer-button">ENVIAR ></button>
</div>
</div>
<div class="row desktop-input-mobile">
<div class="column-12">
<input class="footer-imput" type="email" placeholder="Email">
<button class="footer-button">ENVIAR ></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column-3 footer-mini-menu">
<div class="row">
<div class="column-12">
<span class="footer-last-menu">MENU</span>
</div>
</div>
<div class="row">
<div class="column-12">
<ul class="footer-submenu">
<li>
<i class="fab fa-facebook-square"></i>
<span>Submenu</span>
</li>
<li>
<i class="fab fa-instagram"></i>
<span>Submenu</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row signature">
<div class="column-12">
@Vnda - Tecnologia para ecommerce - CNPJ 00.0000.000/0001-00
</div>
</div>
</section>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="./js/swipper.js"></script>
</body>
</html>
17 changes: 17 additions & 0 deletions dist/js/swipper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
const swiper = new Swiper('.swiper-container', {
effect: 'flip',
grabCursor: true,
flipEffect: {
slideShadows: false,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
})
Loading