Teste DinDigital

.gitignore

@@ -1 +1,3 @@
 .DS_Store
+node_modules
+.sass-cache

gulpfile.js

@@ -0,0 +1,68 @@
+var gulp = require('gulp');
+var autoprefixer = require('gulp-autoprefixer');
+var imagemin = require('gulp-imagemin');
+var pngquant = require('imagemin-pngquant');
+var minifyCss = require('gulp-minify-css');
+var sass = require('gulp-ruby-sass');
+var uglify = require('gulp-uglify');
+
+//Coloca prefixo dos navegadores, automaticamente
+gulp.task('prefixer', function () {
+    return gulp.src('site/src/css/*.css')
+        .pipe(autoprefixer({
+            browsers: ['last 2 versions'],
+            cascade: false
+        }))
+        .pipe(gulp.dest('site/dist/css'));
+});
+
+//Comprime as imagens
+gulp.task('imagemin', function () {
+    return gulp.src('site/src/img/*')
+        .pipe(imagemin({
+            progressive: true,
+            svgoPlugins: [{removeViewBox: false}],
+            use: [pngquant()]
+        }))
+        .pipe(gulp.dest('site/dist/img'));
+});
+
+//Minifica o CSS
+gulp.task('minify-css', function() {
+  return gulp.src('site/src/css/*.css')
+    .pipe(minifyCss({compatibility: 'ie8'}))
+    .pipe(gulp.dest('site/dist/css'));
+});
+
+//SASS
+gulp.task('sass', function () {
+  return sass('site/src/scss/style.scss')
+    .on('error', sass.logError)
+    .pipe(gulp.dest('site/src/css/'));
+});
+
+//uglify
+gulp.task('compress', function() {
+  return gulp.src('site/src/js/*.js')
+    .pipe(uglify())
+    .pipe(gulp.dest('site/dist/js'));
+});
+
+//move
+gulp.task('move', function() {
+  return gulp.src('site/src/*.php')
+  .pipe(gulp.dest('site/dist'));
+});
+
+
+//altera em tempo real
+gulp.task('watch', function(){
+  gulp.watch('site/src/*.php', ['move']);
+  gulp.watch('site/src/scss/**/*.scss', ['sass','minify-css']);
+  gulp.watch('site/src/css/**/*.css', ['minify-css']);
+  gulp.watch('site/src/js/**/*.js', ['compress']);
+  gulp.watch('site/src/img/**/*.{jpg,png}', ['imagemin']);
+});
+
+//build
+gulp.task('build', ['sass', 'prefixer', 'minify-css', 'imagemin', 'compress']);

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "teste-front",
+  "version": "1.0.0",
+  "description": "Site",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Willian Santos",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^3.0.2",
+    "gulp-imagemin": "^2.3.0",
+    "gulp-minify-css": "^1.2.1",
+    "gulp-ruby-sass": "^2.0.4",
+    "gulp-uglify": "^1.4.1",
+    "imagemin-pngquant": "^4.2.0"
+  }
+}

site/dist/body.php

