ethanpisani.com/templates/card.html
2021-04-09 14:05:27 -04:00

51 lines
1.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Ethan's Site</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
type="text/css"
href="{{ url_for('static',filename='css/card.css') }}"
/>
<meta name="msapplication-TileColor" content="#000000" />
<meta name="theme-color" content="#000000" />
<link
rel="stylesheet"
type="text/css"
href="{{ url_for('static',filename='css/chem12cpt.css') }}"
/>
<link
rel="icon"
href="{{ url_for('static',filename='img/favicon.ico') }}"
/>
<meta name="robots" content="index,follow" />
</head>
<body>
<h3>Click card to flip.</h3>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">
<div class="cardtext">{{ front|safe }}</div>
</div>
<div class="card__face card__face--back">
<div class="cardtext">{{ back|safe }}</div>
</div>
</div>
</div>
<a href="../" class="button">Go Back</a>
<a onClick="window.location.reload()" class="button">Next</a>
<style></style>
<script>
var card = document.querySelector(".card");
card.addEventListener("click", function () {
card.classList.toggle("is-flipped");
});
</script>
</body>
</html>