├── LICENSE ├── README.md ├── cart.html ├── category.html ├── checkout.html ├── css ├── bootstrap.css ├── magnific-popup.css ├── style.css ├── style.css.map ├── style.min.css └── stylesheet.css ├── fonts ├── line-awesome.eot ├── line-awesome.svg ├── line-awesome.ttf ├── line-awesome.woff └── line-awesome.woff2 ├── img ├── applewatch-wd-1200x600.jpg ├── ipad.png └── products │ ├── 1.jpg │ ├── 10.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── index.html ├── js ├── bootstrap.js ├── bootstrap.min.js ├── jquery.js ├── jquery.magnific-popup.min.js ├── jquery.min.js ├── main.js ├── owl.carousel.js ├── owl.carousel.min.js ├── popper.min.js └── tether.min.js ├── login.html ├── product.html ├── register.html └── scss ├── _common.css ├── _typesettings.scss ├── _utils.scss ├── bootstrap ├── .scss-lint.yml ├── _alert.scss ├── _badge.scss ├── _breadcrumb.scss ├── _button-group.scss ├── _buttons.scss ├── _card.scss ├── _carousel.scss ├── _close.scss ├── _code.scss ├── _custom-forms.scss ├── _custom.scss ├── _dropdown.scss ├── _forms.scss ├── _functions.scss ├── _grid.scss ├── _images.scss ├── _input-group.scss ├── _jumbotron.scss ├── _line-awesome.scss ├── _list-group.scss ├── _media.scss ├── _medialibrary.scss ├── _mixins.scss ├── _modal.scss ├── _nav.scss ├── _navbar.scss ├── _pagination.scss ├── _popover.scss ├── _print.scss ├── _progress.scss ├── _reboot.scss ├── _responsive-embed.scss ├── _root.scss ├── _tables.scss ├── _tooltip.scss ├── _transitions.scss ├── _type.scss ├── _utilities.scss ├── _variables.scss ├── bootstrap-grid.scss ├── bootstrap-reboot.scss ├── bootstrap.scss ├── mixins │ ├── _alert.scss │ ├── _background-variant.scss │ ├── _badge.scss │ ├── _border-radius.scss │ ├── _box-shadow.scss │ ├── _breakpoints.scss │ ├── _buttons.scss │ ├── _cards.scss │ ├── _caret.scss │ ├── _clearfix.scss │ ├── _float.scss │ ├── _forms.scss │ ├── _gradients.scss │ ├── _grid-framework.scss │ ├── _grid.scss │ ├── _hover.scss │ ├── _image.scss │ ├── _list-group.scss │ ├── _lists.scss │ ├── _nav-divider.scss │ ├── _navbar-align.scss │ ├── _pagination.scss │ ├── _reset-text.scss │ ├── _resize.scss │ ├── _screen-reader.scss │ ├── _size.scss │ ├── _table-row.scss │ ├── _text-emphasis.scss │ ├── _text-hide.scss │ ├── _text-truncate.scss │ ├── _transforms.scss │ ├── _transition.scss │ └── _visibility.scss └── utilities │ ├── _align.scss │ ├── _background.scss │ ├── _borders.scss │ ├── _clearfix.scss │ ├── _display.scss │ ├── _embed.scss │ ├── _flex.scss │ ├── _float.scss │ ├── _position.scss │ ├── _screenreaders.scss │ ├── _shadows.scss │ ├── _sizing.scss │ ├── _spacing.scss │ ├── _text.scss │ └── _visibility.scss ├── default.scss ├── partials ├── _filtergrid.scss ├── _footer.scss ├── _gallery_section.scss ├── _grid.scss ├── _header.scss ├── _hero.scss ├── _masonry.scss ├── _megamenu.scss ├── _megamenu_bak.scss ├── _navbar.scss ├── _newsletter.scss ├── _parallax.scss ├── _product-page.scss ├── _products.scss ├── _products_bak.scss ├── _responsive-spacing.scss ├── _sequence.scss ├── _sequence_bak.scss ├── _sideblock.scss ├── _social-icons.scss ├── _socialband.scss ├── _typography.scss └── flexslider.scss └── vendor ├── _ionicons-font.scss ├── _ionicons-icons.scss ├── _ionicons-variables.scss ├── _ionicons.scss ├── _line-awesome.scss ├── _wookmark.scss └── owlcarousel ├── _animate.scss ├── _autoheight.scss ├── _core.scss ├── _lazyload.scss ├── _theme.default.scss ├── _theme.green.scss ├── _theme.scss ├── _video.scss ├── owl.carousel.scss ├── owl.theme.default.scss └── owl.theme.green.scss /README.md: -------------------------------------------------------------------------------- 1 | # electro-bootstrap4 2 | Electro Bootsrap 4 ecommerce template 3 | 4 | Demo http://www.vvveb.com/electro-html/index.html 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /fonts/line-awesome.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/fonts/line-awesome.eot -------------------------------------------------------------------------------- /fonts/line-awesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/fonts/line-awesome.ttf -------------------------------------------------------------------------------- /fonts/line-awesome.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/fonts/line-awesome.woff -------------------------------------------------------------------------------- /fonts/line-awesome.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/fonts/line-awesome.woff2 -------------------------------------------------------------------------------- /img/applewatch-wd-1200x600.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/applewatch-wd-1200x600.jpg -------------------------------------------------------------------------------- /img/ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/ipad.png -------------------------------------------------------------------------------- /img/products/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/products/1.jpg -------------------------------------------------------------------------------- /img/products/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/products/10.jpg -------------------------------------------------------------------------------- /img/products/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/products/2.jpg -------------------------------------------------------------------------------- /img/products/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/products/3.jpg -------------------------------------------------------------------------------- /img/products/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/products/4.jpg -------------------------------------------------------------------------------- /img/products/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/products/5.jpg -------------------------------------------------------------------------------- /img/products/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/products/6.jpg -------------------------------------------------------------------------------- /img/products/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/products/7.jpg -------------------------------------------------------------------------------- /img/products/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/products/8.jpg -------------------------------------------------------------------------------- /img/products/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/givanz/electro-bootstrap4/aa7155d073d578c2c3d18014111b497003490a84/img/products/9.jpg -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | if (VvvebTheme === undefined) var VvvebTheme = {}; 2 | 3 | VvvebTheme.Cart = { 4 | add: function(product_id, quantity) { 5 | 6 | 7 | 8 | return; 9 | 10 | $.ajax({ 11 | url: 'index.php?route=checkout/cart/add', 12 | type: 'post', 13 | data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1), 14 | dataType: 'json', 15 | beforeSend: function() { 16 | $('#cart > button').button('loading'); 17 | }, 18 | complete: function() { 19 | $('#cart > button').button('reset'); 20 | }, 21 | success: function(json) { 22 | $('.alert-dismissible, .text-danger').remove(); 23 | 24 | if (json['redirect']) { 25 | location = json['redirect']; 26 | } 27 | 28 | if (json['success']) { 29 | $('#alert-box').append('
' + json['success'] + '
'); 30 | 31 | $('#alert-box').addClass('open'); 32 | 33 | // Need to set timeout otherwise it wont update the total 34 | $('#cart').parent().load('index.php?route=common/cart/info'); 35 | } 36 | }, 37 | error: function(xhr, ajaxOptions, thrownError) { 38 | alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 39 | } 40 | }); 41 | 42 | 43 | 44 | }, 45 | 46 | update: function(key, quantity) { 47 | }, 48 | 49 | remove: function(key) { 50 | } 51 | } 52 | 53 | VvvebTheme.Alert = { 54 | 55 | show: function(message) { 56 | $('.alert-top .message').html(message); 57 | $('.alert-top').addClass("show"); 58 | } 59 | } 60 | 61 | VvvebTheme.Gui = { 62 | 63 | init: function() { 64 | $("[data-vvveb-action]").each(function () { 65 | on = "click"; 66 | if (this.dataset.vvvebOn) on = this.dataset.vvvebOn; 67 | 68 | $(this).on(on, VvvebTheme.Gui[this.dataset.vvvebAction]); 69 | }); 70 | }, 71 | 72 | addCart : function () { 73 | 74 | var product = $(this).parents("[data-product]"); 75 | var img = $("[data-img]", product).attr("src"); 76 | var name = $("[data-name]", product).text(); 77 | 78 | VvvebTheme.Cart.add(this.dataset.product_id); 79 | 80 | VvvebTheme.Alert.show('   ' + name +' was added to cart'); 81 | 82 | return false; 83 | } 84 | } 85 | 86 | 87 | VvvebTheme.Gui.init(); 88 | -------------------------------------------------------------------------------- /scss/_common.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $enable-rounded:false; 4 | 5 | //fonts 6 | $font-family-sans-serif: Raleway,"Helvetica Neue", Helvetica, Arial, sans-serif !default; 7 | $font-family-serif: Georgia, "Times New Roman", Times, serif !default; 8 | $font-bold: Montserrat, "Arial Black", Arial !default; 9 | //colors 10 | $brand-primary: #121212 !default; 11 | 12 | @import 'bourbon/bourbon'; 13 | @import 'bootstrap/bootstrap'; 14 | @import 'partials/base'; 15 | @import 'partials/masonry'; 16 | @import 'partials/parallax'; 17 | @import 'partials/navbar'; 18 | @import 'vendor/ionicons'; 19 | @import 'vendor/fontawesome/fontawesome'; 20 | 21 | 22 | .vertical-align { 23 | position: relative; 24 | top: 50%; 25 | @include transform(translateY(-50%)); 26 | } 27 | 28 | 29 | .overlay-black 30 | { 31 | background:rgba(0,0,0,0.5); 32 | height: 100%; 33 | width: 100%; 34 | } 35 | 36 | .form-control { 37 | box-shadow: 0 0 1px 1px #eee inset; 38 | @include box-shadow(0 0 1px 1px #eee inset); 39 | padding: 0.5rem 0.75rem; 40 | } 41 | -------------------------------------------------------------------------------- /scss/_utils.scss: -------------------------------------------------------------------------------- 1 | .no-border 2 | { 3 | border:none !important; 4 | } 5 | 6 | .no-border-x 7 | { 8 | border-right:none !important; 9 | border-left:none !important; 10 | } 11 | 12 | .no-border-y 13 | { 14 | border-top:none !important; 15 | border-bottom:none !important; 16 | } 17 | 18 | .default-font-size 19 | { 20 | font-size:$font-size-base !important; 21 | } 22 | 23 | .small-font-size 24 | { 25 | font-size:$font-size-base / 1.17 !important; 26 | } 27 | 28 | .smaller-font-size 29 | { 30 | font-size:$font-size-base / 1.25 !important; 31 | } 32 | 33 | .tiny-font-size 34 | { 35 | font-size:$font-size-base / 1.3 !important; 36 | } 37 | 38 | 39 | $custom-select-indicator-color : #ccc; 40 | $custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23555' d='M509.121,125.966c-3.838-3.838-10.055-3.838-13.893,0L256.005,365.194L16.771,125.966c-3.838-3.838-10.055-3.838-13.893,0 c-3.838,3.838-3.838,10.055,0,13.893l246.18,246.175c1.842,1.842,4.337,2.878,6.947,2.878c2.61,0,5.104-1.036,6.946-2.878 l246.17-246.175C512.959,136.021,512.959,129.804,509.121,125.966z'/%3E%3C/svg%3E"); 41 | 42 | $arrow-up: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaa' viewBox='0 0 512 265.82449'%3E%3Cpath d='m 509.121,125.966 c -3.838,-3.838 -10.055,-3.838 -13.893,0 L 256.005,365.194 16.771,125.966 c -3.838,-3.838 -10.055,-3.838 -13.893,0 -3.838,3.838 -3.838,10.055 0,13.893 l 246.18,246.175 c 1.842,1.842 4.337,2.878 6.947,2.878 2.61,0 5.104,-1.036 6.946,-2.878 l 246.17,-246.175 c 3.838,-3.838 3.838,-10.055 0,-13.893 z' transform='rotate(-180,255.99975,194.456)' /%3E%3C/svg%3E"); 43 | 44 | 45 | .btn-link.dropdown-toggle:hover, .btn-link.dropdown-toggle:focus 46 | { 47 | text-decoration:none; 48 | } 49 | 50 | .dropdown-toggle::after 51 | { 52 | background: $custom-select-indicator no-repeat right center; 53 | width: 8px !important; 54 | height: 8px !important; 55 | border:none !important; 56 | vertical-align:0em !important; 57 | } 58 | 59 | .dropdown-toggle.chevron-big::after 60 | { 61 | width: 12px !important; 62 | height: 12px !important; 63 | } 64 | -------------------------------------------------------------------------------- /scss/bootstrap/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | position: relative; 7 | padding: $alert-padding-y $alert-padding-x; 8 | margin-bottom: $alert-margin-bottom; 9 | border: $alert-border-width solid transparent; 10 | @include border-radius($alert-border-radius); 11 | } 12 | 13 | // Headings for larger alerts 14 | .alert-heading { 15 | // Specified to prevent conflicts of changing $headings-color 16 | color: inherit; 17 | } 18 | 19 | // Provide class for links that match alerts 20 | .alert-link { 21 | font-weight: $alert-link-font-weight; 22 | } 23 | 24 | 25 | // Dismissible alerts 26 | // 27 | // Expand the right padding and account for the close button's positioning. 28 | 29 | .alert-dismissible { 30 | padding-right: ($close-font-size + $alert-padding-x * 2); 31 | 32 | // Adjust close link position 33 | .close { 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | padding: $alert-padding-y $alert-padding-x; 38 | color: inherit; 39 | } 40 | } 41 | 42 | 43 | // Alternate styles 44 | // 45 | // Generate contextual modifier classes for colorizing the alert. 46 | 47 | @each $color, $value in $theme-colors { 48 | .alert-#{$color} { 49 | @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /scss/bootstrap/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | display: inline-block; 8 | padding: $badge-padding-y $badge-padding-x; 9 | font-size: $badge-font-size; 10 | font-weight: $badge-font-weight; 11 | line-height: 1; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | @include border-radius($badge-border-radius); 16 | 17 | // Empty badges collapse automatically 18 | &:empty { 19 | display: none; 20 | } 21 | } 22 | 23 | // Quick fix for badges in buttons 24 | .btn .badge { 25 | position: relative; 26 | top: -1px; 27 | } 28 | 29 | // Pill badges 30 | // 31 | // Make them extra rounded with a modifier to replace v3's badges. 32 | 33 | .badge-pill { 34 | padding-right: $badge-pill-padding-x; 35 | padding-left: $badge-pill-padding-x; 36 | @include border-radius($badge-pill-border-radius); 37 | } 38 | 39 | // Colors 40 | // 41 | // Contextual variations (linked badges get darker on :hover). 42 | 43 | @each $color, $value in $theme-colors { 44 | .badge-#{$color} { 45 | @include badge-variant($value); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scss/bootstrap/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | display: flex; 3 | flex-wrap: wrap; 4 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 5 | margin-bottom: $breadcrumb-margin-bottom; 6 | list-style: none; 7 | background-color: $breadcrumb-bg; 8 | @include border-radius($breadcrumb-border-radius); 9 | } 10 | 11 | .breadcrumb-item { 12 | // The separator between breadcrumbs (by default, a forward-slash: "/") 13 | + .breadcrumb-item { 14 | padding-left: $breadcrumb-item-padding; 15 | 16 | &::before { 17 | display: inline-block; // Suppress underlining of the separator in modern browsers 18 | padding-right: $breadcrumb-item-padding; 19 | color: $breadcrumb-divider-color; 20 | content: $breadcrumb-divider; 21 | } 22 | } 23 | 24 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built 25 | // without `