@@ -0,0 +1,145 @@
+<section class="details">
+   <div class="container">
+    <div class="box-25">
+
+      <h3> <span class="circle"><i class="fa fa-pencil"></i></span> Clean Theme</h3>
+      <p>Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie. Duis porta gravida augue sed viverra. Quisque at nulla leo, non aliquet mi. </p>
+      <a href="#"><strong><i class="fa fa-angle-right"></i></strong> Read More</a>
+    </div>
+    <div class="box-25">
+      <h3><span class="circle"><i class="fa fa-photo"></i></span> Responsive Design</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod placerat dui et tincidunt. Sed sollicitudin posuere auctor. Phasellus at ultricies nisl. Integer at leo eros.</p>
+      <a href="#"><strong><i class="fa fa-angle-right"></i></strong> Read More</a>
+    </div>
+    <div class="box-25">
+      <h3><span class="circle"><i class="fa fa-navicon"></i></span> Fully Layerd PSD</h3>
+      <p> Phasellus lobortis metus non augue sodales volutpat. Vestibulum sit amet nibh eros, hendrerit venenatis est. In vitae nulla nec purus cursus pretium sed id magna. 
+  </p>
+      <a href="#"><strong><i class="fa fa-angle-right"></i></strong> Read More</a>
+    </div>
+    <div class="box-25">
+      <h3><span class="circle"><i class="fa fa-paper-plane"></i></span> Read for Coding</h3>
+      <p>Vivamus convallis feugiat mauris sed posuere. Nam rutrum, quam quis euismod commodo, elit est porta quam, non placerat eros neque porta ante. Fusce quis odio urna. 
+  </p>
+      <a href="#"><strong><i class="fa fa-angle-right"></i></strong> Read More</a>
+    </div>
+    <div class="clear"></div>
+  </div>
+  </section>
+  <section class="latest">
+  <div class="container">
+   <h2 class="subtitle"><span class="blue"><i class="fa fa-mouse-pointer"></i></span> Latest Works</h2>
+   <div class="arrows">
+   <a href="#" id="prev"><span class="circle-little"><i class="fa fa-angle-left"></i></span></a>
+   <a href="#" id="next"><span class="circle-little"><i class="fa fa-angle-right"></i></span></a>
+   </div>
+   <div class="clear"></div>
+   <hr>
+   <ul  class="cycle-slideshow" data-cycle-slides="li" data-cycle-fx="carousel" data-cycle-timeout="0" carousel-offset="10" data-cycle-carousel-visible="4" data-cycle-next="#next" data-cycle-prev="#prev">
+    <li>
+     <div class="box-25-carousel">
+        <img src="img/latest-1.jpg" alt="To-do list portfolio">
+        <div class="hover-works">
+          <a class="eye" href="#"><i class="fa fa-eye">&nbsp;&nbsp;</i></a>
+          <a class="link" href="#"><i class="fa fa-link">&nbsp;&nbsp;</i></a>
+          <div class="clear"></div>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="box-25-carousel">
+        <img src="img/latest-2.jpg" alt="Orange juice portfolio">
+        <div class="hover-works">
+          <a class="eye" href="#"><i class="fa fa-eye">&nbsp;&nbsp;</i></a>
+          <a class="link" href="#"><i class="fa fa-link">&nbsp;&nbsp;</i></a>
+          <div class="clear"></div>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="box-25-carousel">
+        <img src="img/latest-3.jpg" alt="Geometric portfolio">
+        <div class="hover-works">
+          <a class="eye" href="#"><i class="fa fa-eye">&nbsp;&nbsp;</i></a>
+          <a class="link" href="#"><i class="fa fa-link">&nbsp;&nbsp;</i></a>
+          <div class="clear"></div>
+        </div>
+      </div>
+    </li>
+   <li>
+      <div class="box-25-carousel">
+        <img src="img/latest-4.jpg" alt="Focus portfolio">
+        <div class="hover-works">
+          <a class="eye" href="#"><i class="fa fa-eye">&nbsp;&nbsp;</i></a>
+          <a class="link" href="#"><i class="fa fa-link">&nbsp;&nbsp;</i></a>
+          <div class="clear"></div>
+        </div>
+      </div>
+   </li>
+     <li>
+     <div class="box-25-carousel">
+        <img src="img/latest-1.jpg" alt="To-do list portfolio">
+        <div class="hover-works">
+          <a class="eye" href="#"><i class="fa fa-eye">&nbsp;&nbsp;</i></a>
+          <a class="link" href="#"><i class="fa fa-link">&nbsp;&nbsp;</i></a>
+          <div class="clear"></div>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="box-25-carousel">
+        <img src="img/latest-2.jpg" alt="Orange juice portfolio">
+        <div class="hover-works">
+          <a class="eye" href="#"><i class="fa fa-eye">&nbsp;&nbsp;</i></a>
+          <a class="link" href="#"><i class="fa fa-link">&nbsp;&nbsp;</i></a>
+          <div class="clear"></div>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div class="box-25-carousel">
+        <img src="img/latest-3.jpg" alt="Geometric portfolio">
+        <div class="hover-works">
+          <a class="eye" href="#"><i class="fa fa-eye">&nbsp;&nbsp;</i></a>
+          <a class="link" href="#"><i class="fa fa-link">&nbsp;&nbsp;</i></a>
+          <div class="clear"></div>
+        </div>
+      </div>
+    </li>
+   <li>
+      <div class="box-25-carousel">
+        <img src="img/latest-4.jpg" alt="Focus portfolio">
+        <div class="hover-works">
+          <a class="eye" href="#"><i class="fa fa-eye">&nbsp;&nbsp;</i></a>
+          <a class="link" href="#"><i class="fa fa-link">&nbsp;&nbsp;</i></a>
+          <div class="clear"></div>
+        </div>
+      </div>
+   </li>
+     </ul>
+    <div class="clear"></div>
+      <hr>
+     </div>
+  </section>
+  <div class="container">
+  <section class="testimonials">
+    <h2 class="subtitle"><span class="blue"><i class="fa fa-comment"></i></span> Testimonials</h2>
+    <p class="text-testimonials">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nulla sapien, at aliquam erat. Sed vitae massa tellus. Aliquam commodo aliquam metus, sed iaculis nibh tempus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam nec nisi in nisl euismod fringilla.</p>
+    <p class="sign-testimonials"><strong><em>John Travis, CEO, DomainName.com</em></strong></p>
+  </section>
+  <section class="clients">
+    <h2 class="subtitle"><span class="blue"><i class="fa fa-users"></i></span> Our Clients</h2>
+    <img src="img/client-1.jpg" alt="Cox Comunications">
+    <img src="img/client-2.jpg" alt="CNN The World's news leader">
+    <img src="img/client-3.jpg" alt="Apartment Finder">
+    <img src="img/client-4.jpg" alt="John Deere">
+    <img src="img/client-5.jpg" alt="Banana Boat">
+    <img src="img/client-6.jpg" alt="Fujifilm">
+  </section>
+  <div class="clear"></div>
+  <section class="download">
+    <p>This is a clean and modern, four column website PSD template. You can code it into a Wordpress website, HTML5 responsive website for your personal or client works. So ahead and download this wonderful PSD template! </p>
+    <a href=""><i class="fa fa-download"></i> Download PSD</a>
+    <div class="clear"></div>
+  </section>
+</div>

