From 30a5d53bc04cc3ec8615c1119764d7e387a4c0a7 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Fri, 22 Apr 2022 22:22:28 +0100 Subject: [PATCH] Tap to flip card - hopefully --- flip.js | 4 ++++ index.html | 49 +++++++++++++++++++++++++++---------------------- style.css | 13 ++++++------- 3 files changed, 37 insertions(+), 29 deletions(-) create mode 100644 flip.js diff --git a/flip.js b/flip.js new file mode 100644 index 0000000..7a7e5d9 --- /dev/null +++ b/flip.js @@ -0,0 +1,4 @@ +function flipCard() { + document.getElementById('card-front').style.transform = 'rotateX(-180deg)'; + document.getElementById('card-back').style.transform = 'rotateX(0deg)'; +} \ No newline at end of file diff --git a/index.html b/index.html index 0d5a319..bd08961 100644 --- a/index.html +++ b/index.html @@ -5,27 +5,29 @@ Luke Else -
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
const aboutMe = { -
name: 'Luke Else',
-
title: 'Software Engineer + Student',
-
contact: { -
email: 'mail@luke-else.co.uk',
-
website:'https://git.luke-else.co.uk'
} -
} + + +
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
const aboutMe = { +
name: 'Luke Else',
+
title: 'Software Engineer + Student',
+
contact: { +
email: 'mail@luke-else.co.uk',
+
website:'https://git.luke-else.co.uk'
} +
}
-
+
1
2
@@ -38,6 +40,9 @@
9
this.addEventListener('mouseover', () => {
this.flipCard = true;
}); +
-
- \ No newline at end of file + + + + \ No newline at end of file diff --git a/style.css b/style.css index ae02572..c769040 100644 --- a/style.css +++ b/style.css @@ -84,14 +84,13 @@ color: #11181f; } - @media(hover: hover) and (pointer: fine) { - .card:hover .card-front { - transform: rotateX(-180deg); - } - .card:hover .card-back { - transform: rotateX(0deg); - } + .card:hover .card-front{ + transform: rotateX(-180deg); } + .card:hover .card-back{ + transform: rotateX(0deg); + } + .card .line-numbers { position: absolute; top: 0;