teste de LAYOUT para ESTÁGIARIO da Profit-e RJ

README.md

@@ -1,56 +1,6 @@
-# Seja um desenvolvedor na Profit-e RJ
+
+Link: https://lincolnlink.github.io/PortfolioFrontEnd-ProfiteLayoutGetDevs/
 
-###### A Profit-e é uma agência especializada em E-commerce.  
-###### Há 5 anos no mercado, atendemos clientes que estão entre os maiores e mais importantes e-commerces da America Latina: Tim, Calvin Klein, O Boticário, Avon, Plaza Vea, Bradesco e C&A.
-#
 
-###### Estamos procurando desenvolvedores que queiram participar de projetos fazem parte da vida de milhões de pessoas.
 
-#
 
-### Requisitos:
-* Domínio de HTML e HTML5
-* CSS e pré-processadores de CSS
-* Javascript e Jquery
-* Performance, Usabilidade e Acessibilidade
-* Controle de versões com GIT
-
-#
-
-### Diferenciais
-* Vtex
-* React
-* Espanhol fluente
-
-### Benefícios
-* Vale alimentação
-* Vale refeição
-* Plano de saúde (% de acordo com o cargo)
-* Plano odontológico
-* Folga de aniversário
-* Game night 
-* Plano de carreira
-* Treinamentos internos
-
-### Como concorrer a vaga:
-* Forka esse projeto;
-* No seu fork, codifique o [layout](https://drive.google.com/file/d/0B9QdkCtN6CUUWUpnQW5HelBNY3c/view) seguindo as instruções abaixo;
-* Faça um pull request (ou envie para jonatas.ricardo@profite.com.br).
-
-### Instruções para o teste:
-
-##### [Link do layout](https://drive.google.com/file/d/0B9QdkCtN6CUUWUpnQW5HelBNY3c/view)
-#
-##### Obrigatório
-* HTML5 e CSS3
-* Funcionalidade de adicionar ao carrinho
-* Interação com JSON para renderizar os produtos
-* Não utilizar Bootstrap!
-
-##### Bônus
-* Javascript sem plugins e modular
-* Grunt, Gulp ou similar
-* Responsividade
-* REACT
-
-###### dúvidas: jonatas.ricardo@profite.com.br

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

css/footer/stylus.css

@@ -0,0 +1,55 @@
+.rodape div.banne{
+	display: none;
+	padding-top: 3em;
+}
+.rodape div.bandeiras figure img{
+	width: 100%;
+}
+.rodape div.lista, .rodape div.bandeiras{
+	display: block;
+	min-height: 1px;
+	position: relative;
+	width: 230px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+@media screen and (min-width: 600px) {
+
+	 .rodape div.lista{
+	 	float: left;
+	 	width: 20%;
+	 }
+
+	.rodape div.bandeiras{
+		float: left;
+		width: 40%;
+	 }
+}
+
+@media screen and (min-width: 900px){
+
+	.rodape div.banne{
+		display: block;
+		min-height: 1px;
+		position: relative;
+		width: 25%;
+	    margin-left: auto;
+	    margin-right: auto;
+	    float: left;
+	}
+	.rodape div.lista{
+	 	float: left;
+	 	width: 15%;
+	 }	
+	.rodape div.bandeiras{
+		width: 30%;
+	}
+}
+.text-direito{
+	float: left;    
+    margin: 0 auto;
+    width: 100%;
+}

css/header/stylus.css

@@ -0,0 +1,64 @@
+
+nav.menu ul li {
+    display: block;
+    letter-spacing: 0.2em;
+    padding-bottom: 1em;
+    padding-top: 1em;
+}
+
+@media screen and (min-width: 768px) {
+	nav.menu ul li {
+    	display: inline;
+    	margin-right: 5%;
+    	padding-bottom: 0em;
+    	padding-top: 0em;
+	}
+}
+nav.menu ul li a:hover{
+    color: #fcc300;
+}
+
+.logo {
+    margin: 0 auto;
+    display: block;
+}
+
+.box-carrinho{
+    padding-top: 2em;
+}
+
+@media screen and (min-width: 1197px) {
+    .box-carrinho{
+        padding-top: 0;
+    }
+}
+
+.carrinho{
+    background-color: black;   
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    position: relative;
+    top: -10px;
+
+}
+.carrinho div{
+    position: relative;
+    top: 9px;
+    font-size: 22px;
+}
+
+.quantidade{
+    background-color: #fcc300;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    position: relative !important;
+    top: -36px !important;
+    right: -28px;
+}
+.quantidade div{
+    position: relative;
+    top: 3px;
+    font-size: 12px;
+}