Add files via upload

timothyjacque · Nov 7, 2017 · 089555f · 089555f
1 parent 6099793
commit 089555f
Show file tree

Hide file tree

Showing 38 changed files with 12,913 additions and 0 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,42 @@
+const gulp = require('gulp');
+const browserSync = require('browser-sync').create();
+const sass = require('gulp-sass');
+
+// Compile Sass & Inject Into Browser
+gulp.task('sass', function(){
+  return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
+    .pipe(sass())
+    .pipe(gulp.dest("src/css"))
+    .pipe(browserSync.stream());
+});
+
+// Move JS Files to src/js
+gulp.task('js', function(){
+  return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
+  .pipe(gulp.dest("src/js"))
+  .pipe(browserSync.stream());
+});
+
+// Watch Sass & Serve
+gulp.task('serve', ['sass'], function(){
+  browserSync.init({
+    server: "./src"
+  });
+
+  gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
+  gulp.watch("src/*.html").on('change', browserSync.reload);
+});
+
+// Move Fonts Folder to src
+gulp.task('fonts', function(){
+  return gulp.src('node_modules/font-awesome/fonts/*')
+  .pipe(gulp.dest("src/fonts"));
+});
+
+// Move Font Awesome CSS to src/css
+gulp.task('fa', function(){
+  return gulp.src('node_modules/font-awesome/css/font-awesome.min.css')
+  .pipe(gulp.dest("src/css"));
+});
+
+gulp.task('default', ['js', 'serve', 'fa', 'fonts']);
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "bs4starter",
+  "version": "1.0.0",
+  "description": "Bootstrap 4 workflow",
+  "main": "index.js",
+  "scripts": {
+    "start": "gulp"
+  },
+  "author": "Timothy Jacque",
+  "license": "MIT",
+  "dependencies": {
+    "bootstrap": "4.0.0-beta",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.2.1",
+    "popper.js": "^1.12.6"
+  },
+  "devDependencies": {
+    "browser-sync": "^2.18.13",
+    "gulp": "^3.9.1",
+    "gulp-sass": "^3.1.0"
+  }
+}
diff --git a/src/about.html b/src/about.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Glozzom Theme</title>
+  <link rel="stylesheet" href="css/font-awesome.min.css">
+  <link rel="stylesheet" href="css/bootstrap.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/slick-theme.css">
+  <link rel="stylesheet" href="css/slick.css">
+</head>
+<body>
+  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+    <div class="container">
+      <a href="index.html" class="navbar-brand">Glozzom</a>
+      <button class="navbar-toggler" data-toggle="collapse" data-target="#navNavbar"><span class="navbar-toggler-icon"></span></button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item">
+            <a href="index.html" class="nav-link">Home</a>
+          </li>
+          <li class="nav-item active">
+            <a href="about.html" class="nav-link">About Us</a>
+          </li>
+          <li class="nav-item">
+            <a href="services.html" class="nav-link">Services</a>
+          </li>
+          <li class="nav-item">
+            <a href="blog.html" class="nav-link">Blog</a>
+          </li>
+          <li class="nav-item">
+            <a href="contact.html" class="nav-link">Contact</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <header id="page-header">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6 m-auto text-center">
+          <h1>About Us</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, aspernatur.</p>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- ABOUT SECTION -->
+  <section id="about" class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6">
+          <h1>What We Do</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et repellendus temporibus, tempora dicta deleniti quam in nisi voluptate velit, obcaecati corporis porro hic. Reiciendis vitae suscipit impedit, sunt optio repellat.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, facere iste impedit hic praesentium veritatis iure facilis officiis adipisci dicta quod magnam nostrum quia amet corrupti laudantium, ab aut quibusdam.</p>
+        </div>
+        <div class="col-md-6">
+          <img src="http://lorempixel.com/400/400/business/8" alt="" class="about-img img-fluid rounded-circle d-none d-md-block">
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ICON BOXES -->
+  <section id="icon-boxes" class="p-5">
+    <div class="container">
+      <div class="row mb-4">
+        <div class="col-md-4">
+          <div class="card bg-danger text-center text-white">
+            <div class="card-body">
+              <i class="fa fa-building"></i>
+              <h3>Lorem ipsum</h3>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, temporibus!
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card bg-danger text-center text-white">
+            <div class="card-body">
+              <i class="fa fa-bullhorn"></i>
+              <h3>Lorem ipsum</h3>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, temporibus!
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card bg-danger text-center text-white">
+            <div class="card-body">
+              <i class="fa fa-comments"></i>
+              <h3>Lorem ipsum</h3>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, temporibus!
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="row mb-4">
+        <div class="col-md-4">
+          <div class="card bg-danger text-center text-white">
+            <div class="card-body">
+              <i class="fa fa-clock-o"></i>
+              <h3>Lorem ipsum</h3>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, temporibus!
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card bg-danger text-center text-white">
+            <div class="card-body">
+              <i class="fa fa-cc"></i>
+              <h3>Lorem ipsum</h3>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, temporibus!
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="card bg-danger text-center text-white">
+            <div class="card-body">
+              <i class="fa fa-coffee"></i>
+              <h3>Lorem ipsum</h3>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, temporibus!
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- TESTIMONIALS -->
+  <section id="testimonial-secton" class="p-4 bg-dark text-white">
+    <div class="container">
+      <h2 class="text-center">Testimonials</h2>
+      <div class="row">
+        <div class="col">
+          <div class="slider">
+            <div>
+              <blockquote class="blockquote">
+                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, fugit!</p>
+                <footer class="blockquote-footer">John Doe From <cite title="Company 1">Company 1</cite></footer>
+              </blockquote>
+            </div>
+            <div>
+              <blockquote class="blockquote">
+                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, fugit!</p>
+                <footer class="blockquote-footer">Steve Smith From <cite title="Company 2">Company 2</cite></footer>
+              </blockquote>
+            </div>
+            <div>
+              <blockquote class="blockquote">
+                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, fugit!</p>
+                <footer class="blockquote-footer">Jessica Alba From <cite title="Company 3">Company 3</cite></footer>
+              </blockquote>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+
+  <footer id="main-footer" class="text-center p-4">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <p>Copyright 2017 &copy; Glozzom</p>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+
+  <script src="js/jquery.min.js"></script>
+  <script src="js/popper.min.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
+  <script src="js/slick.js"></script>
+  <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/src/blog.html b/src/blog.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Glozzom Theme</title>
+  <link rel="stylesheet" href="css/font-awesome.min.css">
+  <link rel="stylesheet" href="css/bootstrap.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/slick-theme.css">
+  <link rel="stylesheet" href="css/slick.css">
+</head>
+<body>
+  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+    <div class="container">
+      <a href="index.html" class="navbar-brand">Glozzom</a>
+      <button class="navbar-toggler" data-toggle="collapse" data-target="#navNavbar"><span class="navbar-toggler-icon"></span></button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item">
+            <a href="index.html" class="nav-link">Home</a>
+          </li>
+          <li class="nav-item">
+            <a href="about.html" class="nav-link">About Us</a>
+          </li>
+          <li class="nav-item">
+            <a href="services.html" class="nav-link">Services</a>
+          </li>
+          <li class="nav-item active">
+            <a href="blog.html" class="nav-link">Blog</a>
+          </li>
+          <li class="nav-item">
+            <a href="contact.html" class="nav-link">Contact</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <header id="page-header">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6 m-auto text-center">
+          <h1>Read Our Blog</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, aspernatur.</p>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- BLOG SECTION -->
+  <section id="blog" class="py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="card-columns">
+            <div class="card">
+              <img src="http://www.lorempixel.com/500/500/city/1" alt="" class="card-img-top img-fluid">
+              <div class="card-body">
+                <h4 class="card-title">Blog Post One</h4>
+                <small class="text-muted">Written by Jessica Alba on 07/20</small>
+                <hr>
+                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minima, incidunt, laudantium repellendus excepturi distinctio culpa, aliquid modi doloribus deserunt provident! Natus molestias nobis sint! Quod molestias ullam, aliquid dolorem.</p>
+              </div>
+            </div>
+
+            <div class="card p-3">
+              <blockquote class="card-blockquote card-body">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, qui, voluptatibus. Omnis aliquam, officia perferendis!</p>
+                <footer>
+                  <small class="text-muted">Someone Famous in <cite title="Source Title">Source Title</cite></small>
+                </footer>
+              </blockquote>
+            </div>
+
+            <div class="card">
+              <img src="http://www.lorempixel.com/500/500/city/2" alt="" class="card-img-top img-fluid">
+              <div class="card-body">
+                <h4 class="card-title">Blog Post Two</h4>
+                <small class="text-muted">Written by Jessica Alba on 07/20</small>
+                <hr>
+                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minima, incidunt, laudantium repellendus excepturi distinctio culpa, aliquid modi doloribus deserunt provident! Natus molestias nobis sint! Quod molestias ullam, aliquid dolorem.</p>
+              </div>
+            </div>
+
+            <div class="card p-3 bg-danger text-white">
+              <blockquote class="card-blockquote card-body">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, qui, voluptatibus. Omnis aliquam, officia perferendis!</p>
+                <footer>
+                  <small>Someone Famous in <cite title="Source Title">Source Title</cite></small>
+                </footer>
+              </blockquote>
+            </div>
+
+            <div class="card">
+              <img src="http://www.lorempixel.com/500/500/city/3" alt="" class="card-img-top img-fluid">
+              <div class="card-body">
+                <h4 class="card-title">Blog Post Three</h4>
+                <small class="text-muted">Written by Jessica Alba on 07/20</small>
+                <hr>
+                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minima, incidunt, laudantium repellendus excepturi distinctio culpa, aliquid modi doloribus deserunt provident! Natus molestias nobis sint! Quod molestias ullam, aliquid dolorem.</p>
+              </div>
+            </div>
+
+            <div class="card p-3 bg-primary text-white">
+              <blockquote class="card-blockquote card-body">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, qui, voluptatibus. Omnis aliquam, officia perferendis!</p>
+                <footer>
+                  <small>Someone Famous in <cite title="Source Title">Source Title</cite></small>
+                </footer>
+              </blockquote>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+
+  <!-- FOOTER -->
+
+  <footer id="main-footer" class="text-center p-4">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <p>Copyright 2017 &copy; Glozzom</p>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+
+  <script src="js/jquery.min.js"></script>
+  <script src="js/popper.min.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
+  <script src="js/slick.js"></script>
+  <script src="js/main.js"></script>
+</body>
+</html>