site/dist/contact-body.php

@@ -0,0 +1,38 @@
+<div class="container">
+  <section class="contact">
+    <h2 class="title"><span class="blue"><i class="fa fa-envelope"></i></span> Contact Us</h2>
+
+ <div class="form">
+   <p>Thank you for stopping by. Please use the form below to contact us and will get back to you at the earliest possible <br><br>
+
+For feedback or questions, please email us at: <a href="mailto:email@bislite.com">email@bislite.com</a></p>
+  <form action="">
+    <label for="name">Nome</label><br>
+    <input type="text" name="name" required><br>
+    <label for="email">Email Adress</label><br>
+    <input type="email" name="email" required><br>
+    <label for="subject">Subject</label><br>
+    <input type="text" name="subject" required><br>
+    <label for="message">Message</label><br>
+    <textarea name="message" cols="30" rows="10" required></textarea><br>
+    <button class="submit"><i class="fa fa-arrow-circle-right"></i> Submit</button>
+
+  </form>
+
+ </div>
+ <div class="map">
+   <div class="here">
+     <p><strong>We are here</strong></p>
+     <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d58949.83612158797!2d-123.04002511456842!3d49.23395197996227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-BR!2sbr!4v1451096209374" width="260" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
+   </div>
+   <h2 class="title">Office Adress</h2>
+   <p><strong>BisLite Inc.</strong><br>
+    Always Street 265 <br>
+    0X - 125 - Canada <br><br>
+
+    Phone: 987-6543-210 <br>
+    Fax: 987-6543-210</p>
+ </div>
+ <div class="clear"></div>
+  </section>
+</div>

site/dist/contact.php

@@ -0,0 +1,11 @@
+<?php
+
+include 'head.php';
+
+include 'header.php';
+
+include 'contact-body.php';
+
+include 'footer.php';
+
+?>