Added template for website

assets/js/johndoe.js

@@ -0,0 +1,150 @@
+/*!
+=========================================================
+* JohnDoe Landing page
+=========================================================
+
+* Copyright: 2019 DevCRUD (https://devcrud.com)
+* Licensed: (https://devcrud.com/licenses)
+* Coded by www.devcrud.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// smooth scroll
+$(document).ready(function(){
+    $(".navbar .nav-link").on('click', function(event) {
+
+        if (this.hash !== "") {
+
+            event.preventDefault();
+
+            var hash = this.hash;
+
+            $('html, body').animate({
+                scrollTop: $(hash).offset().top
+            }, 700, function(){
+                window.location.hash = hash;
+            });
+        } 
+    });
+});
+
+// protfolio filters
+$(window).on("load", function() {
+    var t = $(".portfolio-container");
+    t.isotope({
+        filter: ".new",
+        animationOptions: {
+            duration: 750,
+            easing: "linear",
+            queue: !1
+        }
+    }), $(".filters a").click(function() {
+        $(".filters .active").removeClass("active"), $(this).addClass("active");
+        var i = $(this).attr("data-filter");
+        return t.isotope({
+            filter: i,
+            animationOptions: {
+                duration: 750,
+                easing: "linear",
+                queue: !1
+            }
+        }), !1
+    });
+});
+
+
+// google maps
+function initMap() {
+// Styles a map in night mode.
+    var map = new google.maps.Map(document.getElementById('map'), {
+        center: {lat: 40.674, lng: -73.945},
+        zoom: 12,
+        scrollwheel:  false,
+        navigationControl: false,
+        mapTypeControl: false,
+        scaleControl: false,
+      styles: [
+        {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
+        {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
+        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
+        {
+          featureType: 'administrative.locality',
+          elementType: 'labels.text.fill',
+          stylers: [{color: '#d59563'}]
+        },
+        {
+          featureType: 'poi',
+          elementType: 'labels.text.fill',
+          stylers: [{color: '#d59563'}]
+        },
+        {
+          featureType: 'poi.park',
+          elementType: 'geometry',
+          stylers: [{color: '#263c3f'}]
+        },
+        {
+          featureType: 'poi.park',
+          elementType: 'labels.text.fill',
+          stylers: [{color: '#6b9a76'}]
+        },
+        {
+          featureType: 'road',
+          elementType: 'geometry',
+          stylers: [{color: '#38414e'}]
+        },
+        {
+          featureType: 'road',
+          elementType: 'geometry.stroke',
+          stylers: [{color: '#212a37'}]
+        },
+        {
+          featureType: 'road',
+          elementType: 'labels.text.fill',
+          stylers: [{color: '#9ca5b3'}]
+        },
+        {
+          featureType: 'road.highway',
+          elementType: 'geometry',
+          stylers: [{color: '#746855'}]
+        },
+        {
+          featureType: 'road.highway',
+          elementType: 'geometry.stroke',
+          stylers: [{color: '#1f2835'}]
+        },
+        {
+          featureType: 'road.highway',
+          elementType: 'labels.text.fill',
+          stylers: [{color: '#f3d19c'}]
+        },
+        {
+          featureType: 'transit',
+          elementType: 'geometry',
+          stylers: [{color: '#2f3948'}]
+        },
+        {
+          featureType: 'transit.station',
+          elementType: 'labels.text.fill',
+          stylers: [{color: '#d59563'}]
+        },
+        {
+          featureType: 'water',
+          elementType: 'geometry',
+          stylers: [{color: '#17263c'}]
+        },
+        {
+          featureType: 'water',
+          elementType: 'labels.text.fill',
+          stylers: [{color: '#515c6d'}]
+        },
+        {
+          featureType: 'water',
+          elementType: 'labels.text.stroke',
+          stylers: [{color: '#17263c'}]
+        }
+      ]
+    });
+}

assets/scss/abstracts/_mixins.scss

@@ -0,0 +1,2 @@
+@import "mixins/transitions";
+@import "mixins/shadow";

assets/scss/abstracts/_variables.scss

@@ -0,0 +1,155 @@
+//
+// Color system
+//
+
+// stylelint-disable
+$white:    #fff;
+$gray-100: #f8f9fa;
+$gray-200: #eaf0fc;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black:    #000;
+
+$grays: ();
+$grays: map-merge((
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
+), $grays);
+
+$blue:    #79A9F5;
+$indigo:  #C45F90;
+$purple:  #A16AE8;
+$pink:    #FC8BC0;
+$red:     #F85C70;
+$orange:  #FF8882;
+$yellow:  #FAD02C;
+$green:   #A3C14A;
+$teal:    #20c997;
+$cyan:    #47D8E0;
+
+$colors: ();
+$colors: map-merge((
+  "blue":       $blue,
+  "indigo":     $indigo,
+  "purple":     $purple,
+  "pink":       $pink,
+  "red":        $red,
+  "orange":     $orange,
+  "yellow":     $yellow,
+  "green":      $green,
+  "teal":       $teal,
+  "cyan":       $cyan,
+  "white":      $white,
+  "gray":       $gray-600,
+  "gray-dark":  $gray-800
+), $colors);
+
+
+$primary:       $red;
+$secondary:     $gray-600;
+$success:       $green;
+$info:          $cyan;
+$warning:       $orange;
+$danger:        $red;
+$light:         $gray-100;
+$dark:          $gray-800;
+
+$theme-colors: ();
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+  (
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark
+  ),
+  $theme-colors
+);
+
+
+
+// Fonts
+//
+// Font, line-height, and color for body text, headings, and more.
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap');
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif:      'Source Sans Pro', sans-serif;
+$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$font-family-base:            $font-family-sans-serif;
+$headings-font-family:        'Dosis', sans-serif;
+// stylelint-enable value-keyword-case
+
+
+
+
+// Pagination
+
+$pagination-padding-y:              .3rem;
+$pagination-padding-x:              .7rem;
+$pagination-padding-y-sm:           .15rem;
+$pagination-padding-x-sm:           .5rem;
+$pagination-padding-y-lg:           .4rem ;
+$pagination-padding-x-lg:           1rem ;
+$pagination-border-color:           transparent;
+$pagination-color:                  $gray-800;
+$pagination-hover-bg:               rgba($primary, .3);
+$pagination-hover-border-color:     transparent;
+
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .55rem;
+$breadcrumb-bg:                     transparent;
+$breadcrumb-font-size:              .9rem;
+
+$breadcrumb-divider-color:          $gray-900;
+$breadcrumb-active-color:           $gray-700;
+$breadcrumb-link-color:             $gray-900;
+$breadcrumb-divider:                quote("·");
+
+
+
+// Navbar
+
+$navbar-padding-y:                  .8rem;
+$navbar-nav-link-padding-x:         1.5rem;
+$navbar-light-color:                rgba($black, .8);
+
+
+
+// Progress bars
+$progress-height:                   .3rem;
+
+
+// cards
+$card-border-radius:                0;
+
+
+
+// links
+$link-hover-decoration:     none;
+
+
+
+
+
+
+

assets/scss/abstracts/mixins/_shadow.scss

@@ -0,0 +1,4 @@
+@mixin shadow() {
+    box-shadow: 0 1px 10px rgba(54, 54, 54, 0.18);
+    -webkit-box-shadow: 0 1px 10px rgba(54, 54, 54, 0.18);
+}

assets/scss/abstracts/mixins/_transitions.scss

@@ -0,0 +1,4 @@
+@mixin custom-transition($duration) {
+    transition: $duration + s;
+    -webkit-transition: $duration + s;
+}

assets/scss/base/_typography.scss

@@ -0,0 +1,44 @@
+body {
+}
+/* typography */
+p {
+	font-size: calc(13px + (14 - 13) * ((100vw - 300px) / (1300 - 300)));
+	opacity: .8;
+	color: #444;
+} 
+
+.title {
+	font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1300 - 300)));
+}
+
+.icon-md {
+    font-size: 22px;
+}
+
+.icon-lg {
+    font-size: 30px;
+}
+
+.icon-xl {
+	font-size: 65px;
+}
+
+.info {
+    li {
+        padding-bottom: 8px;
+    }
+    span {
+        font-weight: 600;
+        font-size: 14px;
+        color: $gray-800;
+    }
+    color: $gray-600;
+    font-size: 14px;
+}
+
+.line {
+    display: block;
+    width: 25px;
+    height: 1.5px;
+    background-color: $primary;
+}

assets/scss/components/_breadcrumb.scss

@@ -0,0 +1,14 @@
+.breadcrumb {
+	font-size: $breadcrumb-font-size;
+
+	.breadcrumb-item {
+
+		a {
+			color: $breadcrumb-link-color;
+		}
+
+		&.active {
+			color: $breadcrumb-active-color;
+		}
+	}
+}