mktvirtual · paulo-campos · Feb 14, 2016 · Feb 15, 2016 · Feb 16, 2016 · Feb 17, 2016
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "dev/libs"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,13 @@
+# Ignored folders
+bower_components/
+node_modules/
+wordpress/
+.sass-cache/
+
+
+# Ignored extensions
+*.docx
+*.lnk
+*.log
+*.sublime-project
+*.sublime-workspace
diff --git a/bower.json b/bower.json
@@ -0,0 +1,26 @@
+{
+  "name": "mkt-virtual-theme",
+  "description": "technical test for MKT Virtual",
+  "main": "gulpfile.js",
+  "authors": [
+    "Paulo Campos <[email protected]>"
+  ],
+  "license": "ISC",
+  "homepage": "https://github.com/paulovitorwd/front-end-test-wordpress",
+  "moduleType": [
+    "es6",
+    "globals",
+    "node"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "dev/bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "~2.2.0",
+    "slick-carousel": "~1.5.9"
+  }
+}
diff --git a/config.rb b/config.rb
@@ -0,0 +1,25 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path       = "/"
+css_dir         = "dev/css/"
+sass_dir        = "dev/scss/renderers/"
+images_dir      = "dev/assets/imgs/"
+javascripts_dir = "dev/scripts/"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
diff --git a/design/home.jpg b/design/home.jpg
diff --git a/dev/database/post-01.jpg b/dev/database/post-01.jpg
diff --git a/dev/database/post-02.jpg b/dev/database/post-02.jpg
diff --git a/dev/database/post-03.jpg b/dev/database/post-03.jpg
diff --git a/dev/database/post-04.jpg b/dev/database/post-04.jpg
diff --git a/dev/imgs/arrow.png b/dev/imgs/arrow.png
diff --git a/dev/imgs/banner-01.jpg b/dev/imgs/banner-01.jpg
diff --git a/dev/imgs/banner-02.jpg b/dev/imgs/banner-02.jpg
diff --git a/dev/imgs/black-bar-code.png b/dev/imgs/black-bar-code.png
diff --git a/dev/imgs/featured.jpg b/dev/imgs/featured.jpg
diff --git a/dev/imgs/location.png b/dev/imgs/location.png
diff --git a/dev/imgs/logo.png b/dev/imgs/logo.png
diff --git a/dev/imgs/map.jpg b/dev/imgs/map.jpg
diff --git a/dev/imgs/search.png b/dev/imgs/search.png
diff --git a/dev/imgs/sidebar.jpg b/dev/imgs/sidebar.jpg
diff --git a/dev/imgs/social-media.gif b/dev/imgs/social-media.gif
diff --git a/dev/imgs/white-bar-code.png b/dev/imgs/white-bar-code.png
diff --git a/dev/index.html b/dev/index.html
@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>MKT Virtual</title>
+
+	<!--============================
+	=            Styles            =
+	=============================-->
+	<!-- build:css libs/slick.css -->
+	<link rel="stylesheet" href="bower_components/slick-carousel/slick/slick.css">
+	<!-- endbuild -->
+	<!-- build:css style.css -->
+	<link rel="stylesheet" href="styles/css/main.css">
+	<!-- endbuild -->
+	<!--============================
+	=            Styles            =
+	=============================-->
+</head>
+<body>
+	<div id="base">
+		<header>
+			<div class="top">
+				<div class="container">
+					<nav>
+						<ul>
+							<li>
+								<a href="#">Peça seu cartão</a>
+							</li>
+							<li>
+								<a href="#"><img src="imgs/white-bar-code.png" alt="">Solicite a 2ª via do cartão</a>
+							</li>
+							<li>
+								<a href="#">Encontre uma loja</a>
+							</li>
+							<li>
+								<a href="#">Assine a newsletter</a>
+							</li>
+						</ul>
+						<form action="">
+							<input type="text" placeholder="Busca">
+							<input type="submit" value="">
+						</form>
+					</nav>
+					<button id="arrow"></button>
+				</div>
+			</div>
+			<div class="middle">
+				<div class="container">
+					<h1>
+						<a href="#">
+							<img src="imgs/logo.png" alt="Logo">
+						</a>
+					</h1>
+					<button id="menu">
+						<div class="bar"></div>
+						<div class="bar"></div>
+						<div class="bar"></div>
+					</button>
+					<menu>
+						<nav class="container">
+							<ul>
+								<li>
+									<a href="#">Campanhas</a>
+								</li>
+								<li>
+									<a href="">Feminino</a>
+								</li>
+								<li>
+									<a href="">Masculino</a>
+								</li>
+								<li>
+									<a href="">Kids</a>
+								</li>
+								<li>
+									<a href="">Casa</a>
+								</li>
+								<li>
+									<a href="">Promoções</a>
+								</li>
+							</ul>
+						</nav>
+					</menu>
+				</div>
+				<div id="banners">
+					<div>
+						<img src="imgs/banner-01.jpg" alt="">
+					</div>
+					<div>
+						<img src="imgs/banner-02.jpg" alt="">
+					</div>
+				</div>
+			</div>
+		</header>
+		<main>
+			<section>
+				<div class="wrapper container">
+					<div class="posts content">
+						<div class="preview">
+							<img src="database/post-01.jpg" alt="">
+							<div class="info">
+								<div class="itens">
+									<div class="category">Beleza</div>
+									<h3>Ruiva Fatal</h3>
+									<p>Que o ruivo é o tom do momento todo mundo sabe.</p>
+									<a href="#">Saiba mais</a>
+								</div>
+							</div>
+						</div>
+						<div class="preview">
+							<img src="database/post-02.jpg" alt="">
+							<div class="info">
+								<div class="itens">
+									<div class="category"></div>
+									<h3>Promoção Bob Esponja</h3>
+									<p>Na compra de uma peça Bob Esponja, ganhe um brinde</p>
+									<a href="#">Continue Lendo</a>
+								</div>
+							</div>
+						</div>
+						<div class="preview">
+							<img src="database/post-03.jpg" alt="">
+							<div class="info">
+								<div class="itens">
+									<div class="category">Moda Logo</div>
+									<h3>Paixão por jeans</h3>
+									<p>Versátil, combina com vários estilos diferentes</p>
+									<a href="#">Saiba mais</a>
+								</div>
+							</div>
+						</div>
+						<div class="preview">
+							<img src="database/post-04.jpg" alt="">
+							<div class="info">
+								<div class="itens">
+									<div class="category">Beleza</div>
+									<h3>Poder instântaneo</h3>
+									<p>Batom vermelho deixa toda mulher poderosa.</p>
+									<a href="#">Saiba mais</a>
+								</div>
+							</div>
+						</div>
+					</div>
+					<aside class="sidebar">
+						<a href="#">
+							<img src="imgs/sidebar.jpg" alt="">
+							<p>Preencha a proposta de adesão</p>
+						</a>
+					</aside>
+				</div>
+			</section>
+			<section>
+				<div class="location">
+					<div class="container">
+						<div class="search">
+							<button id="auto-location">
+								Achar minha localização automaticamente
+							</button>
+							<p>ou</p>
+							<form class="sender">
+								<label for="cep-field">Digite o CEP de onde você está</label>
+								<fieldset>
+									<input type="text" pattern="\d{5}-?\d{3}" placeholder="CEP" id="cep-field" required>
+									<input type="button" value="Procurar" id="cep-button">
+								</fieldset>
+							</form>
+						</div>
+					</div>
+				</div>
+			</section>
+			<section>
+				<div class="follow container">
+					<div class="newsletter half">
+						<form action="" class="sender">
+							<label for="newsletter">Assine a newsletter do logo</label>
+							<fieldset>
+								<input type="email" placeholder="Seu e-mail" id="newsletter">
+								<input type="submit" value="Enviar">
+							</fieldset>
+						</form>
+					</div>
+					<div class="social-media half">
+						<p>Siga lojas logo nas redes sociais</p>
+						<ul>
+							<li>
+								<a href="#" target="_blank" class="facebook"></a>
+							</li>
+							<li>
+								<a href="#" target="_blank" class="youtube"></a>
+							</li>
+							<li>
+								<a href="#" target="_blank" class="instagram"></a>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</section>
+		</main>
+		<footer>
+			<div class="container">
+				<div class="useful half">
+					<ul>
+						<li>
+							<p>Lojas logo</p>
+							<ul>
+								<li>
+									<a href="#">Sobre</a>
+								</li>
+								<li>
+									<a href="#">Lojas</a>
+								</li>
+								<li>
+									<a href="#">Trabalhe conosco</a>
+								</li>
+								<li>
+									<a href="#">Contato</a>
+								</li>
+							</ul>
+						</li>
+						<li>
+							<p>Lista de atalhos</p>
+							<ul>
+								<li>
+									<a href="#">Portal do colaborador</a>
+								</li>
+								<li>
+									<a href="#">Promoções</a>
+								</li>
+								<li>
+									<a href="#">Cartão do cliente</a>
+								</li>
+								<li>
+									<a href="#">Cadastre-se</a>
+								</li>
+								<li>
+									<a href="#">Blog</a>
+								</li>
+							</ul>
+						</li>
+						<li>
+							<p>Sac Loja Logo <span>0800-701-0316</span></p>
+							<a href="#" class="bar-code">Solicitar 2ª via do boleto</a>
+						</li>
+					</ul>
+					<small>2015. Lojas Logo. Todos os direitos reservados</small>
+				</div>
+				<div class="featured half">
+					<img src="imgs/featured.jpg" alt="">
+					<small class="signature">mkt virtual</small>
+				</div>
+			</div>
+		</footer>
+	</div>
+
+	<!--============================
+	=            Sripts            =
+	=============================-->
+	<!-- build:js libs/jquery.min.js -->
+	<script src="bower_components/jquery/dist/jquery.min.js"></script>
+	<!-- endbuild -->
+	<!-- build:js libs/slick.min.js -->
+	<script src="bower_components/slick-carousel/slick/slick.min.js"></script>
+	<!-- endbuild -->
+	<script src="scripts/components/top.js"></script>
+	<script src="scripts/components/menu.js"></script>
+	<script src="scripts/components/location.js"></script>
+	<script src="scripts/components/banners.js"></script>
+	<script src="scripts/main.js"></script>
+	<!--============================
+	=            Sripts            =
+	=============================-->
+</body>
+</html>
diff --git a/dev/scripts/components/banners.js b/dev/scripts/components/banners.js
@@ -0,0 +1,38 @@
+function Banners () {
+	"use strict";
+
+	/*==================================
+	=            References            =
+	==================================*/
+	var banners = $("#banners");
+	/*=====  End of References  ======*/
+
+
+	/*===============================
+	=            Methods            =
+	===============================*/
+	this.pauseSlider = function () {
+		banners.slick("slickPause");
+	};
+
+	this.playSlider = function () {
+		banners.slick("slickPlay");
+	};
+
+	var settings = function () {
+		return {
+			adaptiveHeight : true,
+			autoplay    : true,
+			dots        : true,
+			mobileFirst : true
+		};
+	};
+	/*=====  End of Methods  ======*/
+
+
+	/*================================
+	=            Triggers            =
+	================================*/
+	banners.slick(settings());
+	/*=====  End of Triggers  ======*/
+}