Commit 629aa09d authored by Mohd Basheer's avatar Mohd Basheer

Merge branch 'LOL-Kozyshack.ca' into 'master'

Lol kozyshack.ca

See merge request !56
parents 29907f15 260a5fbc
{
"presets": [ "@babel/preset-env" ],
"compact": false
}
.DS_Store
node_modules
npm-debug.log
dist
*.swp
.cache
.idea
\ No newline at end of file
# Your project's server will run on localhost:xxxx at this port
PORT: 8000
# UnCSS will use these settings
UNCSS_OPTIONS:
html:
- "dist/**/*.html"
timeout: 1000
ignore:
- .foundation-mq
- !!js/regexp /\.is-\w+/
# Gulp will reference these paths when it copies files
PATHS:
# Path to dist folder
dist: "dist"
# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets/**/*"
- "!src/assets/{img,js,scss}/**/*"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "src/assets/js/jquery.js"
- "src/assets/js/foundation.min.js"
- "src/assets/js/mainCA.js"
- "src/assets/js/jquery-3.3.1.js"
- "src/assets/js/tweenAnimationCA.js"
- "src/assets/js/owl.carousel.minCA.js"
- "src/assets/js/home-carouselCA.js"
- "src/assets/js/app.js"
import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';
import webpackStream from 'webpack-stream';
import webpack2 from 'webpack';
import named from 'vinyl-named';
import autoprefixer from 'autoprefixer';
import imagemin from 'gulp-imagemin';
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const uncss = require('postcss-uncss');
// Load all Gulp plugins into one variable
const $ = plugins();
// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);
// Load settings from settings.yml
function loadConfig() {
const unsafe = require('js-yaml-js-types').all;
const schema = yaml.DEFAULT_SCHEMA.extend(unsafe);
const ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile, {schema});
}
const { PORT, UNCSS_OPTIONS, PATHS } = loadConfig();
console.log(UNCSS_OPTIONS);
// Build the "dist" folder by running all of the below tasks
// Sass must be run later so UnCSS can search for used classes in the others assets.
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sassBuild, styleGuide)
);
// Build the site, run the server, and watch for file changes
gulp.task('default',
gulp.series('build', server, watch)
);
// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}
// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}
// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}
// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
sherpa('src/styleguide/index.md', {
output: PATHS.dist + '/styleguide.html',
template: 'src/styleguide/template.html'
}, done);
}
// Compile Sass into CSS
// In production, the CSS is compressed
function sassBuild() {
const postCssPlugins = [
// Autoprefixer
autoprefixer(),
// UnCSS - Uncomment to remove unused styles in production
// PRODUCTION && uncss(UNCSS_OPTIONS),
].filter(Boolean);
return gulp.src('src/assets/scss/*.scss')
.pipe($.sourcemaps.init())
.pipe(sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe(postcss(postCssPlugins))
.pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie11' })))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/css'))
.pipe(browser.reload({ stream: true }));
}
let webpackConfig = {
mode: (PRODUCTION ? 'production' : 'development'),
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [ "@babel/preset-env" ],
compact: false
}
}
}
]
},
devtool: !PRODUCTION && 'source-map'
}
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(PATHS.entries)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.terser()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}
// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/**/*')
.pipe($.if(PRODUCTION, imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.mozjpeg({quality: 85, progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
])))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}
// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
server: PATHS.dist, port: PORT
}, done);
}
// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss/**/*.scss').on('all', sassBuild);
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}
This diff is collapsed.
{
"name": "foundation-zurb-template",
"version": "1.0.0",
"description": "Official Template for Foundation for Sites.",
"main": "gulpfile.babel.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"author": "Foundation Yetinauts <contact@get.foundation> (https://get.foundation)",
"license": "MIT",
"dependencies": {
"foundation-sites": "latest",
"jquery": "^3.6.0",
"motion-ui": "latest",
"what-input": "^5.2.10"
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@babel/register": "^7.15.3",
"autoprefixer": "^10.3.4",
"babel-loader": "^8.2.2",
"browser-sync": "^2.27.5",
"fs": "^0.0.1-security",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-cli": "^2.3.0",
"gulp-concat": "^2.6.1",
"gulp-extname": "^0.2.2",
"gulp-if": "^3.0.0",
"gulp-imagemin": "^7.1.0",
"gulp-load-plugins": "^2.0.7",
"gulp-postcss": "^9.0.1",
"gulp-sass": "^4.1.1",
"gulp-sourcemaps": "^3.0.0",
"gulp-terser": "^2.0.1",
"js-yaml": "^4.1.0",
"js-yaml-js-types": "^1.0.0",
"node-sass": "^7.0.0",
"panini": "latest",
"postcss": "^8.3.11",
"postcss-uncss": "^0.17.0",
"rimraf": "^3.0.2",
"style-sherpa": "^1.0.2",
"uncss": "^0.17.3",
"vinyl-named": "^1.1.0",
"webpack": "^5.52.1",
"webpack-stream": "^7.0.0",
"yargs": "^17.1.1"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-zurb-template.git"
},
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation@zurb.com"
},
"private": true,
"browserslist": [
"last 2 versions"
]
}
# ZURB Template
**Please open all issues with this template on the main [Foundation for Sites](https://github.com/foundation/foundation-sites/issues) repo.**
This is the official ZURB Template for use with [Foundation for Sites](https://get.foundation/sites/docs/). We use this template at ZURB to deliver static code to our clients. It has a Gulp-powered build system with these features:
- Handlebars HTML templates with Panini
- Sass compilation and prefixing
- JavaScript module bundling with webpack
- Built-in BrowserSync server
- For production builds:
- CSS compression
- JavaScript module bundling with webpack
- Image compression
## Installation
To use this template, your computer needs:
- [NodeJS](https://nodejs.org/en/) (Version 12 or greater recommended)
- [Git](https://git-scm.com/)
This template can be installed with the Foundation CLI, or downloaded and set up manually.
### Using the CLI
Install the Foundation CLI with this command:
```bash
npm install foundation-cli --global
```
Use this command to set up a blank Foundation for Sites project with this template:
```bash
foundation new --framework sites --template zurb
```
The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.
Now `cd` to your project name and to start your project run
```bash
foundation watch
```
### Manual Setup
To manually set up the template, first download it with Git:
```bash
git clone https://github.com/foundation/foundation-zurb-template projectname
```
Then open the folder in your command line, and install the needed dependencies:
```bash
cd projectname
yarn
```
Finally, run `yarn start` to run Gulp. Your finished site will be created in a folder called `dist`, viewable at this URL:
```
http://localhost:8000
```
To create compressed, production-ready assets, run `yarn run build`.
File added
File added
File added
File added
File added
import $ from 'jquery';
import 'what-input';
// Foundation JS relies on a global variable. In ES6, all imports are hoisted
// to the top of the file so if we used `import` to import Foundation,
// it would execute earlier than we have assigned the global variable.
// This is why we have to use CommonJS require() here since it doesn't
// have the hoisting behavior.
window.jQuery = $;
require('foundation-sites');
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';
$(document).foundation();
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
import $ from 'jquery';
import { Foundation } from 'foundation-sites/js/foundation.core';
import * as CoreUtils from 'foundation-sites/js/foundation.core.utils';
import { Box } from 'foundation-sites/js/foundation.util.box'
import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
import { Nest } from 'foundation-sites/js/foundation.util.nest';
import { Timer } from 'foundation-sites/js/foundation.util.timer';
import { Touch } from 'foundation-sites/js/foundation.util.touch';
import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
import { Abide } from 'foundation-sites/js/foundation.abide';
import { Accordion } from 'foundation-sites/js/foundation.accordion';
import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
import { Interchange } from 'foundation-sites/js/foundation.interchange';
import { Magellan } from 'foundation-sites/js/foundation.magellan';
import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
import { Orbit } from 'foundation-sites/js/foundation.orbit';
import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
import { Reveal } from 'foundation-sites/js/foundation.reveal';
import { Slider } from 'foundation-sites/js/foundation.slider';
import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
import { Sticky } from 'foundation-sites/js/foundation.sticky';
import { Tabs } from 'foundation-sites/js/foundation.tabs';
import { Toggler } from 'foundation-sites/js/foundation.toggler';
import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';
Foundation.addToJquery($);
// Add Foundation Utils to Foundation global namespace for backwards
// compatibility.
Foundation.rtl = CoreUtils.rtl;
Foundation.GetYoDigits = CoreUtils.GetYoDigits;
Foundation.transitionend = CoreUtils.transitionend;
Foundation.RegExpEscape = CoreUtils.RegExpEscape;
Foundation.onLoad = CoreUtils.onLoad;
Foundation.Box = Box;
Foundation.onImagesLoaded = onImagesLoaded;
Foundation.Keyboard = Keyboard;
Foundation.MediaQuery = MediaQuery;
Foundation.Motion = Motion;
Foundation.Move = Move;
Foundation.Nest = Nest;
Foundation.Timer = Timer;
// Touch and Triggers previously were almost purely sede effect driven,
// so no need to add it to Foundation, just init them.
Touch.init($);
Triggers.init($, Foundation);
MediaQuery._init();
Foundation.plugin(Abide, 'Abide');
Foundation.plugin(Accordion, 'Accordion');
Foundation.plugin(AccordionMenu, 'AccordionMenu');
Foundation.plugin(Drilldown, 'Drilldown');
Foundation.plugin(Dropdown, 'Dropdown');
Foundation.plugin(DropdownMenu, 'DropdownMenu');
Foundation.plugin(Equalizer, 'Equalizer');
Foundation.plugin(Interchange, 'Interchange');
Foundation.plugin(Magellan, 'Magellan');
Foundation.plugin(OffCanvas, 'OffCanvas');
Foundation.plugin(Orbit, 'Orbit');
Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
Foundation.plugin(Reveal, 'Reveal');
Foundation.plugin(Slider, 'Slider');
Foundation.plugin(SmoothScroll, 'SmoothScroll');
Foundation.plugin(Sticky, 'Sticky');
Foundation.plugin(Tabs, 'Tabs');
Foundation.plugin(Toggler, 'Toggler');
Foundation.plugin(Tooltip, 'Tooltip');
Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
export { Foundation };
import $ from 'jquery';
import 'what-input';
// have the hoisting behavior.
window.jQuery = $;
$(document).ready(function () {
$("#search-mobile").click(function (e) {
e.preventDefault();
$(".social-search").toggleClass("searchOpen");
});
$("#menu").click(function (e) {
e.preventDefault();
var nav = $("header nav");
nav.toggleClass("open");
var navtext = nav.hasClass("open") ? "Close" : "Menu";
$(this).text(navtext);
});
$(".infoTip").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("active");
$(this).toggleClass("active");
});
$(".product-nutrition .size-buttons li").click(function () {
var _id = $(this).data("id");
$(this).siblings("li").removeClass("active");
$(this).closest(".product-nutrition").find(".nutrition-facts").removeClass("current");
$(this).addClass("active");
$("#nutrition-tab-" + _id).addClass("current");
});
$(".searchButton").on("click", function (e) {
$(".searchInput").focus();
return $(".searchInput").val().length >= 3 ? true : false;
});
$(".searchInput").on("keydown", function (e) {
if (e.which == 13 && $(".searchInput").val().length >= 3) {
return true;
}
});
var path = document.location.pathname.split("/")[2];
var path1 = window.location.href.split("#")[1];
if (path == undefined && path == undefined) {
$("nav li a").removeClass("active");
$("nav li:first-child a").addClass("active");
} else {
$("nav li").each(function () {
var _href = $(this).find("a").attr("href");
_href.match(path) != null ? $(this).find("a").addClass("active").parent().siblings().find("a").removeClass("active") : "";
});
}
function internalLink(hashName) {
var internalID = window.location.href.split("#")[1] || hashName;
internalID = internalID == undefined ? undefined : internalID.split("/")[0];
var classValue = internalID != undefined && internalID.length ? true : false;
if (classValue && $("." + internalID).length) {
setTimeout(function () {
var scrollValue = $("." + internalID).offset().top - 200;
$("html,body").animate({ scrollTop: scrollValue }, 1500);
}, 800);
}
}
internalLink();
$(".section-our-story").click(function (e) {
var hash = $(this).attr("href").split("#")[1];
internalLink(hash);
if ($("header nav").hasClass("open")) {
$("#menu").trigger("click");
}
});
let isshow = localStorage.getItem("isshow");
if (isshow == null && $("#recallModal").length) {
$(document).foundation();
localStorage.setItem("isshow", 1);
$("#recallModal").foundation("open");
}
// let masking = new Inputmask("99/99/9999"),
// dateInput = jQuery("input[id*=_PurchasedDate_Value],input[id*=_UseByDate_Value]");
// if (dateInput.length) {
// dateInput.datetimepicker({ timepicker: false, format: "m/d/Y" });
// masking.mask(dateInput);
// }
});
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
@charset 'utf-8';
@import 'settings';
@import 'foundation';
@import 'motion-ui';
// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;
// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;
// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-range-input;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;
// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;
// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;
// Helpers
@include foundation-float-classes;
@include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;
// Motion UI
@include motion-ui-transitions;
@include motion-ui-animations;
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
{{!-- This is the base layout for your project, and will be used on every page unless specified. --}}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="{{root}}assets/css/fonts.css">
<link rel="stylesheet" href="{{root}}assets/css/app.css">
<link rel="stylesheet" href="{{root}}assets/css/kozyshackca.css">
</head>
<body>
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
<div class="page-container">
{{> header}}
{{> body}}
{{> footer}}
</div>
<!-- <script src="{{root}}assets/js/jquery-3.3.1.js"></script> -->
<!-- <script src="{{root}}assets/js/app.js"></script> -->
<script src="{{root}}assets/js/jquery.js"></script>
<script src="{{root}}assets/js/foundation.min.js"></script>
<script src="{{root}}assets/js/mainCA.js"></script>
<script src="{{root}}assets/js/jquery-3.3.1.js"></script>
<script src="{{root}}assets/js/tweenAnimationCA.js"></script>
<script src="{{root}}assets/js/owl.carousel.minCA.js"></script>
<script src="{{root}}assets/js/home-carouselCA.js"></script>
<!-- <script src="{{root}}assets/js/incapsula-resource.js"></script> -->
</body>
</html>
<div class="content-section">
<section class="hero-banner">
<div class="main-feature">
<h1 style="display:none">
PUDDING <span>&nbsp;</span>
MADE <span>&nbsp;</span>
RIGHT </h1>
<img id="ieBanner" src="https://storekozycakenticomedia.blob.core.windows.net/df-kentico-ca/kozyshackca/media/images/home/masthead.jpg?ext=.jpg" alt="Pudding Made Right" class="hide">
<h2 style="opacity: 1; visibility: visible;">with simple, wholesome ingredients.</h2>
<div class="bowls">
<div id="rice-pudding-tip" class="infoTip">
<div class="hotspot" data-tracking="we_are_kozy,plus_button,rice"></div>
<div class="tip left">
<div class="copy">
<div class="title">Rice Pudding</div>
<div class="def">Just six delicious ingredients.</div>
</div>
</div>
</div>
<div id="tapioca-pudding-tip" class="infoTip">
<div class="hotspot" data-tracking="we_are_kozy,plus_button,tapioca"></div>
<div class="tip right-bottom">
<div class="copy">
<div class="title">Tapioca Pudding</div>
<div class="def">Slow simmered to perfection.</div>
</div>
</div>
</div>
<div id="chocolate-pudding-tip" class="infoTip">
<div class="hotspot" data-tracking="we_are_kozy,plus_button,chocolate"></div>
<div class="tip right-top">
<div class="copy">
<div class="title">Chocolate Pudding</div>
<div class="def">So chocolatey. So tasty.</div>
</div>
</div>
</div>
<img src="https://storekozycakenticomedia.blob.core.windows.net/df-kentico-ca/kozyshackca/media/images/home/masthead.jpg?ext=.jpg" alt="Pudding Made Right">
</div>
<span class="scroll">
scroll to <b><img src="https://storekozycakenticomedia.blob.core.windows.net/df-kentico-ca/kozyshackca/media/images/home/spoon.png?ext=.png" alt="scroll to goodness" width="10" height="43"></b>goodness
</span>
</div>
</section>
</div>
<ul class="hide-for-small-only subnav grid-x small-up-2">
<li class="cell sub-navitem">
<a href="/en-ca/products/puddings" class="active">
Puddings
<span></span>
</a>
</li>
<li class="cell sub-navitem">
<a href="/en-ca/products/simply-well" class="">
Simply Well
<span></span>
</a>
</li>
</ul>
<section class="product-category">
<div class="bg-white">
<div class="header-image">
<img src="https://storekozycakenticomedia.blob.core.windows.net/df-kentico-ca/kozyshackca/media/images/products/original-category.jpg?ext=.jpg">
</div>
<div class="image-bordertop"></div>
<div class="grid-x">
<div class="small-12 cell">
<h2 class="productline-header">
<div class="fact pudding-fact shown grid-x align-center align-middle">
<div class="cell">
Real<br>
Food.<br>
Real<br>
Good.
</div>
</div>
Simple<br>
Ingredients
</h2>
<h3 class="sub-header"><span>In Every Spoonful.</span></h3>
<p>Introduce your spoon to the rich, delicious taste of Kozy Shack<sup>MC</sup> pudding.</p>
</div>
</div>
<div class="image-borderbottom"></div>
</div>
<div class="grid-x align-center related-products">
<div class="cell small-12 medium-6">
<div class="product-item">
<a href="/en-ca/products/puddings/original-rice">
<img src="https://storekozycakenticomedia.blob.core.windows.net/df-kentico-ca/kozyshackca/media/images/products/ks-ca-en-original-rice-pudding-composite.png?ext=.png">
</a>
<span>Taste buds only live 2 weeks. </span>
<h3>Original Rice Pudding</h3>
<span>should be part of their existence. </span>
</div>
</div>
<div class="cell small-12 medium-6">
<div class="product-item">
<a href="/en-ca/products/puddings/tapioca-pudding">
<img src="https://storekozycakenticomedia.blob.core.windows.net/df-kentico-ca/kozyshackca/media/images/products/ks-ca-en-tapioca-composite.png?ext=.png">
</a>
<span>It takes 7,566,989,760</span>
<h3>Tapioca Pudding</h3>
<span>cups to reach the moon.</span>
</div>
</div>
<div class="cell small-12 medium-6">
<div class="product-item">
<a href="/en-ca/products/puddings/chocolate-pudding">
<img src="https://storekozycakenticomedia.blob.core.windows.net/df-kentico-ca/kozyshackca/media/images/products/ks-ca-en-chocolate-composite.png?ext=.png">
</a>
<span>There are no preservatives in our </span>
<h3>Chocolate Pudding</h3>
<span>It doesn’t stick around long enough to need preserving.</span>
</div>
</div>
<div class="cell small-12 medium-6">
<div class="product-item">
<a href="/en-ca/products/puddings/cinnamon-raisin-rice-pudding">
<img src="https://storekozycakenticomedia.blob.core.windows.net/df-kentico-ca/kozyshackca/media/images/products/ks-ca-cinnamon-raisin-rice-tub.png?ext=.png">
</a>
<span>We've added cinnamon and raisins to our</span>
<h3>Cinnamon Raisin Rice Pudding</h3>
<span>so you can just add a spoon. </span>
</div>
</div>
<div class="cell small-12 medium-6">
<div class="product-item">
<a href="/en-ca/products/puddings/french-vanilla-rice-pudding">
<img src="https://storekozycakenticomedia.blob.core.windows.net/df-kentico-ca/kozyshackca/media/images/products/ks-ca-french-vanilla-tub.png?ext=.png">
</a>
<span>We slow-simmer all our </span>
<h3>French Vanilla Rice Pudding</h3>
<span>Because fast-simmering doesn’t exist.</span>
</div>
</div>
</div>
</section>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment