<div class="container"><div class="row"><h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2></div></div>
* {
box-sizing: border-box;
}
body {
background: #15202b;
font-family: sans-serif;
margin: 0;
}
a {
color: inherit;
}
.buttons {
position: fixed;
bottom: 1rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.buttons .button {
margin: 1rem;
background: rgba(255, 255, 255, 0.2);
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 2rem;
color: #fff;
border-radius: 1rem;
cursor: pointer;
}
.slides {
transition: all 1s ease-in-out .5s;
display: flex;
height: 100vh;
display: flex;
align-items: center;
}
.slides .slide {
transition: all 1s ease-in-out;
border-radius: 1rem;
background: #fff;
min-width: 100vw;
height: 100vh;
transform: scale(0.85);
}
.slides .slide.active {
transition: all 1s ease-in-out 1s;
transform: scale(1);
border-radius: 0;
}
#slide_1, #slide_2, #slide_3, #slide_4 {
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
color: #fff;
font-weight: bold;
text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
#slide_1 pre, #slide_2 pre, #slide_3 pre, #slide_4 pre {
padding: 1.5rem;
border-radius: 1rem;
font-weight: normal;
font-size: 80%;
}
#slide_1 {
background: -webkit-gradient(linear, left top, right top, from(#e48a28), color-stop(50%, #cc4856), to(#6e3a6c));
}
#slide_2 {
background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
}
#slide_3 {
background: url(https://images.unsplash.com/photo-1565706650051-8afe0956c85d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2000&q=80);
}
#slide_4 {
background: url(https://images.unsplash.com/photo-1580946288673-14bb59ce4433?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2000&q=80);
}
/*
* Synthwave '84 Theme originally by Robb Owen [@Robb0wen] for Visual Studio Code
* Demo: https://marc.dev/demo/prism-synthwave84
*
* Ported for PrismJS by Marc Backes [@themarcba]
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f92aad;
text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background-image: linear-gradient(to bottom, #2a2139 75%, #34294f);
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #8e8e8e;
}
.token.punctuation {
color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.number,
.token.unit,
.token.hexcode,
.token.deleted {
color: #e2777a;
}
.token.property,
.token.selector {
color: #72f1b8;
text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.selector .token.id,
.token.function {
color: #fdfdfd;
text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
}
.token.class-name {
color: #fff5f6;
text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;
}
.token.constant,
.token.symbol {
color: #f92aad;
text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
}
.token.important,
.token.atrule,
.token.keyword,
.token.selector .token.class,
.token.builtin {
color: #f4eee4;
text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #f87c32;
}
.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}
let activeSlide = 0;
const previousButton = document.getElementById("previousButton");
const nextButton = document.getElementById("nextButton");
const slideContainer = document.querySelector(".slides");
const slides = slideContainer.children
const previousSlide = () => {
if (activeSlide > 0) {
activeSlide -= 1;
updateUI()
}
};
const nextSlide = () => {
if (slides[activeSlide + 1]) {
activeSlide += 1;
updateUI()
}
};
const updateUI = () => {
slideContainer.style.marginLeft = `-${activeSlide}00vw`;
let activeSlideElement = document.querySelector(".active.slide")
activeSlideElement.classList.remove('active');
slides[activeSlide].classList.add('active');
}
const attachEvents = () => {
previousButton.addEventListener("click", previousSlide);
nextButton.addEventListener("click", nextSlide);
};
attachEvents();