Initial commit

codingw3 · Nov 8, 2023 · ee3492a · ee3492a
commit ee3492a
Show file tree

Hide file tree

Showing 8 changed files with 786 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# Video8-To-do-List
+ To do List | HTML CSS JavaScript
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Card Flip</title>
+    <link rel="stylesheet" href="resources/css/style.css" />
+    <link
+      rel="shortcut icon"
+      href="resources/images/repeat-solid.svg"
+      type="image/x-icon"
+    />
+  </head>
+  <body>
+    <div class="card" id="card">
+      <div class="card-inner">
+        <div class="card-front">
+          <h2>Front of the Card</h2>
+        </div>
+        <div class="card-back">
+          <h2>Back of the Card</h2>
+        </div>
+      </div>
+    </div>
+
+    <script src="resources/js/script.js"></script>
+  </body>
+</html>
diff --git a/resources/css/style.css b/resources/css/style.css
@@ -0,0 +1,74 @@
+:root {
+  --white: #cecbca;
+  --gray: #2e2e2e;
+  --green: #3cb371;
+  --dark-green: #2b855394;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: var(--gray);
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+.card {
+  width: 200px;
+  height: 300px;
+  cursor: pointer;
+}
+
+.card-inner {
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 0.5s;
+}
+
+.card.flipped .card-inner {
+  transform: rotateY(180deg);
+}
+
+.card-front,
+.card-back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 0 10px 3px var(--dark-green);
+  border: 2px solid var(--green);
+  transition: box-shadow 0.3s, border 0.3s;
+  border-radius: 10px;
+}
+
+.card-front {
+  background-color: var(--green);
+  color: var(--gray);
+}
+
+.card-back {
+    background-color: var(--dark-green);
+    color: var(--white);
+}
+
+.card-front:hover,
+.card-back:hover {
+    box-shadow: 0 0 10px 3px var(--white);
+    border: 2px solid var(--white);
+}
+
+.card-back {
+  transform: rotateY(180deg);
+}
diff --git a/resources/images/preview.png b/resources/images/preview.png
diff --git a/resources/images/repeat-solid.svg b/resources/images/repeat-solid.svg
diff --git a/resources/js/script.js b/resources/js/script.js
@@ -0,0 +1,5 @@
+const card = document.getElementById("card");
+
+card.addEventListener("click", function () {
+  card.classList.toggle("flipped");
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Auto detect text files and perform LF normalization
		* text=auto
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Video8-To-do-List
		To do List \| HTML CSS JavaScript