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
+
+
+
+
+
+
+
+
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);
+}