Skip to content

A product landing page, with a dark mask on the banner, with some featured texts, and a simple product shelf with 8 products for viewing, Created to be responsive to large devices (4k, Desktop), Mediums (NoteBook, Tablet, etc), Mobile. STATUS: Finished

Notifications You must be signed in to change notification settings

HenriqueSSan/jordanshoes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

English / PT-BR

Jordan Shoes

Uma página de aterrissagem de produtos, com uma máscara escura no banner, com alguns textos em destaque e uma prateleira simples do produto com 8 produtos para visualização. Criado para responder a dispositivos grandes (4k, desktop), médios (noteBook, tablet, etc.) , Móvel. STATUS: Acabado

Contents

Contents Available
👀 Overview 👀 Yes
🎯 The challenge 🎯 Yes
📽️ Visuals 📽️ Yes
🧪 Links para Demos 🧪 Yes
👟 My process 👟 Yes
📖 What I Learned 📖 Yes
🏗️ Technologies 🏗️ Yes
🏭 Continuous Development 🏭 Yes
📦 Resources 📦 Not
📥 Installation 📥 Yes
🕹️ Usage 🕹️ Yes
💙 Support 💙 Yes
💙 Contributing 💙 Yes
✍️ Author ✍️ Yes
📞 Contact 📞 Yes
🎊 Acknowledgment 🎊 Yes

👀 Overview

🎯 The Challenge

Os Requisitos cobrados serão:

  • Quantidade de commits feitos deve ser maior que 10;
  • HTML e CSS devem considerar a performance da pagina (código limpo, sem repetições desnecessárias)

Developer Challenge

  • Semântica do HTML;
  • Uso de Conventional Commits e GitFlow para fazer as branchs e os commits;
  • Layout deve ser igual ao do figma fornecido acima e deve ser feito por completo;
  • CSS com uso de media query (pode fazer uso de SASS se tiver familiaridade);
  • A pagina deve se adaptar a TODOS os tamanhos de tela (telas maiores que 2500px, desktop (entre 2500 e 1025px), tablet e mobile (1024px até 280px - Galaxy Fold - Chrome) - DICA: usem medidas em porcentagem quando necessário.

<<< TOP

📽 Visuals

📽 Screenshot

Image

<<< TOP

🧪 Links

  • URL da solução: LINK
  • Demostrativo da solução: LINK
  • Design Link

<<< TOP

👟 My process

🏗 Technologies

  • HTML
  • Gulp
  • Sass/Scss
    • CSS

<<< TOP

📥 Installation

Requisitos:

  • Baixar o VSCode (Visual Studio Code). (Recomendado)
  • Git (Versionamento de código). (Obrigatorio)

📥 VSCODE

O VSCode(Visual Studio Code) é um IDE (Integrated Development Environment) Ambiente de Desenvolvimento Integrado, Este ambiente proposto pelo software VSCode, E muito importante para desenvolvedores das mais diferenciadas áres, como Desenvolvimento Web, Desenvolvimento de software, etc.

Baixe de Acordo com seu SO (Sistema Operacional).

Como Instalar o VSCode.

VSCODE Screenshot Site Oficial

AVISO: Não baixe o software de sites estrangeiros, baixe direto do site oficial.

📥 Git

O Git é um sistema de versionamento de código que deve ser utilizado para clonagem de repositorios, sendo assim o Git tem que estar instalado no computador de clonagem no repositorio.

Baixe de Acordo com seu SO (Sistema Operacional).

Como Instalar o Git.

GIT Screenshot Site Oficial

AVISO: Não baixe o software de sites estrangeiros, baixe direto do site oficial

📥 Extensions

No VSCode temos varias extenções para ajudar em nosso desenvolvimento do dia a dia, No caso citaremos algumas.

  • Live Server

    • Extenção para desenvolvimento Web, que permite a criação de um "servidor" para ambiente de desenvolvimento permitindo a manutenção dos elementos da páginas e testes de classes, cores, tamanhos, etc. Ela também comtribui com agilidade para o desenvolvimeto web pertimitindo uma economia de tempo. (Uso Opcional)
  • Material Icon

  • Essa extenção ajuda a torna mais legiveis os arquivos e pastas do projeto (Uso Opcional)

🕹️ Usage

Windows / Mac / Linux

Abra seu cmd/bash/shell copie e cole o código abaixo no seu cmd/bash/shell.

  git clone https://gitea.ecommercetools.com.br/HenriqueSantosSantana/m3-amazing-landing-page.git

  cd challenge-landing-page-henrique-santos-santana/

  code .

  yarn #para fazer a instalação dos pacotes | espere a conclução

  yarn dev #para rodar o projeto na sua máquina

AVISO: Git deve estar instalado na máquina junto com o VSCODE, caso sua IDE não for o VSCODE vá diretamente por meio de seu cmd/bash/shell manualmente, ou utilize a interface para chegar a pasta que foi clonado o repositorio, e entre dentro do projeto.

Caso tenha baixado as extenções no VSCODE, somente clique no arquivo dentro da pasta ./dist/index.html, ira abrir um menu abaixo do seu mouse, clique na opção Open with Live Server. Após clicar você será redirecionado para o seu navegador padrão com o projeto aberto.

Open with Live Server

💙 Support

Estou a qualquer momento disponivel, para tirar suas duvidas sobre o projeto;

💙 Contributing

Está disponivel para contribuições

✍ Author

<<< TOP

📞 Contact

<<< TOP

🎊 Acknowledgment

Agradecimentos a Minha familia por me apoiarem, Obrigado a M3Academy, Caroline .V Moran e Marcia Leal por me selecionarem para algo tão grande 💙.

<<< TOP

About

A product landing page, with a dark mask on the banner, with some featured texts, and a simple product shelf with 8 products for viewing, Created to be responsive to large devices (4k, Desktop), Mediums (NoteBook, Tablet, etc), Mobile. STATUS: Finished

Topics

Resources

Stars

Watchers

Forks