Yes, thanks. We are working on the site and have it published temporarily due to Weebly's site editor capabilities without SSL. Moreover, the intended idea to to place a full width card slider below the website navigation menu.
here's the code for the card slider:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
height: 100%!important;
padding: 0!important;
margin: 0!important;
font-size: 18px!important;
}
body {
overflow: hidden!important;
background: #AEE5D8 url("
https://s3-us-west-2.amazonaws.com/s.cdpn.io/380275/paper-3.png") repeat fixed center!important;
font-family: 'Mate SC', Mate SC, serif!important;
color: #555!important;
}
.trans-quick {
transition: all 0.4s!important;
}
#container {
height: 100%!important;
display: flex!important;
align-items: center!important;
justify-content: center!important;
flex-direction: row!important;
}
.bg-word {
cursor: default!important;
padding: 2rem 0!important;
user-select: none!important;
font-size: 40vw!important;
line-height: 34vw!important;
word-wrap: break-word!important;
position: absolute!important;
top: 0!important;
bottom: 0!important;
left: 0!important;
right: 0!important;
}
#behind {
color: #e0b0d5!important;
opacity: 0.3!important;
}
#infront {
color: #555!important;
opacity: 0.035!important;
z-index: 20!important;
}
#card {
overflow: hidden!important;
z-index: 10!important;
padding: 3rem!important;
width: 95vw!important;
max-width: 21rem!important;
min-height: 15.75rem!important;
box-shadow: 0 50px 70px -50px rgba(0, 0, 0, 0.45), 0 50px 200px -50px rgba(0, 0, 0, 0.5)!important;
background: #FFF!important;
display: flex!important;
align-items: flex-start!important;
justify-content: center!important;
flex-direction: column!important;
}
#card * {
transition: opacity 0.4s, text-shadow 0.8s, color 0.4s, transform 0s!important;
opacity: 1!important;
}
#word {
align-self: flex-end!important;
font-size: 2rem!important;
line-height: 1rem!important;
}
#language {
font-size: 1.1rem!important;
align-self: flex-end!important;
font-style: italic!important;
line-height: auto!important;
color: #e0b0d5!important;
}
#description {
width: 100%!important;
}
button {
margin: 20px!important;
width: 0px!important;
height: 0px!important;
z-index: 25!important;
background: transparent!important;
border-radius: 0!important;
outline: none!important;
border: none!important;
}
#last {
border-top: 20px solid transparent!important;
border-bottom: 20px solid transparent!important;
border-right: 20px solid rgba(255, 255, 255, 0.5)!important;
transition: 0.1s!important;
}
#last:hover {
border-right: 20px solid rgba(255, 255, 255, 0.9)!important;
}
#next {
order: 3!important;
border-top: 20px solid transparent!important;
border-bottom: 20px solid transparent!important;
border-left: 20px solid rgba(255, 255, 255, 0.5)!important;
transition: 0.1s!important;
}
#next:hover {
border-left: 20px solid rgba(255, 255, 255, 0.9)!important;
}
#container > button:active ~ #card {
transition: 0.05s 0s!important;
transform: translateY(0.5rem)!important;
}
body.fadeout {
background: #e0b0d5 url("
https://s3-us-west-2.amazonaws.com/s.cdpn.io/380275/paper-3.png") repeat fixed center!important;
}
body.fadeout .bg-word#infront {
opacity: 0!important;
}
#card.fadeout #word, #card.fadeout #description, #card.fadeout #language {
opacity: 0!important;
color: transparent!important;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5)!important;
transform: translateY(-21rem) scale(3)!important;
transition: all 1.2s 0.1s, color 0.5s 0s, text-shadow 0.5s 0s!important;
}
#card.fadeout #description {
transform: translateY(21rem) translateX(-6rem) scale(2)!important;
}
@Media (max-width: 600px) {
a {
width: 50px!important;
height: 50px!important;
}
button {
padding: 0!important;
}
#last {
margin: 0 0.4rem 0 0!important;
}
#next {
margin: 0 0 0 0.4rem!important;
}
#card {
padding: 1rem!important;
min-height: 10rem!important;
}
#word {
font-size: 1.5rem!important;
}
#language, #description {
font-size: 0.8rem!important;
}
}
</style>
</head>
<body class="trans-quick">
<div class="bg-word trans-quick" id="behind"></div>
<div class="bg-word trans-quick" id="infront"></div>
<div id="container">
<button id="last"></button>
<button id="next"></button>
<div class="trans-quick" id="card">
<h1 id="word"></h1>
<span id="language"></span>
<p id="description"></p>
</div>
</div>
</body>
<script>
var words = [{
id: 1,
word: 'Forelsket',
language: 'Norwegian',
description: 'The indescribable euphoria experienced as you begin to fall in love.'
}, {
word: 'Saudade',
language: 'Portuguese',
description: 'A bitter-sweet melancholic yearning for something beautiful that is now gone.'
}, {
word: 'Eudaimonia',
language: 'Ancient Greek',
description: 'Often translated as ‘happiness’, it really means the deepest kind of fulfilment, often comprising a flourishing work and love life.'
}, {
word: 'Querencia',
language: 'Spanish',
description: 'A place where we feel safe, a ‘home’ from which we draw our strength and inspiration.'
}, {
word: 'Mono no aware',
language: 'Japanese',
description: 'An acute sensitivity to the transience of lovely things; a melancholic awareness that everything nice will fade combined with a rich enjoyment of this short-lived beauty.'
}, {
word: 'Dustsceawung',
language: 'Old English',
description: 'Contemplation of the fact that dust used to be other things – the walls of a city, the chief of the guards, a book, a great tree: dust is always the ultimate destination. Such contemplation may loosen the grip of our worldly desires.'
}, {
word: 'Yūgen',
language: 'Japanese',
description: 'A mood in which one feels that the universe as a whole possesses a mysterious, elusive, but real, beauty. Moonlight, snow on distant mountains, birds flying very high in the evening sky all feed this sensibility.'
}, {
word: 'Fika',
language: 'Swedish',
description: 'A traditional break from work usually involving a drink of coffee or tea. In Swedish offices, you are strongly expected to take a fika, no matter how busy you are. It’s democracy and community in a beverage.'
}, {
word: 'Iktsuarpok',
language: 'Inuit',
description: 'A feeling of edgy anticipation that makes one keep on looking out the window to see if an expected visitor is coming up the path.'
}, {
word: 'Ataraxia',
language: 'Ancient Greek',
description: 'A state of calm that Stoic philosophers aspired to. It’s a lack of agitation that comes from understanding the ways of the universe, accepting fate, knowing what one can control and focusing only on the things one can actually change.'
}, {
word: 'Wabi-Sabi',
language: 'Japanese',
description: 'The quality of being attractive because of being imperfect in some way. Instead of getting annoyed and upset by imperfections, wabi-sabi suggests that we should see the flaw itself as being part of what is charming.'
}, {
word: 'Verschlimmbessern',
language: 'German',
description: 'To accidentally make something worse in the process of attempting to mend or improve it.'
}, {
word: 'Ya’aburnee',
language: 'Arabic',
description: 'The desire to die before another person, because of how unbearable it would be to learn of their death.'
}, {
word: 'Gökotta',
language: 'Swedish',
description: 'To wake up early in the morning with the specific purpose of going outside to hear the first birds sing.'
}];
var body = document.body,
card = document.getElementById('card'),
cardWord = document.getElementById('word'),
cardLang = document.getElementById('language'),
cardDesc = document.getElementById('description'),
bgWordBehind = document.getElementById('behind'),
bgWordInfront = document.getElementById('infront'),
lastBtn = document.getElementById('last'),
nextBtn = document.getElementById('next'),
i = 0,
numWords = words.length,
cardUrl = '
https://s3-us-west-2.amazonaws.com/s.cdpn.io/380275/lightpaperfibers.png',
cardImg = new Image();
bgWordBehind.textContent = words[i].word;
bgWordInfront.textContent = words[i].word;
cardWord.textContent = words[i].word;
cardLang.textContent = words[i].language;
cardDesc.textContent = words[i].description;
cardImg.onload = function() {
card.style.background = "#FFF url(" + cardUrl + ") repeat fixed center";
}
cardImg.src=cardUrl;
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '37') {
goLeft();
} else if (e.keyCode == '39') {
goRight();
}
}
lastBtn.addEventListener("click", function(e) {
goLeft();
}, false);
nextBtn.addEventListener("click", function(e) {
goRight();
}, false);
function goLeft() {
if (i > 0)
i--;
else
i = numWords - 1;
changeCard();
}
function goRight() {
if (i < numWords - 1)
i++;
else
i = 0;
changeCard();
}
function changeCard() {
setTimeout(loadBG, 400);
setTimeout(loadCard, 900);
card.className += " fadeout";
body.className += " fadeout";
}
function loadBG() {
bgWordBehind.textContent = words[i].word;
bgWordInfront.textContent = words[i].word;
removeClass(body, "fadeout");
}
function loadCard() {
removeClass(card, "fadeout");
cardWord.textContent = words[i].word;
cardLang.textContent = words[i].language;
cardDesc.textContent = words[i].description;
}
//Function to easily remove classes, it takes two parameters:
//1. The element to have a class removed
//2. The name of the class we want to remove from our element
function removeClass(el, _class) {
//Check if the element exists,
//if it has a class,
//& specifically if it has the class we want to remove
if (el && el.className && el.className.indexOf(_class) >= 0) {
//Find the class to be removed (including any white space around it) using a regex search pattern
var pattern = new RegExp('\\s*' + _class + '\\s*');
//Replace that search with white space, therefore removing the class
el.className = el.className.replace(pattern, ' ');
}
}
</script>
</html>
