diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..a10b44d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +/nbproject/private/ +/layout/ +/nbproject/ +/node_modules/ +/.sass-cache/ \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 00000000..6b34003c --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,31 @@ +'use strict'; +module.exports = function (grunt) { + // Project configuration. + grunt.initConfig({ + + sass: { + dist: { + files: { + 'assets/css/main.css': 'assets/sass/main.scss' + } + } + }, //sass + watch: { + css: { + files: 'assets/sass/*.scss', + tasks: ['sass'], + options: { + livereload: true + } + } + }//watch + }); + +//loading tasks + grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-contrib-watch'); + + +// tasks + grunt.registerTask('default', ['watch', 'sass']); +}; diff --git a/README.md b/README.md index 33973afc..e9f496e4 100644 --- a/README.md +++ b/README.md @@ -1,58 +1,8 @@ -# Seja um desenvolvedor na Profit-e RJ - -###### 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 seguindo as instruções abaixo; -* Faça um pull request (ou envie para getdevs@profite.com.br). - -### Instruções para o teste: - -##### O layout se encontra na pasta "layout" -# -##### Obrigatório -* HTML5 e CSS3 -* Interação com JSON para renderizar os produtos -* Interação com JSON para filtar os produtos -* Funcionalidade de adicionar ao carrinho* -* Funcionalidade de carregar mais produtos -* Não utilizar Bootstrap! - -##### Bônus -* Javascript sem plugins e modular -* Grunt, Gulp ou similar -* Responsividade -* REACT - -###### dúvidas: getdevs@profite.com.br \ No newline at end of file +# Teste Front-End PROFITE + +###### Projeto criado com NodeJS e GruntJS +###### O Projeto foi criado com a IDE NETBEANS, *então comitei a pasta nbproject* +###### Para instalar as dependências e executar o projeto faça o seguinte: +* Baixe o projeto para seu ambiente. +* Tenha o NodeJS instalado em seu ambiente. +* Navegue até a pasta do projeto e, na raiz execute o comendo NPM INSTALL. \ No newline at end of file diff --git a/assets/css/grid-responsive.css b/assets/css/grid-responsive.css new file mode 100644 index 00000000..b1a125ca --- /dev/null +++ b/assets/css/grid-responsive.css @@ -0,0 +1,1410 @@ +/* ============================================ */ +/* This file has a mobile-to-desktop breakpoint */ +/* ============================================ */ +@media (max-width: 400px) { + @-ms-viewport { + width: 320px; + } +} +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +.grid-container:before, .mobile-grid-5:before, .mobile-grid-10:before, .mobile-grid-15:before, .mobile-grid-20:before, .mobile-grid-25:before, .mobile-grid-30:before, .mobile-grid-35:before, .mobile-grid-40:before, .mobile-grid-45:before, .mobile-grid-50:before, .mobile-grid-55:before, .mobile-grid-60:before, .mobile-grid-65:before, .mobile-grid-70:before, .mobile-grid-75:before, .mobile-grid-80:before, .mobile-grid-85:before, .mobile-grid-90:before, .mobile-grid-95:before, .mobile-grid-100:before, .mobile-grid-33:before, .mobile-grid-66:before, .grid-5:before, .grid-10:before, .grid-15:before, .grid-20:before, .grid-25:before, .grid-30:before, .grid-35:before, .grid-40:before, .grid-45:before, .grid-50:before, .grid-55:before, .grid-60:before, .grid-65:before, .grid-70:before, .grid-75:before, .grid-80:before, .grid-85:before, .grid-90:before, .grid-95:before, .grid-100:before, .grid-33:before, .grid-66:before, .grid-offset:before, .clearfix:before, +.grid-container:after, +.mobile-grid-5:after, +.mobile-grid-10:after, +.mobile-grid-15:after, +.mobile-grid-20:after, +.mobile-grid-25:after, +.mobile-grid-30:after, +.mobile-grid-35:after, +.mobile-grid-40:after, +.mobile-grid-45:after, +.mobile-grid-50:after, +.mobile-grid-55:after, +.mobile-grid-60:after, +.mobile-grid-65:after, +.mobile-grid-70:after, +.mobile-grid-75:after, +.mobile-grid-80:after, +.mobile-grid-85:after, +.mobile-grid-90:after, +.mobile-grid-95:after, +.mobile-grid-100:after, +.mobile-grid-33:after, +.mobile-grid-66:after, +.grid-5:after, +.grid-10:after, +.grid-15:after, +.grid-20:after, +.grid-25:after, +.grid-30:after, +.grid-35:after, +.grid-40:after, +.grid-45:after, +.grid-50:after, +.grid-55:after, +.grid-60:after, +.grid-65:after, +.grid-70:after, +.grid-75:after, +.grid-80:after, +.grid-85:after, +.grid-90:after, +.grid-95:after, +.grid-100:after, +.grid-33:after, +.grid-66:after, +.grid-offset:after, +.clearfix:after { + content: "."; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; +} + +.grid-container:after, .mobile-grid-5:after, .mobile-grid-10:after, .mobile-grid-15:after, .mobile-grid-20:after, .mobile-grid-25:after, .mobile-grid-30:after, .mobile-grid-35:after, .mobile-grid-40:after, .mobile-grid-45:after, .mobile-grid-50:after, .mobile-grid-55:after, .mobile-grid-60:after, .mobile-grid-65:after, .mobile-grid-70:after, .mobile-grid-75:after, .mobile-grid-80:after, .mobile-grid-85:after, .mobile-grid-90:after, .mobile-grid-95:after, .mobile-grid-100:after, .mobile-grid-33:after, .mobile-grid-66:after, .grid-5:after, .grid-10:after, .grid-15:after, .grid-20:after, .grid-25:after, .grid-30:after, .grid-35:after, .grid-40:after, .grid-45:after, .grid-50:after, .grid-55:after, .grid-60:after, .grid-65:after, .grid-70:after, .grid-75:after, .grid-80:after, .grid-85:after, .grid-90:after, .grid-95:after, .grid-100:after, .grid-33:after, .grid-66:after, .grid-offset:after, .clearfix:after { + clear: both; +} + +.grid-container, .mobile-grid-5, .mobile-grid-10, .mobile-grid-15, .mobile-grid-20, .mobile-grid-25, .mobile-grid-30, .mobile-grid-35, .mobile-grid-40, .mobile-grid-45, .mobile-grid-50, .mobile-grid-55, .mobile-grid-60, .mobile-grid-65, .mobile-grid-70, .mobile-grid-75, .mobile-grid-80, .mobile-grid-85, .mobile-grid-90, .mobile-grid-95, .mobile-grid-100, .mobile-grid-33, .mobile-grid-66, .grid-5, .grid-10, .grid-15, .grid-20, .grid-25, .grid-30, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100, .grid-33, .grid-66, .grid-offset, .clearfix { + /* */ + *zoom: 1; + /* */ +} + +.grid-container { + margin-left: auto; + margin-right: auto; + max-width: 1200px; + padding-left: 10px; + padding-right: 10px; +} + +.mobile-grid-5, .mobile-grid-10, .mobile-grid-15, .mobile-grid-20, .mobile-grid-25, .mobile-grid-30, .mobile-grid-35, .mobile-grid-40, .mobile-grid-45, .mobile-grid-50, .mobile-grid-55, .mobile-grid-60, .mobile-grid-65, .mobile-grid-70, .mobile-grid-75, .mobile-grid-80, .mobile-grid-85, .mobile-grid-90, .mobile-grid-95, .mobile-grid-100, .mobile-grid-33, .mobile-grid-66, .grid-5, .grid-10, .grid-15, .grid-20, .grid-25, .grid-30, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100, .grid-33, .grid-66 { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-left: 10px; + padding-right: 10px; + /* */ + *padding-left: 0; + *padding-right: 0; + /* */ +} +.mobile-grid-5 > *, .mobile-grid-10 > *, .mobile-grid-15 > *, .mobile-grid-20 > *, .mobile-grid-25 > *, .mobile-grid-30 > *, .mobile-grid-35 > *, .mobile-grid-40 > *, .mobile-grid-45 > *, .mobile-grid-50 > *, .mobile-grid-55 > *, .mobile-grid-60 > *, .mobile-grid-65 > *, .mobile-grid-70 > *, .mobile-grid-75 > *, .mobile-grid-80 > *, .mobile-grid-85 > *, .mobile-grid-90 > *, .mobile-grid-95 > *, .mobile-grid-100 > *, .mobile-grid-33 > *, .mobile-grid-66 > *, .grid-5 > *, .grid-10 > *, .grid-15 > *, .grid-20 > *, .grid-25 > *, .grid-30 > *, .grid-35 > *, .grid-40 > *, .grid-45 > *, .grid-50 > *, .grid-55 > *, .grid-60 > *, .grid-65 > *, .grid-70 > *, .grid-75 > *, .grid-80 > *, .grid-85 > *, .grid-90 > *, .grid-95 > *, .grid-100 > *, .grid-33 > *, .grid-66 > * { + /* */ + *margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === 'block' && this.currentStyle.width === 'auto') && '10px'); + *margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === 'block' && this.currentStyle.width === 'auto') && '10px'); + /* */ +} + +.grid-parent { + padding-left: 0; + padding-right: 0; +} + +.grid-offset { + clear: both; + margin-left: -10px; + margin-right: -10px; +} + +@media (max-width: 767px) { + .mobile-push-5, .mobile-pull-5, .mobile-push-10, .mobile-pull-10, .mobile-push-15, .mobile-pull-15, .mobile-push-20, .mobile-pull-20, .mobile-push-25, .mobile-pull-25, .mobile-push-30, .mobile-pull-30, .mobile-push-35, .mobile-pull-35, .mobile-push-40, .mobile-pull-40, .mobile-push-45, .mobile-pull-45, .mobile-push-50, .mobile-pull-50, .mobile-push-55, .mobile-pull-55, .mobile-push-60, .mobile-pull-60, .mobile-push-65, .mobile-pull-65, .mobile-push-70, .mobile-pull-70, .mobile-push-75, .mobile-pull-75, .mobile-push-80, .mobile-pull-80, .mobile-push-85, .mobile-pull-85, .mobile-push-90, .mobile-pull-90, .mobile-push-95, .mobile-pull-95, .mobile-push-33, .mobile-pull-33, .mobile-push-66, .mobile-pull-66 { + position: relative; + } + + .hide-on-mobile { + display: none !important; + } + + .mobile-grid-5 { + float: left; + width: 5%; + /* */ + *width: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-5 { + margin-left: 5%; + } + + .mobile-suffix-5 { + margin-right: 5%; + } + + .mobile-push-5 { + left: 5%; + /* */ + *left: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-5 { + left: -5%; + /* */ + *left: expression(Math.floor(-0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-10 { + float: left; + width: 10%; + /* */ + *width: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-10 { + margin-left: 10%; + } + + .mobile-suffix-10 { + margin-right: 10%; + } + + .mobile-push-10 { + left: 10%; + /* */ + *left: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-10 { + left: -10%; + /* */ + *left: expression(Math.floor(-0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-15 { + float: left; + width: 15%; + /* */ + *width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-15 { + margin-left: 15%; + } + + .mobile-suffix-15 { + margin-right: 15%; + } + + .mobile-push-15 { + left: 15%; + /* */ + *left: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-15 { + left: -15%; + /* */ + *left: expression(Math.floor(-0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-20 { + float: left; + width: 20%; + /* */ + *width: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-20 { + margin-left: 20%; + } + + .mobile-suffix-20 { + margin-right: 20%; + } + + .mobile-push-20 { + left: 20%; + /* */ + *left: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-20 { + left: -20%; + /* */ + *left: expression(Math.floor(-0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-25 { + float: left; + width: 25%; + /* */ + *width: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-25 { + margin-left: 25%; + } + + .mobile-suffix-25 { + margin-right: 25%; + } + + .mobile-push-25 { + left: 25%; + /* */ + *left: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-25 { + left: -25%; + /* */ + *left: expression(Math.floor(-0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-30 { + float: left; + width: 30%; + /* */ + *width: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-30 { + margin-left: 30%; + } + + .mobile-suffix-30 { + margin-right: 30%; + } + + .mobile-push-30 { + left: 30%; + /* */ + *left: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-30 { + left: -30%; + /* */ + *left: expression(Math.floor(-0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-35 { + float: left; + width: 35%; + /* */ + *width: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-35 { + margin-left: 35%; + } + + .mobile-suffix-35 { + margin-right: 35%; + } + + .mobile-push-35 { + left: 35%; + /* */ + *left: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-35 { + left: -35%; + /* */ + *left: expression(Math.floor(-0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-40 { + float: left; + width: 40%; + /* */ + *width: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-40 { + margin-left: 40%; + } + + .mobile-suffix-40 { + margin-right: 40%; + } + + .mobile-push-40 { + left: 40%; + /* */ + *left: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-40 { + left: -40%; + /* */ + *left: expression(Math.floor(-0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-45 { + float: left; + width: 45%; + /* */ + *width: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-45 { + margin-left: 45%; + } + + .mobile-suffix-45 { + margin-right: 45%; + } + + .mobile-push-45 { + left: 45%; + /* */ + *left: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-45 { + left: -45%; + /* */ + *left: expression(Math.floor(-0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-50 { + float: left; + width: 50%; + /* */ + *width: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-50 { + margin-left: 50%; + } + + .mobile-suffix-50 { + margin-right: 50%; + } + + .mobile-push-50 { + left: 50%; + /* */ + *left: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-50 { + left: -50%; + /* */ + *left: expression(Math.floor(-0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-55 { + float: left; + width: 55%; + /* */ + *width: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-55 { + margin-left: 55%; + } + + .mobile-suffix-55 { + margin-right: 55%; + } + + .mobile-push-55 { + left: 55%; + /* */ + *left: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-55 { + left: -55%; + /* */ + *left: expression(Math.floor(-0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-60 { + float: left; + width: 60%; + /* */ + *width: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-60 { + margin-left: 60%; + } + + .mobile-suffix-60 { + margin-right: 60%; + } + + .mobile-push-60 { + left: 60%; + /* */ + *left: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-60 { + left: -60%; + /* */ + *left: expression(Math.floor(-0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-65 { + float: left; + width: 65%; + /* */ + *width: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-65 { + margin-left: 65%; + } + + .mobile-suffix-65 { + margin-right: 65%; + } + + .mobile-push-65 { + left: 65%; + /* */ + *left: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-65 { + left: -65%; + /* */ + *left: expression(Math.floor(-0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-70 { + float: left; + width: 70%; + /* */ + *width: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-70 { + margin-left: 70%; + } + + .mobile-suffix-70 { + margin-right: 70%; + } + + .mobile-push-70 { + left: 70%; + /* */ + *left: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-70 { + left: -70%; + /* */ + *left: expression(Math.floor(-0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-75 { + float: left; + width: 75%; + /* */ + *width: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-75 { + margin-left: 75%; + } + + .mobile-suffix-75 { + margin-right: 75%; + } + + .mobile-push-75 { + left: 75%; + /* */ + *left: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-75 { + left: -75%; + /* */ + *left: expression(Math.floor(-0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-80 { + float: left; + width: 80%; + /* */ + *width: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-80 { + margin-left: 80%; + } + + .mobile-suffix-80 { + margin-right: 80%; + } + + .mobile-push-80 { + left: 80%; + /* */ + *left: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-80 { + left: -80%; + /* */ + *left: expression(Math.floor(-0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-85 { + float: left; + width: 85%; + /* */ + *width: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-85 { + margin-left: 85%; + } + + .mobile-suffix-85 { + margin-right: 85%; + } + + .mobile-push-85 { + left: 85%; + /* */ + *left: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-85 { + left: -85%; + /* */ + *left: expression(Math.floor(-0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-90 { + float: left; + width: 90%; + /* */ + *width: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-90 { + margin-left: 90%; + } + + .mobile-suffix-90 { + margin-right: 90%; + } + + .mobile-push-90 { + left: 90%; + /* */ + *left: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-90 { + left: -90%; + /* */ + *left: expression(Math.floor(-0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-95 { + float: left; + width: 95%; + /* */ + *width: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-95 { + margin-left: 95%; + } + + .mobile-suffix-95 { + margin-right: 95%; + } + + .mobile-push-95 { + left: 95%; + /* */ + *left: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-95 { + left: -95%; + /* */ + *left: expression(Math.floor(-0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-33 { + float: left; + width: 33.33333%; + /* */ + *width: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-33 { + margin-left: 33.33333%; + } + + .mobile-suffix-33 { + margin-right: 33.33333%; + } + + .mobile-push-33 { + left: 33.33333%; + /* */ + *left: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-33 { + left: -33.33333%; + /* */ + *left: expression(Math.floor(-0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-66 { + float: left; + width: 66.66667%; + /* */ + *width: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-prefix-66 { + margin-left: 66.66667%; + } + + .mobile-suffix-66 { + margin-right: 66.66667%; + } + + .mobile-push-66 { + left: 66.66667%; + /* */ + *left: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-pull-66 { + left: -66.66667%; + /* */ + *left: expression(Math.floor(-0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .mobile-grid-100 { + clear: both; + width: 100%; + } +} +@media (min-width: 768px) { + .push-5, .pull-5, .push-10, .pull-10, .push-15, .pull-15, .push-20, .pull-20, .push-25, .pull-25, .push-30, .pull-30, .push-35, .pull-35, .push-40, .pull-40, .push-45, .pull-45, .push-50, .pull-50, .push-55, .pull-55, .push-60, .pull-60, .push-65, .pull-65, .push-70, .pull-70, .push-75, .pull-75, .push-80, .pull-80, .push-85, .pull-85, .push-90, .pull-90, .push-95, .pull-95, .push-33, .pull-33, .push-66, .pull-66 { + position: relative; + } + + .hide-on-desktop { + display: none !important; + } + + .grid-5 { + float: left; + width: 5%; + /* */ + *width: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-5 { + margin-left: 5%; + } + + .suffix-5 { + margin-right: 5%; + } + + .push-5 { + left: 5%; + /* */ + *left: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-5 { + left: -5%; + /* */ + *left: expression(Math.floor(-0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-10 { + float: left; + width: 10%; + /* */ + *width: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-10 { + margin-left: 10%; + } + + .suffix-10 { + margin-right: 10%; + } + + .push-10 { + left: 10%; + /* */ + *left: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-10 { + left: -10%; + /* */ + *left: expression(Math.floor(-0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-15 { + float: left; + width: 15%; + /* */ + *width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-15 { + margin-left: 15%; + } + + .suffix-15 { + margin-right: 15%; + } + + .push-15 { + left: 15%; + /* */ + *left: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-15 { + left: -15%; + /* */ + *left: expression(Math.floor(-0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-20 { + float: left; + width: 20%; + /* */ + *width: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-20 { + margin-left: 20%; + } + + .suffix-20 { + margin-right: 20%; + } + + .push-20 { + left: 20%; + /* */ + *left: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-20 { + left: -20%; + /* */ + *left: expression(Math.floor(-0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-25 { + float: left; + width: 25%; + /* */ + *width: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-25 { + margin-left: 25%; + } + + .suffix-25 { + margin-right: 25%; + } + + .push-25 { + left: 25%; + /* */ + *left: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-25 { + left: -25%; + /* */ + *left: expression(Math.floor(-0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-30 { + float: left; + width: 30%; + /* */ + *width: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-30 { + margin-left: 30%; + } + + .suffix-30 { + margin-right: 30%; + } + + .push-30 { + left: 30%; + /* */ + *left: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-30 { + left: -30%; + /* */ + *left: expression(Math.floor(-0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-35 { + float: left; + width: 35%; + /* */ + *width: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-35 { + margin-left: 35%; + } + + .suffix-35 { + margin-right: 35%; + } + + .push-35 { + left: 35%; + /* */ + *left: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-35 { + left: -35%; + /* */ + *left: expression(Math.floor(-0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-40 { + float: left; + width: 40%; + /* */ + *width: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-40 { + margin-left: 40%; + } + + .suffix-40 { + margin-right: 40%; + } + + .push-40 { + left: 40%; + /* */ + *left: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-40 { + left: -40%; + /* */ + *left: expression(Math.floor(-0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-45 { + float: left; + width: 45%; + /* */ + *width: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-45 { + margin-left: 45%; + } + + .suffix-45 { + margin-right: 45%; + } + + .push-45 { + left: 45%; + /* */ + *left: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-45 { + left: -45%; + /* */ + *left: expression(Math.floor(-0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-50 { + float: left; + width: 50%; + /* */ + *width: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-50 { + margin-left: 50%; + } + + .suffix-50 { + margin-right: 50%; + } + + .push-50 { + left: 50%; + /* */ + *left: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-50 { + left: -50%; + /* */ + *left: expression(Math.floor(-0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-55 { + float: left; + width: 55%; + /* */ + *width: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-55 { + margin-left: 55%; + } + + .suffix-55 { + margin-right: 55%; + } + + .push-55 { + left: 55%; + /* */ + *left: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-55 { + left: -55%; + /* */ + *left: expression(Math.floor(-0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-60 { + float: left; + width: 60%; + /* */ + *width: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-60 { + margin-left: 60%; + } + + .suffix-60 { + margin-right: 60%; + } + + .push-60 { + left: 60%; + /* */ + *left: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-60 { + left: -60%; + /* */ + *left: expression(Math.floor(-0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-65 { + float: left; + width: 65%; + /* */ + *width: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-65 { + margin-left: 65%; + } + + .suffix-65 { + margin-right: 65%; + } + + .push-65 { + left: 65%; + /* */ + *left: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-65 { + left: -65%; + /* */ + *left: expression(Math.floor(-0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-70 { + float: left; + width: 70%; + /* */ + *width: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-70 { + margin-left: 70%; + } + + .suffix-70 { + margin-right: 70%; + } + + .push-70 { + left: 70%; + /* */ + *left: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-70 { + left: -70%; + /* */ + *left: expression(Math.floor(-0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-75 { + float: left; + width: 75%; + /* */ + *width: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-75 { + margin-left: 75%; + } + + .suffix-75 { + margin-right: 75%; + } + + .push-75 { + left: 75%; + /* */ + *left: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-75 { + left: -75%; + /* */ + *left: expression(Math.floor(-0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-80 { + float: left; + width: 80%; + /* */ + *width: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-80 { + margin-left: 80%; + } + + .suffix-80 { + margin-right: 80%; + } + + .push-80 { + left: 80%; + /* */ + *left: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-80 { + left: -80%; + /* */ + *left: expression(Math.floor(-0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-85 { + float: left; + width: 85%; + /* */ + *width: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-85 { + margin-left: 85%; + } + + .suffix-85 { + margin-right: 85%; + } + + .push-85 { + left: 85%; + /* */ + *left: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-85 { + left: -85%; + /* */ + *left: expression(Math.floor(-0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-90 { + float: left; + width: 90%; + /* */ + *width: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-90 { + margin-left: 90%; + } + + .suffix-90 { + margin-right: 90%; + } + + .push-90 { + left: 90%; + /* */ + *left: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-90 { + left: -90%; + /* */ + *left: expression(Math.floor(-0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-95 { + float: left; + width: 95%; + /* */ + *width: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-95 { + margin-left: 95%; + } + + .suffix-95 { + margin-right: 95%; + } + + .push-95 { + left: 95%; + /* */ + *left: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-95 { + left: -95%; + /* */ + *left: expression(Math.floor(-0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-33 { + float: left; + width: 33.33333%; + /* */ + *width: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-33 { + margin-left: 33.33333%; + } + + .suffix-33 { + margin-right: 33.33333%; + } + + .push-33 { + left: 33.33333%; + /* */ + *left: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-33 { + left: -33.33333%; + /* */ + *left: expression(Math.floor(-0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-66 { + float: left; + width: 66.66667%; + /* */ + *width: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .prefix-66 { + margin-left: 66.66667%; + } + + .suffix-66 { + margin-right: 66.66667%; + } + + .push-66 { + left: 66.66667%; + /* */ + *left: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .pull-66 { + left: -66.66667%; + /* */ + *left: expression(Math.floor(-0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); + /* */ + } + + .grid-100 { + clear: both; + width: 100%; + } +} diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 00000000..8e6bae57 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,159 @@ +h1 { + font-size: 2rem; } + +h2 { + font-size: 1.5rem; } + +h3 { + font-size: 1.4rem; } + +h4 { + font-size: 1.3rem; } + +h5 { + font-size: 1.2rem; } + +h6 { + font-size: 1.1rem; } + +h1, h2, h3, h4, h5, h6 { + clear: both; + font-weight: 100; + font-family: 'BellCentennialBT', Helvetica, Arial, sans-serif; } + +p { + font-size: 10px; + font-size: 1rem; } + +@font-face { + font-family: 'BellCentennialBT'; + src: url("../../fonts/BellCentennialBT.eot"); + src: url("../../fonts/fonts/BellCentennialBT.eot?#iefix") format("embedded-opentype"), url("../../fonts/fonts/BellCentennialBT.woff") format("woff"), url("../../fonts/fonts/BellCentennialBT.ttf") format("truetype"), url("../../fonts/fonts/BellCentennialBT.svg") format("svg"); + font-weight: normal; + font-style: normal; } +body, +a, +button, +input, +select, +textarea { + font-size: 10px; + font-size: 1rem; + font-family: 'BellCentennialBT', Helvetica, Arial, sans-serif; } + +body { + margin: 0; } + +a { + outline: none; } + +header { + border-bottom: 3px solid #ff9f1c; + padding-top: 20px; + padding-bottom: 20px; } + header .logo-profite { + width: 100%; } + header .bag { + background-image: url(./../img/bag.png); + background-repeat: no-repeat; + background-position: 5px 10px; + padding: 20px; + background-size: 80%; + background-color: transparent; + border: none; } + header .count-buy { + border-radius: 100%; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + background-color: #ff9f1c; + color: #ffffff; + height: 20px; + width: 20px; + position: absolute; + top: 25px; + right: 8px; } + header .count-buy span { + text-align: center; + font-size: 9px; + font-size: 0.9rem; + display: block; } + +.inner-top-desktop .inner-top-desktop-order { + width: 100%; + margin-top: 33px; } + +main .inner-top { + text-align: center; } + main .inner-top .inner-top-btn { + margin-top: 15px; + margin-bottom: 15px; } + main .inner-top .inner-top-btn .inner-top-btn-left, main .inner-top .inner-top-btn .inner-top-btn-right { + border-top: 1px solid #999999; + border-right: 1px solid #999999; + border-bottom: 1px solid #999999; + border-left: 1px solid #999999; } + main .inner-top .inner-top-btn .inner-top-btn-left button, main .inner-top .inner-top-btn .inner-top-btn-right button { + background: none; + color: #666666; + border: none; + font-size: 10px; + font-size: 1rem; + padding: 8px; + cursor: pointer; + display: block; + width: 100%; } + main .inner-top .inner-top-btn .inner-top-btn-right { + border-left: none; } +main .main-products-list { + list-style: none; + padding: 0; } + main .main-products-list .main-products-list-items { + padding-bottom: 40px; } + main .main-products-list .main-products-list-items img { + display: block; + margin: 0 auto; } + +footer { + background-color: #000000; + padding: 7px; + text-align: center; } + footer p { + font-family: 'BellCentennialBT', Helvetica, Arial, sans-serif; + color: #999999; } + +/* queries mobile +----------------------------------------*/ +@media (max-width: 480px) { + h1 { + font-size: 15px; + font-size: 1.5rem; + margin-bottom: 0; + font-weight: 100; } + + footer p { + font-size: 7px; + font-size: 0.7rem; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 20px; + padding-right: 20px; } } +@media (max-width: 320px) { + footer p { + font-size: 7px; + font-size: 0.7rem; } } +@media (min-width: 321px) and (max-width: 480px) { + header .bag { + background-image: url(./../img/bag.png); + background-repeat: no-repeat; + background-position: 32px 0px; + margin-top: 20px; + margin-bottom: 20px; + background-size: 60%; } + header .bag .count-buy { + top: 40px; } + + footer p { + font-size: 7px; + font-size: 0.7rem; } } + +/*# sourceMappingURL=main.css.map */ diff --git a/assets/css/main.css.map b/assets/css/main.css.map new file mode 100644 index 00000000..8aaa89a4 --- /dev/null +++ b/assets/css/main.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["../sass/typography/_headings.scss","../sass/mixins/_mixins.scss","../sass/typography/_typography.scss","../sass/_theme.scss","../sass/colors/_colors.scss"], +"names": [], +"file": "main.css" +} diff --git a/assets/fonts/BellCentennialBT.eot b/assets/fonts/BellCentennialBT.eot new file mode 100644 index 00000000..41e25d2d Binary files /dev/null and b/assets/fonts/BellCentennialBT.eot differ diff --git a/assets/fonts/BellCentennialBT.svg b/assets/fonts/BellCentennialBT.svg new file mode 100644 index 00000000..fdb4f6dd --- /dev/null +++ b/assets/fonts/BellCentennialBT.svg @@ -0,0 +1,568 @@ + + + + +Created by FontForge 20161013 at Sun Dec 20 19:15:16 1992 + By ,,, +Copyright 1990-1993 Bitstream Inc. All rights reserved. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/fonts/BellCentennialBT.ttf b/assets/fonts/BellCentennialBT.ttf new file mode 100644 index 00000000..45014e59 Binary files /dev/null and b/assets/fonts/BellCentennialBT.ttf differ diff --git a/assets/fonts/BellCentennialBT.woff b/assets/fonts/BellCentennialBT.woff new file mode 100644 index 00000000..a648ff24 Binary files /dev/null and b/assets/fonts/BellCentennialBT.woff differ diff --git a/assets/fonts/BellCentennialBT.woff2 b/assets/fonts/BellCentennialBT.woff2 new file mode 100644 index 00000000..a5a98195 Binary files /dev/null and b/assets/fonts/BellCentennialBT.woff2 differ diff --git a/assets/img/bag.png b/assets/img/bag.png new file mode 100644 index 00000000..f5ed2659 Binary files /dev/null and b/assets/img/bag.png differ diff --git a/assets/img/favicon/favicon-16x16.png b/assets/img/favicon/favicon-16x16.png new file mode 100644 index 00000000..448bf6eb Binary files /dev/null and b/assets/img/favicon/favicon-16x16.png differ diff --git a/assets/img/favicon/favicon-32x32.png b/assets/img/favicon/favicon-32x32.png new file mode 100644 index 00000000..02bcc25d Binary files /dev/null and b/assets/img/favicon/favicon-32x32.png differ diff --git a/assets/img/logo-profite.png b/assets/img/logo-profite.png new file mode 100644 index 00000000..74841cca Binary files /dev/null and b/assets/img/logo-profite.png differ diff --git a/assets/img/produtos/bata-bordada-floral.jpg b/assets/img/produtos/bata-bordada-floral.jpg new file mode 100644 index 00000000..45495fd4 Binary files /dev/null and b/assets/img/produtos/bata-bordada-floral.jpg differ diff --git a/assets/img/produtos/bata-bordada.jpg b/assets/img/produtos/bata-bordada.jpg new file mode 100644 index 00000000..9e57125f Binary files /dev/null and b/assets/img/produtos/bata-bordada.jpg differ diff --git a/assets/img/produtos/conjunto-social.jpg b/assets/img/produtos/conjunto-social.jpg new file mode 100644 index 00000000..ccf8e845 Binary files /dev/null and b/assets/img/produtos/conjunto-social.jpg differ diff --git a/assets/img/produtos/verstido-texturizado.jpg b/assets/img/produtos/verstido-texturizado.jpg new file mode 100644 index 00000000..f3eabf7d Binary files /dev/null and b/assets/img/produtos/verstido-texturizado.jpg differ diff --git a/assets/img/produtos/vestido-azul.jpg b/assets/img/produtos/vestido-azul.jpg new file mode 100644 index 00000000..5fab277e Binary files /dev/null and b/assets/img/produtos/vestido-azul.jpg differ diff --git a/assets/img/produtos/vestido-branco-basico.jpg b/assets/img/produtos/vestido-branco-basico.jpg new file mode 100644 index 00000000..998f3ed3 Binary files /dev/null and b/assets/img/produtos/vestido-branco-basico.jpg differ diff --git a/assets/img/produtos/vestido-comteporaneo.jpg b/assets/img/produtos/vestido-comteporaneo.jpg new file mode 100644 index 00000000..78fa1010 Binary files /dev/null and b/assets/img/produtos/vestido-comteporaneo.jpg differ diff --git a/assets/img/produtos/vestido-floral-pequeno.jpg b/assets/img/produtos/vestido-floral-pequeno.jpg new file mode 100644 index 00000000..61d8f2f4 Binary files /dev/null and b/assets/img/produtos/vestido-floral-pequeno.jpg differ diff --git a/assets/img/produtos/vestido-listrado.jpg b/assets/img/produtos/vestido-listrado.jpg new file mode 100644 index 00000000..27594f9b Binary files /dev/null and b/assets/img/produtos/vestido-listrado.jpg differ diff --git a/assets/js/produtos.json b/assets/js/produtos.json new file mode 100644 index 00000000..a985a58a --- /dev/null +++ b/assets/js/produtos.json @@ -0,0 +1,11 @@ +{ + "assets/img/produtos/bata-bordada-floral.jpg" : "Bata Bordada Floral", + "assets/img/produtos/bata-bordada.jpg" : "Bata Bordada", + "assets/img/produtos/conjunto-social.jpg" : "Conjunto Social", + "assets/img/produtos/verstido-texturizado.jpg" : "Verstido Texturizado", + "assets/img/produtos/vestido-azul.jpg" : "Bata Bordada Floral", + "assets/img/produtos/vestido-branco-basico.jpg" : "Vestido Branco Basico", + "assets/img/produtos/vestido-comteporaneo.jpg" : "Vestido Comteporaneo", + "assets/img/produtos/vestido-floral-pequeno.jpg": "Vestido Floral Pequeno", + "assets/img/produtos/vestido-listrado.jpg" : "Vestido Listrado" +} \ No newline at end of file diff --git a/assets/js/produtos/carrega-produtos.js b/assets/js/produtos/carrega-produtos.js new file mode 100644 index 00000000..a969c669 --- /dev/null +++ b/assets/js/produtos/carrega-produtos.js @@ -0,0 +1,13 @@ +$.getJSON("assets/js/produtos.json", function (data) { + var items = []; + $.each(data, function (id, title) { + items.push('
  • \n\ + \n\ +
    • '); + }); + + $("