From 88fa0d75294662ee3ba833dab391c3806d641c0f Mon Sep 17 00:00:00 2001 From: Dan Collette Date: Sat, 6 Mar 2021 11:28:38 -0500 Subject: [PATCH] Example for midterm --- card-flip/.vscode/settings.json | 3 ++ card-flip/index.html | 24 ++++++++++++++++ card-flip/script.js | 4 +++ card-flip/style.css | 49 +++++++++++++++++++++++++++++++++ 4 files changed, 80 insertions(+) create mode 100644 card-flip/.vscode/settings.json create mode 100644 card-flip/index.html create mode 100644 card-flip/script.js create mode 100644 card-flip/style.css diff --git a/card-flip/.vscode/settings.json b/card-flip/.vscode/settings.json new file mode 100644 index 0000000..aef8443 --- /dev/null +++ b/card-flip/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/card-flip/index.html b/card-flip/index.html new file mode 100644 index 0000000..8ec3d4c --- /dev/null +++ b/card-flip/index.html @@ -0,0 +1,24 @@ + + + + + + + + Card Flip + + +
+
+
+
+
Front
+
Back
+
+
+

Click To Flip

+
+
+ + + diff --git a/card-flip/script.js b/card-flip/script.js new file mode 100644 index 0000000..34c80a7 --- /dev/null +++ b/card-flip/script.js @@ -0,0 +1,4 @@ +var card = document.querySelector('.card'); +card.addEventListener( 'click', function() { + card.classList.toggle('is-flipped'); +}); \ No newline at end of file diff --git a/card-flip/style.css b/card-flip/style.css new file mode 100644 index 0000000..cd84356 --- /dev/null +++ b/card-flip/style.css @@ -0,0 +1,49 @@ +body { + font-family: Arial, Helvetica, sans-serif; +} +.section-1 { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.container { + width: 200px; + height: 260px; + margin: 40px 0; + perspective: 600px; +} +.card { + position: absolute; + width: 100%; + height: 100%; + transition: transform 1.5s ease-in-out; + transform-style: preserve-3d; + cursor: pointer; +} +.card.is-flipped { + transform: rotateY(180deg); +} +.card-face { + position: absolute; + width: 100%; + height: 100%; + line-height: 260px; + color: black; + text-align: center; + font-weight: bold; + font-size: 40px; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + border: 1px solid rgba(0, 0, 0, 0.25); + border-radius: 5px; +} +.front { + background: none; +} +.back { + background: none; + transform: rotateY(180deg); +}