Merge branch 'landing-page'
3
app/assets/js/App.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import MobileMenu from './modules/MobileMenu';
|
||||||
|
|
||||||
|
var mobileMenu = new MobileMenu();
|
1
app/assets/js/Vendor.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
import '../temp/modernizr';
|
26
app/assets/js/modules/MobileMenu.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import $ from 'jquery';
|
||||||
|
|
||||||
|
class MobileMenu{
|
||||||
|
|
||||||
|
constructor(){
|
||||||
|
this.siteHeader = $(".site-header");
|
||||||
|
this.menuIcon = $(".site-header__menu-icon");
|
||||||
|
this.menuContent = $(".site-header__menu-content");
|
||||||
|
this.siteHeaderLogo= $(".site-header__logo");
|
||||||
|
this.events();
|
||||||
|
}
|
||||||
|
|
||||||
|
events(){
|
||||||
|
this.menuIcon.click(this.toggleTheMenu.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleTheMenu(){
|
||||||
|
this.menuContent.toggleClass("site-header__menu-content--is-visible");
|
||||||
|
this.siteHeader.toggleClass("site-header--is-expanded");
|
||||||
|
this.menuIcon.toggleClass("site-header__menu-icon--close-x");
|
||||||
|
this.siteHeaderLogo.toggleClass("site-header__logo--orange-bg");
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MobileMenu;
|
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 1.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 10.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 11.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 12.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 13.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 14.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 2.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 3.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 4.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 5.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 6.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 7.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 8.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 9.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT.woff
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose Pro Italic-trial.ttf
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose_bold.ttf
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose_extraBold.ttf
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose_extraLight.ttf
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose_light.ttf
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose_medium.ttf
Normal file
BIN
app/assets/media/images/bbb_logo.png
Normal file
After Width: | Height: | Size: 38 KiB |
BIN
app/assets/media/images/bbb_logo_white.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
app/assets/media/images/boxes_small.jpg
Normal file
After Width: | Height: | Size: 81 KiB |
BIN
app/assets/media/images/logo.jpg
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
app/assets/media/images/netherlands_flag.gif
Normal file
After Width: | Height: | Size: 513 B |
BIN
app/assets/media/images/veg.png
Normal file
After Width: | Height: | Size: 3.7 MiB |
BIN
app/assets/media/images/veg_large.png
Normal file
After Width: | Height: | Size: 3.7 MiB |
BIN
app/assets/media/images/veg_medium.png
Normal file
After Width: | Height: | Size: 2.6 MiB |
BIN
app/assets/media/images/veg_small.png
Normal file
After Width: | Height: | Size: 1.8 MiB |
BIN
app/assets/media/images/veg_smaller.png
Normal file
After Width: | Height: | Size: 1.1 MiB |
19
app/assets/scss/base/_fonts.scss
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "CocogooseNormal";
|
||||||
|
src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "CocogooseLight";
|
||||||
|
src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "CocogooseBold";
|
||||||
|
src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "CocogooseExtra";
|
||||||
|
src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype");
|
||||||
|
}
|
@ -9,3 +9,11 @@
|
|||||||
@mixin atLarge {
|
@mixin atLarge {
|
||||||
@media (min-width: 1200px) { @content };
|
@media (min-width: 1200px) { @content };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin clearfix {
|
||||||
|
&::after{
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
}
|
18
app/assets/scss/modules/_btn.scss
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
.btn{
|
||||||
|
background-color: #00ab00;;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: .75rem 1.2rem;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 30px;
|
||||||
|
|
||||||
|
&--large {
|
||||||
|
padding: 1.1rem 1.9rem;
|
||||||
|
|
||||||
|
@include atSmall(){
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
74
app/assets/scss/modules/_large-hero.scss
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
.large-hero {
|
||||||
|
border-bottom: 10px solid white;
|
||||||
|
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__image{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text-content {
|
||||||
|
padding-top: 88px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-family: "CocogooseBold";
|
||||||
|
color: white;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@include atSmall(){
|
||||||
|
font-size: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
font-size: 4.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
// font-family: "CocogooseNormal";
|
||||||
|
font-weight: 400;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@include atSmall(){
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
font-size: 2.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description {
|
||||||
|
color: #FFF;
|
||||||
|
font-weight: 00;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
max-width: 50rem;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
@include atSmall(){
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
font-size: 1.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
62
app/assets/scss/modules/_primary-nav.scss
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
.primary-nav{
|
||||||
|
padding-top: 10px;
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
padding: 31px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--pull-right{
|
||||||
|
@include atMedium(){
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
@include clearfix();
|
||||||
|
}
|
||||||
|
|
||||||
|
li{
|
||||||
|
list-style: none;
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 7px;
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
padding-right: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
padding: 5px 8px;
|
||||||
|
font-size: .8rem;
|
||||||
|
background:rgba(black, .5);
|
||||||
|
border-radius: 30px;
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
background:transparent;
|
||||||
|
font-size: 1.10rem;
|
||||||
|
padding: 12px 0;
|
||||||
|
|
||||||
|
&.is-current-link {
|
||||||
|
color: #fabb69;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
152
app/assets/scss/modules/_site-header.scss
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
.site-header{
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
transition: background-color .3s ease-out;
|
||||||
|
|
||||||
|
&--is-expanded {
|
||||||
|
background-color: orange;
|
||||||
|
padding-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
position: absolute;
|
||||||
|
position: fixed;
|
||||||
|
background-color: rgba(#000, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__btn-container{
|
||||||
|
@include atMedium(){
|
||||||
|
padding: 32px 0px 32px 0px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__language{
|
||||||
|
margin: 13px auto 5px auto;
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
margin: 40px 20px 0px 0px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&__menu-icon{
|
||||||
|
width: 20px;
|
||||||
|
height: 19px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 3px;
|
||||||
|
background: #FFF;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transition: transform .3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__middle {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
left: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 3px;
|
||||||
|
background: #FFF;
|
||||||
|
transition: all .3s ease-out;
|
||||||
|
transform-origin: 0 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 3px;
|
||||||
|
background: #FFF;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
transition: transform .3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include atMedium {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__menu-icon--close-x {
|
||||||
|
&::before {
|
||||||
|
transform: rotate(45deg) scaleX(1.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header__menu-icon__middle{
|
||||||
|
transform: scaleX(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: rotate(-45deg) scaleX(1.25) translateY(1px);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__menu-content{
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1.2);
|
||||||
|
transtion: all .3s ease-out;
|
||||||
|
position: relative;
|
||||||
|
z-index: -10;
|
||||||
|
padding-top: 90px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&--is-visible{
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1;
|
||||||
|
padding-top: 0;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo{
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
padding: 5px 15px;
|
||||||
|
left: 50%;
|
||||||
|
transform-origin: 50% 0%;
|
||||||
|
transform: translateX(-50%) scale(.8);
|
||||||
|
transition: transform .3s ease-out;
|
||||||
|
background-color: rgba(black, 0.5);
|
||||||
|
|
||||||
|
&--orange-bg {
|
||||||
|
transition: background-color .3s ease-out;
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include atMedium(){
|
||||||
|
padding: 0;
|
||||||
|
top: 3px;
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
left: auto;
|
||||||
|
transform: translateX(0);
|
||||||
|
background-color: rgba(black, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
12
app/assets/scss/modules/_wrapper.scss
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.wrapper{
|
||||||
|
overflow: hidden;
|
||||||
|
padding-left: 18px;
|
||||||
|
padding-right: 18px;
|
||||||
|
max-width: 1300px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
&--medium{
|
||||||
|
max-width: 976px;
|
||||||
|
}
|
||||||
|
}
|
@ -1,6 +1,12 @@
|
|||||||
@import './base/_normalize';
|
@import './base/_normalize';
|
||||||
@import './base/variables';
|
@import './base/variables';
|
||||||
|
@import './base/fonts';
|
||||||
@import './base/global';
|
@import './base/global';
|
||||||
@import './base/mixins';
|
@import './base/mixins';
|
||||||
|
@import './modules/site-header';
|
||||||
|
@import './modules/primary-nav';
|
||||||
|
@import './modules/wrapper';
|
||||||
|
@import './modules/large-hero';
|
||||||
|
@import './modules/btn';
|
||||||
|
|
||||||
|
|
||||||
|
@ -4,45 +4,65 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Bio Bulk Bende</title>
|
<title>Bio Bulk Bende</title>
|
||||||
<meta name="keywords" content="Bio, Bulk, Bende, Food, Cooperative">
|
<meta name="keywords" content="Bio, Bulk, Bende, Organic, Autonomous Foodcoop, Food, Cooperative">
|
||||||
<meta name="description" content="Bio Bulk Bende is a food cooperative.">
|
<meta name="description" content="Bio Bulk Bende is an autonomous organic food cooperative .">
|
||||||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
|
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
|
||||||
<link rel="stylesheet" type="text/css" href="./temp/styles/style.css">
|
<link rel="stylesheet" type="text/css" href="./temp/styles/style.css">
|
||||||
|
|
||||||
|
<!-- build:js assets/scripts/Vendor.js -->
|
||||||
|
<script type="text/javascript" src="./temp/scripts/Vendor.js"></script>
|
||||||
|
<!-- endbuild -->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- HEADER -->
|
||||||
<header>
|
<header class="site-header">
|
||||||
<div>
|
<div class="wrapper">
|
||||||
<img src="#" alt="BBB logo">
|
<div class="site-header__logo">
|
||||||
</div>
|
<img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo">
|
||||||
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<a href="#" class="btn">Join us!</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav>
|
<div class="site-header__menu-icon">
|
||||||
<ul>
|
<div class="site-header__menu-icon__middle"></div>
|
||||||
<li><a href="#about-us">About us</a></li>
|
</div>
|
||||||
<li><a href="#how-it-works">How it works</a></li>
|
|
||||||
<li><a href="#agenda">Agenda</a></li>
|
<div class="site-header__menu-content">
|
||||||
<li><a href="#members-area">Members area</a></li>
|
<div class="site-header__btn-container">
|
||||||
</ul>
|
<a href="#" class="btn ">Place your Order</a>
|
||||||
</nav>
|
</div>
|
||||||
|
|
||||||
|
<div class="site-header__language">
|
||||||
|
<a href="#"><img src="./assets/media/images/netherlands_flag.gif" alt="Netherlands flag"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="primary-nav primary-nav--pull-right">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#about-us">About us</a></li>
|
||||||
|
<li><a href="#how-it-works">How it works</a></li>
|
||||||
|
<li><a href="#agenda">Agenda</a></li>
|
||||||
|
<li><a href="#members-area">Members area</a>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
<!-- STARTING SECTION -->
|
<!-- STARTING SECTION -->
|
||||||
<div>
|
<div class="large-hero">
|
||||||
<img src="#" alt="A cool hero image">
|
|
||||||
|
|
||||||
<div>
|
<picture>
|
||||||
<h1 class="large-hero__title">Bio Bulke Bende</h1>
|
<source srcset="./assets/media/images/veg_large.png 1920w" media="(min-width: 1380px)">
|
||||||
<h2 class="large-hero__subtitle">Organic autonomous foodcoop, every 1<sup>st</sup> Monday of the month.</h2>
|
<source srcset="./assets/media/images/veg_medium.png 1380w" media="(min-width: 990px)">
|
||||||
<p class="large-hero__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mag aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.n</p>
|
<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)">
|
||||||
<p><a href="#" class="btn">Join us!</a></p>
|
<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image">
|
||||||
|
</picture>
|
||||||
|
|
||||||
|
<div class="large-hero__text-content">
|
||||||
|
<h1 class="large-hero__title">bio bulke bende</h1>
|
||||||
|
<h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2>
|
||||||
|
<p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p>
|
||||||
|
<p><a href="#" class="btn btn--large">Join us!</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -75,6 +95,8 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<!-- MODAL -->
|
<!-- MODAL -->
|
||||||
|
<!-- build:js assets/scripts/App.js -->
|
||||||
|
<script type="text/javascript" src="./temp/scripts/App.js"></script>
|
||||||
|
<!-- endbuild -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
BIN
app/temp/media/fonts/cocogoose/Cocogoose Pro Italic-trial.ttf
Normal file
BIN
app/temp/media/fonts/cocogoose/Cocogoose_bold.ttf
Normal file
BIN
app/temp/media/fonts/cocogoose/Cocogoose_extraBold.ttf
Normal file
BIN
app/temp/media/fonts/cocogoose/Cocogoose_extraLight.ttf
Normal file
BIN
app/temp/media/fonts/cocogoose/Cocogoose_light.ttf
Normal file
BIN
app/temp/media/fonts/cocogoose/Cocogoose_medium.ttf
Normal file
25
app/temp/scripts/App.js
Normal file
1
app/temp/scripts/Vendor.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
!function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(n){return e[n]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([,function(e,n,t){"use strict";t.r(n);t(2)},function(e,n){!function(e,n,t,o){var r=[],s={_version:"3.11.3",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout((function(){n(t[e])}),0)},addTest:function(e,n,t){r.push({name:e,fn:n,options:t})},addAsyncTest:function(e){r.push({name:null,fn:e})}},a=function(){};a.prototype=s,a=new a;var i=[];var l=t.documentElement,f="svg"===l.nodeName.toLowerCase();!function(){var e,n,t,o,s,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],(n=r[f]).name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=typeof n.fn==="function"?n.fn():n.fn,s=0;s<e.length;s++)1===(l=e[s].split(".")).length?a[l[0]]=o:(a[l[0]]&&(!a[l[0]]||a[l[0]]instanceof Boolean)||(a[l[0]]=new Boolean(a[l[0]])),a[l[0]][l[1]]=o),i.push((o?"":"no-")+l.join("-"))}}(),function(e){var n=l.className,t=a._config.classPrefix||"";if(f&&(n=n.baseVal),a._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}a._config.enableClasses&&(e.length>0&&(n+=" "+t+e.join(" "+t)),f?l.className.baseVal=n:l.className=n)}(i),delete s.addTest,delete s.addAsyncTest;for(var u=0;u<a._q.length;u++)a._q[u]();e.Modernizr=a}(window,window,document)}]);
|
@ -304,6 +304,22 @@ template {
|
|||||||
[hidden] {
|
[hidden] {
|
||||||
display: none; }
|
display: none; }
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "CocogooseNormal";
|
||||||
|
src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype"); }
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "CocogooseLight";
|
||||||
|
src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype"); }
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "CocogooseBold";
|
||||||
|
src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype"); }
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "CocogooseExtra";
|
||||||
|
src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype"); }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
color: #333; }
|
color: #333; }
|
||||||
@ -312,4 +328,239 @@ img {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto; }
|
height: auto; }
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
transition: background-color .3s ease-out; }
|
||||||
|
.site-header--is-expanded {
|
||||||
|
background-color: orange;
|
||||||
|
padding-bottom: 18px; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.site-header {
|
||||||
|
position: absolute;
|
||||||
|
position: fixed;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4); } }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.site-header__btn-container {
|
||||||
|
padding: 32px 0px 32px 0px;
|
||||||
|
float: right; } }
|
||||||
|
.site-header__language {
|
||||||
|
margin: 13px auto 5px auto;
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.site-header__language {
|
||||||
|
margin: 40px 20px 0px 0px;
|
||||||
|
float: right; } }
|
||||||
|
.site-header__menu-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 19px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px; }
|
||||||
|
.site-header__menu-icon::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 3px;
|
||||||
|
background: #FFF;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transition: transform .3s ease-out; }
|
||||||
|
.site-header__menu-icon__middle {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
left: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 3px;
|
||||||
|
background: #FFF;
|
||||||
|
transition: all .3s ease-out;
|
||||||
|
transform-origin: 0 50%; }
|
||||||
|
.site-header__menu-icon::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 3px;
|
||||||
|
background: #FFF;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
transition: transform .3s ease-out; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.site-header__menu-icon {
|
||||||
|
display: none; } }
|
||||||
|
.site-header__menu-icon--close-x::before {
|
||||||
|
transform: rotate(45deg) scaleX(1.25); }
|
||||||
|
.site-header__menu-icon--close-x .site-header__menu-icon__middle {
|
||||||
|
transform: scaleX(0);
|
||||||
|
opacity: 0; }
|
||||||
|
.site-header__menu-icon--close-x::after {
|
||||||
|
transform: rotate(-45deg) scaleX(1.25) translateY(1px); }
|
||||||
|
.site-header__menu-content {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1.2);
|
||||||
|
transtion: all .3s ease-out;
|
||||||
|
position: relative;
|
||||||
|
z-index: -10;
|
||||||
|
padding-top: 90px;
|
||||||
|
text-align: center; }
|
||||||
|
.site-header__menu-content--is-visible {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.site-header__menu-content {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1;
|
||||||
|
padding-top: 0;
|
||||||
|
transform: scale(1); } }
|
||||||
|
.site-header__logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
padding: 5px 15px;
|
||||||
|
left: 50%;
|
||||||
|
transform-origin: 50% 0%;
|
||||||
|
transform: translateX(-50%) scale(0.8);
|
||||||
|
transition: transform .3s ease-out;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5); }
|
||||||
|
.site-header__logo--orange-bg {
|
||||||
|
transition: background-color .3s ease-out;
|
||||||
|
background-color: orange; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.site-header__logo {
|
||||||
|
padding: 0;
|
||||||
|
top: 3px;
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
left: auto;
|
||||||
|
transform: translateX(0);
|
||||||
|
background-color: rgba(0, 0, 0, 0); } }
|
||||||
|
|
||||||
|
.primary-nav {
|
||||||
|
padding-top: 10px; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.primary-nav {
|
||||||
|
padding: 31px 0px; } }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.primary-nav--pull-right {
|
||||||
|
float: right; } }
|
||||||
|
.primary-nav ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0; }
|
||||||
|
.primary-nav ul::after {
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
display: table; }
|
||||||
|
.primary-nav li {
|
||||||
|
list-style: none;
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 7px; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.primary-nav li {
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
padding-right: 20px; } }
|
||||||
|
.primary-nav li:last-child {
|
||||||
|
padding-right: 0; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.primary-nav li:last-child {
|
||||||
|
padding-right: 20px; } }
|
||||||
|
.primary-nav a {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
padding: 5px 8px;
|
||||||
|
font-size: .8rem;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 30px; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.primary-nav a {
|
||||||
|
background: transparent;
|
||||||
|
font-size: 1.10rem;
|
||||||
|
padding: 12px 0; }
|
||||||
|
.primary-nav a.is-current-link {
|
||||||
|
color: #fabb69; } }
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
padding-left: 18px;
|
||||||
|
padding-right: 18px;
|
||||||
|
max-width: 1300px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto; }
|
||||||
|
.wrapper--medium {
|
||||||
|
max-width: 976px; }
|
||||||
|
|
||||||
|
.large-hero {
|
||||||
|
border-bottom: 10px solid white;
|
||||||
|
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
position: relative; }
|
||||||
|
.large-hero__image {
|
||||||
|
display: block; }
|
||||||
|
.large-hero__text-content {
|
||||||
|
padding-top: 88px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
text-align: center; }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.large-hero__text-content {
|
||||||
|
padding-top: 60px; } }
|
||||||
|
.large-hero__title {
|
||||||
|
font-family: "CocogooseBold";
|
||||||
|
color: white;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
margin: 0; }
|
||||||
|
@media (min-width: 530px) {
|
||||||
|
.large-hero__title {
|
||||||
|
font-size: 3.2rem; } }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.large-hero__title {
|
||||||
|
font-size: 4.8rem; } }
|
||||||
|
.large-hero__subtitle {
|
||||||
|
font-weight: 400;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 0; }
|
||||||
|
@media (min-width: 530px) {
|
||||||
|
.large-hero__subtitle {
|
||||||
|
font-size: 1.8rem; } }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.large-hero__subtitle {
|
||||||
|
font-size: 2.4rem; } }
|
||||||
|
.large-hero__description {
|
||||||
|
color: #FFF;
|
||||||
|
font-weight: 00;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
max-width: 50rem;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto; }
|
||||||
|
@media (min-width: 530px) {
|
||||||
|
.large-hero__description {
|
||||||
|
font-size: 1.3rem; } }
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.large-hero__description {
|
||||||
|
font-size: 1.875rem; } }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background-color: #00ab00;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: .75rem 1.2rem;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 30px; }
|
||||||
|
.btn--large {
|
||||||
|
padding: 1.1rem 1.9rem; }
|
||||||
|
@media (min-width: 530px) {
|
||||||
|
.btn--large {
|
||||||
|
font-size: 1.25rem; } }
|
||||||
|
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=style.css.map */
|
||||||
|
@ -4,6 +4,10 @@ const autoprefixer = require('autoprefixer'),
|
|||||||
postcss = require('gulp-postcss'),
|
postcss = require('gulp-postcss'),
|
||||||
sass = require('gulp-sass'),
|
sass = require('gulp-sass'),
|
||||||
sourcemaps = require('gulp-sourcemaps'),
|
sourcemaps = require('gulp-sourcemaps'),
|
||||||
|
del = require('del'),
|
||||||
|
webpack = require('webpack-stream'),
|
||||||
|
webpackConfig = require('./webpack.config.js'),
|
||||||
|
modernizr = require('gulp-modernizr'),
|
||||||
browserSync = require('browser-sync').create();
|
browserSync = require('browser-sync').create();
|
||||||
|
|
||||||
|
|
||||||
@ -58,8 +62,8 @@ const watch = function() {
|
|||||||
baseDir: './app'
|
baseDir: './app'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask));
|
gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask)).on('change', browserSync.reload);
|
||||||
gulp.watch("./app/assets/js/**/*.js").on('change', browserSync.reload);
|
gulp.watch("./app/assets/js/**/*.js", {usePolling : true}, gulp.series(cleanScripts, modernizrTask, scriptsTask, endCleanModernizr));
|
||||||
// gulp.watch("./app/assets/images", {usePolling : true}, gulp.series(imagesTask));
|
// gulp.watch("./app/assets/images", {usePolling : true}, gulp.series(imagesTask));
|
||||||
gulp.watch("./app/*.html").on('change', browserSync.reload);
|
gulp.watch("./app/*.html").on('change', browserSync.reload);
|
||||||
};
|
};
|
||||||
|
3559
package-lock.json
generated
11
package.json
@ -9,11 +9,20 @@
|
|||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.11.6",
|
||||||
|
"@babel/preset-env": "^7.11.5",
|
||||||
"autoprefixer": "^9.8.6",
|
"autoprefixer": "^9.8.6",
|
||||||
|
"babel-loader": "^8.1.0",
|
||||||
"browser-sync": "^2.26.12",
|
"browser-sync": "^2.26.12",
|
||||||
|
"del": "^5.1.0",
|
||||||
"gulp": "^4.0.2",
|
"gulp": "^4.0.2",
|
||||||
|
"gulp-modernizr": "^4.0.1",
|
||||||
"gulp-postcss": "^8.0.0",
|
"gulp-postcss": "^8.0.0",
|
||||||
"gulp-sass": "^4.1.0",
|
"gulp-sass": "^4.1.0",
|
||||||
"gulp-sourcemaps": "^2.6.5"
|
"gulp-sourcemaps": "^2.6.5",
|
||||||
|
"webpack-stream": "^6.1.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"jquery": "^3.5.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
26
webpack.config.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
mode: "production",
|
||||||
|
entry: {
|
||||||
|
App: "./app/assets/js/App.js",
|
||||||
|
Vendor: "./app/assets/js/Vendor.js"
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, "dist/scripts"),
|
||||||
|
filename: "[name].js"
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(js)$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: ['babel-loader']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['*', '.js']
|
||||||
|
}
|
||||||
|
}
|